Picasa & AutoViewerを使ってFlashによるスライドショーをWebにアップする

ブログやWebサイトを公開しているとアルバム的な写真をどう見せようかいろいろ悩みますね。
写真はできるだけ大きく、さらに見ていただく方のウィンドウサイズにフィットし、なおかつ自動再生、キャプション、キーボードによる操作など、要求したいことをあげればキリがありません。
さらに無料で簡単ならなおさらイイ。

そこで今日はWeb検索で有名なGoogleが無料で配布している 「Picasa」 という画像検索、編集、共有ソフトに、これまた無料の「AutoViewer」 というスライドショーFlashをプラグインとして組み込み、簡単にFlashによる自動再生スライドショーをWebにアップする手順をご紹介します。

まずはテストとしてアップしたこちらをご覧ください（新しいウィンドウ、もしくはタブが開きます）

ブラウザのウィンドウサイズを拡げたり狭くしたりするとわかると思いますが、写真自体が自動でリサイズされて表示されるのでストレスがありません。
また、左上角にはキャプションとしてファイル名が表示されていますが、なくすことも出来れば打ちかえることも可能です。

写真の整理さえできていれば 「Picasa」 を使ってファイル・フォルダを生成（エクスポート）し、そのフォルダを丸ごとサーバーにアップするだけなのでWeb上で公開するまで3分も掛かりません。

Picasa & AutoViewerを使ってFlash自動再生スライドショー

1. Googleの 「Picasa」 をダウンロードしてインストールします。
   Google オフィシャルサイトよりPicasa をダウンロード
   なおインストールに関しては通常のソフト同様画面の指示に従い作業すればどなたでも簡単にインストールできますのでここでは説明を省かせていただきます。

   
   

   
   

   Picasaのインターフェース
   




2. 次にプラグインとなる 「AutoViewer Picasa Template」 をダウンロードします。
   ダウンロードページ ： AutoViewer - Picasa Template Instructions

   
   手順2 にあるAutoViewer Picasa Template here （写真の1）がダウンロードのリンクです




3. ダウンロードしたら解凍します。
   




4. 解凍してできた「autoviewer_picasa_template 」というフォルダを丸ごとPicasaがインストールされているフォルダ内の「templates 」というフォルダに移動します（「templates 」フォルダはどこにあるかは次の手順を参照してください）




5. 先ほどの写真の2 に書いてありますが

   Picasaは通常 [ドライブC]→[Program Files]内にインストールされます。したがいまして
   [コンピュータ]→[ドライブC]→[Program Files]→[Picasa2]→[web]→[templates] Picasa3 の場合は [ コンピュータ ]→[ C ]→[ Program Files ]→[ Google ]→[ Picasa3 ]→[ web ]→[ templates ]の順にフォルダを開いていき、そこに解凍してできた「autoviewer_picasa_template 」フォルダを丸ごと移動します。
   丸ごと移動することで AutoViewer Picasa Template がPicasaのプラグインとして機能します。

   Picasaが起動している状態でここまでの作業を行った場合は一度Picasaを終了し、再度起動させてください（写真の3）




6. ここまで出来たらあとはスライドショーとして見せたい写真が入ったフォルダをPicasa上で選択してHTMLページ（WEBページ）としてエクスポートします。

WEBにアップするHTMLページをエクスポートする

1. Picasaを起動してスライドショーとしてWEB上にアップしたい写真が入っているフォルダを選択します。（写真の1）
   

   次にメニューバー[フォルダ] → [HTMLページとしてエクスポート] をクリックします（写真の2）




2. 「HTMLページとしてエクスポート」のウィンドウが開きますので、エクスポートする写真のサイズやPCのどこに保存するか指定します。
   

   1 で写真サイズを指定します。通常は800px か640px ではないでしょうか。ちなみに今回テストでアップしたものが640px です。
   2 はフォルダの名前ですが、この名前はWEBで公開されたときのページタイトルにもなりますので内容や目的に合ったものにしたほうがいいと思います。
   3 でエクスポートしたファイル・フォルダをPCのどこに保存するか指定します。写真はデフォルトの状態。そのまますぐにサーバーにアップしてしまうならデスクトップが手っ取り早いでしょう。

   指定できたら「次へ」を押します。




3. 「ウェブ ページのテンプレートの選択」 というウィンドウが表示されます。
   

   プラグインとして組み込んだAutoViewer（AutoViewer Picasa Template）が表示されているのでそれを選択し「完了」ボタンを押すと、先ほどエクスポート先として指定したところにエクスポートされたフォルダ（ここでは「viewer_test」という名前のフォルダ）が保存されます。

   

   
   

4. エクスポートされたフォルダ内は以下のような構成になっています。
   

   
   

   1 の images というフォルダにはリサイズされた写真が入っています。
   2 の index.html がWEB上でのページになります。
   3 の gallery.xml をテキストエディターなどで開くとキャプションの削除、打ちかえ、スライドショーの動作設定などちょっとしたカスタマイズが行えます。

   カスタマイズするための gallery.xml の編集はここでは触れず別投稿します。
   。。。別投稿しました Picasa & AutoViewer でスライドショー #2




5. あとはこのフォルダをFTP（ファイル転送ソフト）を使って丸ごとサーバーにアップロードしてそのフォルダのURLにリンクを貼ればWEB上でFlashによるスライドショーが公開できます。

   この投稿の最初にあるテストサイトのアドレスを
   http://www.photoclip.net/wp-content/uploads/viewer_test/index.html
   と書きましたが、一番最後にあるindex.html は無くても大丈夫です。

今回テストでアップしたフォルダサイズを調べたところ300KB程度なので、この程度ならプロバイダから無料で提供されるようなインターネット上のストレージに10個や20個は楽にアップできるのではないでしょうか。

2008-10-31 追記
「Autoviewer、Picasaで簡単キャプション編集」 に Picasa 上でキャプションを編集する方法を載せました。