Picasa HTMLテンプレート:Flash Page Flip Gallery

同じような Pageflip を実現できる 『 MegaZine 3 』 の Picasa HTMLテンプレートを作ってみました。高機能な Pageflip Engine なので個人的には 『 MegaZine 3 』 をおすすめします。
よろしかったらこちらもあわせてご覧下さい。

• Picasa & MegaZine 3でクールにPageflip

-- 以下、本投稿です。 --

Picasa のHTMLテンプレートの中のひとつ、Flash Page Flip Gallery についてご質問いただきましたので設置方法をご紹介します。

まずは Flash Page Flip Gallery の Demo をご覧下さい。

:reply: このテンプレートは Flash Page Flip Photo Gallery template for Picasa で配布されています。

いただいたご質問は下記のような内容です。

FlashPageFlipgallerylandscape に挑戦しました。FFFTPで転送しましたがWeb上では完成して見えますがインターネット上にはグレーの画面が出るだけです。

Web上とインターネット上の違いがよくわからなかったのですが、おそらくページ上に Flash が表示されないのだろうと思い、私も試しに Picasa3 のHTMLテンプレート:Flash Page Flip Gallery 使いHTMLページをエクスポートして、生成されたファイルフォルダをそのままサーバーにアップロードしてみました。。。私の場合はページすら表示されませんでした

さて、何が原因なのでしょうか？ 配布元のサイトを読んでみたところどうやらエクスポート後に手動でファイルを移動させる必要があるようです。あと、配布元のサイトには書かれていないみたいですが、WEBページとなる html ファイルがエクスポートされないのでテンプレートフォルダ内にある index.tpl をちょっと編集する必要があります。

なお、以下の手順は、PC にはすでに Picasa3 がインストールされていて、なおかつ FlashPageFlipGallery HTMLテンプレートが Picasa3 の template フォルダにインストールされていると仮定して話しを進めていきます。

Picasa HTMLテンプレート:Flash Page Flip Gallery の設置方法

1. まず FlashPageFlipgallerylandscape フォルダ内にある index.tpl というファイルをテキストエディタ等を使って一箇所編集しなおします。
   index.tpl は以下の順番でフォルダを開いていけばたどり着けます。
   Picasa3 の場合
   ---
   [ コンピュータ ]→[ C ]→[ Program Files ]→[ Google ]→[ Picasa3 ]→[ web ]→[ templates ]→[ FlashPageFlipgallerylandscape ]→ index.tpl
   ---
   Picasa2 の場合
   ---
   [ コンピュータ ]→[ C ]→[ Program Files ]→[ Picasa2 ]→[ web ]→[ templates ]→[ FlashPageFlipgallerylandscape ]→ index.tpl
   ---
2. index.tpl をテキストエディタ等で開きます。
3. 一番下までスクロールすると以下のように記述されています。

   copy assets￥ ￥
   copy assets￥js￥ js￥
   copy assets￥swf￥ swf￥
   copy assets￥txt￥ txt￥
   copy assets￥xml￥ xml￥
   copy assets￥img￥ img￥

   (注)実際には￥ は半角です。
   下の文字列をそのままコピペしてしまうと全角になってしまいますのでご注意ください。
   赤字のところを

   copy assets￥index￥
   copy assets￥js￥ js￥
   copy assets￥swf￥ swf￥
   copy assets￥txt￥ txt￥
   copy assets￥xml￥ xml￥
   copy assets￥img￥ img￥

   と編集しなおして保存します。

   なおこの index.tpl の編集作業がイマイチよくわからない方は 編集済みのテンプレートを使ってエクスポートする項 をお読み下さい。

4. 編集＆保存が終わりましたら、通常の手順で FlashPageFlipgallerylandscape を指定して HTMLページとしてエクスポートします。
   
5. エクスポートされたフォルダを開くとフォルダとファイルは下のような構成になっていますのでそのなかの Pages.xml というファイルを xml というフォルダに移動します。
   
6. あとはエクスポートされたフォルダを FTP （ファイル転送ソフト）を使って丸ごとサーバーにアップロードして、そのフォルダの URL にリンクを貼れば WEB 上で Flash によるスライドショーが公開できます。

以上です。

2009.01.27 追記

ファイル index.tpl をうまく編集できない方

上の手順 3. にある index.tpl をテキストエディタ等で編集できない方は、修正済みのテンプレートを作成しましたので以下の手順でトライしてみてください。

1. 修正済みのテンプレート（zipファイル = 圧縮ファイル）をダウンロードしてください。
   ダウンロード :korekore: FlashPageFlipGallery-Revision.zip
   かりに Vista ですとこのようなアイコンになっていると思います。
   
2. 解凍してください。解凍すると FlashPageFlipGallery-Revision というフォルダが作られます。中には1つのフォルダと5つのファイルが入っています。 index.tpl は修正済みですので編集しなくて大丈夫です。
   
   
3. その FlashPageFlipGallery-Revision というフォルダを丸ごと Picasa3 のtemplates フォルダに移動します。templates フォルダは
   Picasa3 の場合
   ---
   [ コンピュータ ]→[ C ]→[ Program Files ]→[ Google ]→[ Picasa3 ]→[ web ]→[ templates ]
   ---
   Picasa2 の場合
   ---
   [ コンピュータ ]→[ C ]→[ Program Files ]→[ Picasa2 ]→[ web ]→[ templates ]
   ---
   です。ここまででテンプレートは使用可能となっています。
4. HTMLページとしてエクスポートする作業を始めて下さい。
5. [ ウェブページのテンプレート選択 ] のところで FlashPageFlipGallery のうしろに -revision という文字が書かれたテンプレートそ選択して下さい。それが修正版になります。
   
   この [テンプレート選択] の段階で修正版が選択肢のなかに表示されていない場合は 手順2. で解凍してできた FlashPageFlipGallery-Revision フォルダが Picasa のtemplates フォルダにちゃんと移動できていないことになりますので 手順3. をもう一度よく読み templates フォルダに FlashPageFlipGallery-Revision フォルダがちゃんと移動できているか確認して下さい。
6. FlashPageFlipGallery - revision を選択できたら [ 完了 ] ボタンを押してエクスポートしてください。
7. エクスポートされたフォルダを開くとフォルダとファイルは下のような構成になっていますのでそのなかの Pages.xml というファイルを xml というフォルダに移動します。
   
8. あとはエクスポートされたフォルダを FTP （ファイル転送ソフト）を使って丸ごとサーバーにアップロードして、そのフォルダの URL にリンクを貼れば （index.html にリンクを貼っても構いません） WEB 上で Flash によるスライドショーが公開できます。

以上です。