ホームページ作成支援ツール（Mツール）の使い方

ホームページ「美しい日本の風景」は、画像を4つのカテゴリー（春・夏・秋・冬）に分類して表示します。

ページに新しい画像を追加する場合、前回追加した画像の次に追加するのではなく、一番前に追加してこそ、訪問者に見てもらい易くなります。これを実現するためには、追加した画像の分だけ古い画像を順次繰り下げていく必要があり、数百枚の画像を表示するギャラリーのページを作成するのは面倒な作業になります。そこでHTMLのページを固定的なページとして作成するのではなく、画像の表示はブラウザ側に任せることにして、作成時にページを書き換えることはないようにしました。
画像の表示はテキストファイルのリスト（list.txt）に従って、ブラウザ側で実行する方式をとっています。
従って、カテゴリーページの画像の追加・削除・入替は各カテゴリーフォルダの「list.txt」をテキストエディタまたは Windows 付属の“メモ帳”で書き換えることで、簡単に掲載画像を編集することが可能になっています。

また、各ページは、PC・タブレット・スマートフォンなど表示幅の違いにも対応しています。更に 縦/横画像 が混在していても、ページ幅にぴったりフィットするように画像の幅を自動調整しています。

ホームページ作成支援ツール（作者の村岡の頭文字から Mツール と呼ぶことにします）は、基本的に

1. 新しく掲載する画像ファイル名（撮影年月日）から、四季に分類して list.txt にファイル名を追加し、降順にソートする
2. メイン画像、サムネール画像を、それぞれ既定のサイズに縮小する
3. トップページの新着情報を書き換える
4. それらをサーバーにアップする

ためのツールです。
Mツールとその付属ファイルは随時バージョンアップしてサーバーにアップしておきますから、ダウンロードしてお使いください。ダインロードはダウンロードツール（G-down.hta）の「ダウンロード」ボタンをクリックするだけで、即座にダウンロードし所定のフォルダに保存されます。
バージョンアップした時はメールでお知らせします。

■ Mツール をダウンロードする

1. ダウンロード用の［G-down.hta］をダブルクリックします。
2. Mツール［Gallery.hta］のバージョンを確かめます。
   メールで知らされたバージョンとMツールの外枠の上辺に書いてあるバージョンが一致していること
3. Mツール を初めて使う時は、デスクトップにショートカットを出した方が便利です。
   ショートカットの出した方は 図1 のようにします。（2回目以降は必要ありません）
   • Mツール（Gallery.hta）を右クリックします。
   • ポップアップが表示されますから、中央の［送る（N）］をクリック。
   • 新しいポップアップの［デスクトップ（ショートカットを作成）］を選択。

     

     図1

   以上でデスクトップにショートカットが出ました。
4. Mツールを使うためには、Mツールの他にサーバーとファイルのやり取りするためのFTP用のパスワードなどを書いたファイルが必要です。
   これは管理者からメールなどで送ってもらって下さい。（セキュリティの関係で別ファイルになっています）
   そのファイルをご自分のパソコン内の指定の場所に保存して下さい。

■ Mツール を使う

Mツール本体、または、ショートカットをダブルクリックするとMツールが起動して、図2 の画面が表示されます。

1. 新しく画像を追加する場合は左の［撮影日記を新規作成］を
2. 既にアップしてある日記を修正する場合は［撮影日記を修正する］を
3. 更に古いデータを編集/追加する場合は［リスト編集後の更新］を

   

   図2

選択してください。

A．撮影日記を新規作成

1. 記事タイトル：　撮影地など記事のタイトルを入力します。
2. 記事など：　撮影雑感や日記などを枠の中に書きます。
   上の枠は画像の上に表示する記事になります。大体3行程度で書いてください。
   それ以上長い文は下の枠内に、その続きを書きます。下の枠の内容は画像の下に表示されます。文字数に制限はありません。いくら長い文でも結構です。
3. 画像ファイル：　掲載する画像ファイル名を［参照］ボタンで入力します。
   入力した画像はその上のスペースにサムネイルが表示されます。
4. 画像タイトルまたは簡単なコメントを書きます。書かなくてもかまいませんが、できるだけ入力した方が親切です。

   

   図3

5. 以上で入力が終わりました。［作成／転送］ボタンをクリックします。
   画像の縮小とカテゴリー毎のファイルを自動作成して、サーバーに自動転送します。（転送時はコマンドプロンプトの黒い画面が表示され、転送の様子を確認できます）
6. 「トップページ」と「日記ページ」に記事と画像が表示されると共に、四季ページにも画像が追加されています。

B．撮影日記を修正する

1. 既に登録済みの日記の画像や文を修正します。
2. ［撮影日記を修正する］ボタンをクリックすると、サーバーからデータをダウンロードし、アップ済みの日付が表示されます。（図4）
3. 日付は最新のものから40個です。それ以上古い記事は、修正できません。
4. 修正する日付をクリックすると、アップ済みの日記のデータが読み込まれてツールに表示されます。
5. これ以降の編集作業は、Aの新規作成と同じです。

   

   図4

C．リスト編集と転送

1. B の「撮影日記を修正する」では修正できない、古いデータなどを変更したりする場合は
2. 画像が登録されているリストファイルをテキストエディタ または メモ帳 などで開きます。
   リストファイル名は
   • 四季フォルダ内には ＝ list.txt（四季毎にあります）
   • 日記フォルダ内では ＝ list.txt (名前は同じですがデータ形式は違います)
3. ファイルの中身は 図5 および 図6 のようなデータになっています。
   四季の場合は1行が1枚分の画像データです。日記の場合は1行が1日分のデータです。
4. 何れもデータは区切り文字（デリミタ）として <> で区切られた、CSVファイルです。

   

   図5　四季用list.txt

   • xxxx.jpg（画像ファイル名） <> yyyyyyy（キャプション）　という形式になっています
   • キャプションがない場合も、画像ファイル名の後ろのデリミタ <> は必須です。

   

   図6　日記用list.txt

5. 日記の場合のデータは［日付数字］<>［タイトル］<>［記事1］<>［記事2］<>［画像1］<>［キャプション1］<>［画像2］<>［キャプション2］・・・・・という構成になっています。（1日分は非常に横に長いデータです）
6. リスト（list.txt）の編集が終わったら、FTPツールでサーバーにアップします。（これらはMツールは使いません。手作業です）

以上のように、既に画像が登録されている場合はリストファイル（list.txt）を編集することで、画像タイトル編集、画像毎のカテゴリーを追加/削除、画像のカテゴリー入替が可能です。項目C の場合は、すべて手動操作です。

この「Mツール」の基本的な動作は、新しく画像を追加する場合は、画像フォルダに画像を転送するとともに、該当カテゴリのテキストファイル（list.txt）に、画像ファイル名を追加・更新し、そのリストに従ってカテゴリ内の画像を並び変えるという方式で表示しています。また、同時に撮影日記を作成し、それをトップページにも表示して新着情報としてアピールします。