自動再生スライドショー

弟のホームページ「GPS登山」に、スライドショーを付ける改修プログラムを作って、5月22日の「宮之浦岳」から最も新しい10月9日の「穂高岳」までも6日分に自動再生スライドショーを付けた。
このツールは下記の項目を自動処理します。

  1. 山行記録本文のベースになるファイルを作成します。(これに画像と文を編集します)
  2. GoogleMap と電子国土マップの登山軌跡をGPSデータを基に自動作成します
  3. パノラマ展望図ファイルを作成します
  4. 各百名山 Index ページに項目を追加します
  5. 更新履歴とサイトマップに項目を追加します
  6. トップページの新着情報に項目を追加します。項目が8個を超えた分は古いものから削除します。
  7. サーバーにアップする画像を所定のサイズに縮小し、所定のフォルダにコピーします。
  8. BMP形式のグラフ画像はGIF形式にフォーマット変換します。
  9. [前記事][後記事]移動用とカレンダーのJavaファイルを更新します。


<図1> 作成ツールの入力フォーム 

<事前準備>

 サーバーからツール本体と画像処理用ファイルをダウンロードします
  1. [template]内のツール本体とひな形ファイル全部 (VerUP場合は再DownLoad)
  2. [photoshifter]内の設定ファイル[mysetting0.xml]~[mysetting2.xml] (VerUPした場合は再DownLoad)
  3. [photoshifter]内の[photoshifter.exe](一度ダウンロードしてあれば再DownLoadの必要はない)

<使い方>

  1. 作成作業はデスクトップで行います。デスクトップには余分な画像ファイルは置かないでください。デスクトップにあるJPEG画像はすべて変換・保存の対象になります。
  2. 55walking.hta をダブルクリックすると[図1]のフォームが開きます。
  3. [日付]から[百名山]までを入力します。(この時デスクトップに impdata.txt があると、それが読み込まれます)
  4. [実行1]をクリックすると、デスクトップに本文用[index.html]とインポート用データ[impdata.txt]を作成します
  5. [ホームページ・ビルダー]で、新しく作成された[index.html]を開き、その横に画像フォルダを同時に表示します。(図2)
    画像フォルダの場所は任意です。ディスプレーに表示された画像が読み込まれます。

    <図2> PCディスプレー上の表示例
  6. 図2 の左側はマイピクチャのオリジナル画像フォルダです。右側はHPビルダーのページ編集画面です。
    左から右に画像をドラック&ドロップして、画像をはめ込み、文を編集してページを完成させます。
    (この時、画像はオリジナルの大きいサイズのままでいいです。縮小はツールがやります)
  7. 拡大用の画像ファイル名はツールが自動処理しますから入力の必要はありませんが、キャプション用の
    [title=""]には説明文を入力してください。
  8. HPビルダーの「保存」クリックします。
  9. すると図3のようなダイアログボックスが開きます。
    [保存場所]はデスクトップ、[保存場所にファイルをコピーする]にチェックがあることを確認して[保存]をクリックします。

    <図3> 保存時のダイアログボックス
  10. デスクトップにページ編集に使用した画像がすべてコピーされます。
  11. 再び作成ツールを開いて、[GPXファイル]以降を入力します。
    マーカー用画像は本文に使用した画像と重複しても構いません。(画像フォルダはどこでも構いません。[参照]で任意の場所の画像を指定できます。)
  12. [実行2]をクリックします。
    ファイルの作成は短時間で処理できますが、画像処理には1枚に付き1~2秒かかります。画像の枚数によっては1分以上かかる場合があります。

<自動処理されるファイル>

以下の必要なすべてのファイルは[UPload]フォルダ内に生成されます。
[UPload]フォルダ内のフォルダ構成は、下記のようにサーバー内のフォルダ構成と全く同一階層構造にしてありますからアップロードが楽です。
[000000]フォルダ内のファイルは全て新規に作成されます。その他のファイルは項目追加など書き換えファイルです。これらの一連の作業は、すべて自動化されているので、大体1分程度で完成します。
時間をかける部分は、画像の選択、レタッチ、文を考えることなどで、これができれば後の作業は相当楽になりました。

├ [Desktop]   デスクトップは作業フォルダとして下記の2ファイルが臨時に作成される
│   ├ index.html   本文の中間ファイル
│   └ impdata.txt  作成時のデータを記録しておくTEXTファイル。 やり直す時このデータがインポートされる

└ [UPload]  臨時に作成されるこのフォルダ内にアップロードする全てのファイルが収納されている
    ├ index.html  トップページ用:新着情報が追加される。8項目を超えた分は古い方から削除されます
    │
    ├ [common]  コモンファイルフォルダ
    │    └ [js]  JavaScript用フォルダ
    │       └ java1.js  [前記事][後記事]移動用とカレンダーのJavaファイル
    │
    ├ [site]  サイトフォルダ
    │   ├ site6.html   更新履歴HTML
    │   └ site10.html  サイトマップHTML
    │
    ├ [yama]   yamaフォルダ
    │   ├ index111.html  各百名山用 index.html。 指定百名山の数によって4枚~16枚まで
    │   │     :
    │   ├ index114.html
    │   │
    │   └ [000000]  日付フォルダ(000000は実際は日付数字)
    │        ├ index.html  山行記録の本文ページHTMLファイル
    │        ├ pan.html    山頂からのパノラマ展望図用HTMLファイル
    │        ├ map.html   山行ルート地図用HTMLファイル
    │        ├ gmap.htm   GoogleMap表示用Scriptを書いたファイル(エンコードポリライン)
    │        ├ marker.xml   GoogleMapのマーカー表示用XMLデータ
    │        ├ points.xml  電子国土MapのGPS軌跡用XMLデータ
    │        ├ kokudo.js    電子国土Map表示用Scriptファイル
    │        └ new.gpx    GPSデータのコピー
    └ [img]  画像フォルダ
        └ [yama]   
            └ [000000]   画像用日付フォルダ(000000は実際は日付数字)
                ├ [slide] 本文用およびGoogleMap撮影ポイント用の大画像フォルダ
                │   └ JEPG画像 サイズ(800×600)
                │
                ├ [album] 本文ページ用の小画像
                │   └ JEPG画像 サイズ(243×175)
                │
                ├ [thumb] スライドの下のサムネイル用 小サイズの画像
                │   └ JEPG画像 サイズ(80×60)
                │
                └ grp.gif コースタイムの下に表示する山行グラフ

<アップロード>

アップロードの時に転送先のフォルダを間違わないようにするのは、なかなか気を使うものです。
そこで、間違いを減らすために[UPload]フォルダは上のフォルダ構成図のように、転送先のサーバーのフォルダ構成と全く同一構成で作成されるようにしました。
[UPload]フォルダとサーバーの[www]フォルダを同一階層に設定すれば、すべてのファイルを一気に正しい位置に転送することができます。(図4)


<図4> FTPツールの転送例

上の図4は、FTPツールでの転送例です。左の窓はPC側で[UPload]フォルダをダブルクリックして開いた状態です。
一番下に見えている [index.html]はトップページのファイルです。
右側の窓はサーバー側で、接続した初期状態で、[index.html]は同じくトップページのファイルです。
この例のような状態にしてから、左側のすべてのファイルとフォルダを選択して、[↑]ボタンをクリックすれば、[img][site][yama]フォルダの中身はそれぞれ所定の位置に転送されるようになっています。

データ
  • 2011.11.21(月)
アーカイブ

現在位置: ホームなんでも日記メニュー > このページ