Picasa & MegaZine 3でクールにPageflip

久しぶりに Picasa HTML Template ネタいきます。

MegaZine 3 - A Free and Opensource Pageflip Engine (v1.36) の Picasa HTML テンプレートを作ってみました。テンプレート自体は他の HTML テンプレートと同様、XML ファイルの自動生成、画像リサイズ、index.html (WEBページ) およびその他 MegaZine 3 の必要ファイルをひとつのフォルダ内にエクスポートするという仕様になっています。
なお、 Demo は多少オプション品を取り付けてあります。

MegaZine 3 - Live Demo [ amanpulo ]

MegaZine 3 は XML ファイルの編集のしかた次第で非常に高機能な Pageflip を実現できますが、Picasa でエクスポートできるのは必要最低限のファイル類 (標準装備品 ) だけですのでお気をつけください。オプション類はご自身で取り付けて行く必要があります(笑)

オプション品全部入り Demo をご覧になりたい方は下記のリンクからどうぞ。

MegaZine 3 Official Site ： Live Demo

。。。時間をかければかなり凝ったものが出来そうですね。
MegaZine 3 自体は上の Live Demo の中にダウンロードのリンクがあります。
MegaZine 3 オフィシャルサイト のダウンロードページはこちらです。

なお、ココで配布する Picasa HTML テンプレートは
時間をかけられない人のための標準装備仕様です、、、くどいって では、

2009.07.06追記 :
MegaZine 3 は 1.37b にバージョンアップしたようです。現在ここで配布してしているものは v1.36 です。 近日中に v1.37b と入れ替えたいと思っています。しばらくお待ち下さい。
下にある手順 1. に v1.37b のリンクを追加しました。v1.36 と v1.37b はフォルダ名を替えてありますので解凍後に生成されたフォルダをそのままPicasa の [ templates ] フォルダに移動しても上書きされることはありません。動作を確認してから前バージョン (v1.36) を削除することをおすすめします。

2009.07.08追記 :
Picasa を利用してページ内にテキストを入れるテンプレートもあります。コンパクトデジタルカメラ横位置用ですが。。。ご興味がある方は下記の投稿をご覧下さい。

• MegaZine 3:Picasa テンプレート・Picasaのみで完結版

手順

1. MegaZine 3 - A Free and Opensource Pageflip Engine 用の特製 Picasa HTML テンプレートをダウンロードします。

   MegaZine 3 v1.36 を使用したテンプレート
   Download :korekore: MegaZine-3-Picasa-Template.zip

   MegaZine 3 v1.37b を使用したテンプレート
   Download :korekore: MegaZine-3-v137b-Picasa-Template.zip
   なぜか 1.37b のテンプレートだとフルスクリーンにしたときにモニターのセンターに表示されないのでダウンロードを中止しました。 ローカルで表示テストするとモニターのセンターからずれますが、サーバーにアップしたものはちゃんと中央に表示されました。
   1.37 になってテキスト入力のバグが修正され、画像上に (ページ上に) 文字 (Plain Text) が打ち込めるようになったので、ページの画像を背景にして文章が書けますね。。。行間は調整できないのだろうか、、、

2. ダウンロードした Zip ファイルを解凍します。
   
3. 解凍してできた MegaZine-3-Picasa-Template というフォルダ (上の画像の赤枠のフォルダ) を丸ごと Picasa の templates フォルダに移動します。これは他のテンプレートとまったく同じ作業です。

   普通に Picasa をインストールすると templates フォルダは

   [ コンピュータ ]→[ C ]→[ Program Files ]→[ Google ]→[ Picasa3 ]→[ web ]
   →[ templates フォルダ]

   にあります。

4. Picasa を起動しエクスポートしたい画像を選択し、メニューバーの [ フォルダ ] → [ HTML テンプレートとしてエクスポート ] をクリックしてエクスポート作業に移ります。

   

   この作業は Picasa に関しての過去の投稿をお読みいただければ画像入りで詳しく説明していますのでそちらをご覧ください。

   カテゴリー:Picasa の投稿をひととおり読んでみる

5. 最初に開く 「HTML テンプレートとしてエクスポート」 のウィンドウ左上部に拡大画像のサイズ指定箇所がありますが、どれを選択しても長辺 500px でエクスポートされます。
   (配布テンプレートのデフォルト設定。変更可能)

   

   テンプレートでは一眼デジタルで撮影した縦位置写真を高さ 500px でエクスポートして MegaZine 3 のページにぴったりフィットするように設定しています。
   したがいまして、一眼デジタルの横位置画像やコンパクトデジタルの 4:3 の画像をエクスポートすると MegaZine 3 のページにうまくフィットしません (エクスポートされた写真に合わせて MegaZine 3 側のファイルも編集する必要があるということ)

   それらの写真を フィットさせる方法は後述 しますので、エクスポートする元画像が一眼デジタルの縦位置写真以外の場合は必ずお読みください。

6. ウェブページのテンプレートの選択ウィンドウで MegaZine 3 Picasa Template を選択して
   [ 完了 ] ボタンを押します。

   

7. エクスポートが完了するとブラウザが立ち上がり WEB ページが表示されます。
   が、しかし、ブラウザの左上角に以下のような error 表示が出るだけで肝心の Pageflip は表示されません。

   

   ちゃんと動作させるにはエクスポートされたフォルダを開き megazine.xml という名前の XML ファイルを手作業で [ megazine ] というフォルダに移動する必要があります。

8. 【重要】 エクスポートされたフォルダを開くと以下のような構成になっているので megazine.xml という名前の XML ファイルを必ず [ megazine ] というフォルダの中に移動してください。なお、[ thumbnails ] フォルダ内の画像は必要ないのでフォルダごと削除しても OK です。もちろん、そのままにしておいても問題はありません。

   

9. 手順 8. の作業を完了させたら、さきほど Error が表示されていたページをリロードするか、エクスポートされたフォルダ内にある index.html をクリックしてブラウザに WEB ページを表示させてみてください。
   MegaZine 3 の Pageflip が表示されれば Picasa によるエクスポート作業は完了です。
   あとはサーバーにフォルダを丸ごとアップロードして、フォルダ内の index.html にリンクを張れば MegaZine 3 のページフリップをインターネット上で公開できます。

1 ページのサイズを変更したり、横位置の写真で Pageflip を作りたい場合

配布しているテンプレートは 1 ページ 幅 333 px、高さ 500 px です。したがって、一眼デジタルの縦位置写真をエクスポートした時にぴったりページにフィットするようになっています。

1 ページの幅と高さを変更してなおかつエクスポートする写真をそのページにフィットさせるにはテンプレート (MegaZine-3-Picasa-Template) 内にある以下の 2 つのファイル (場合によっては 1 つのファイル) を編集する必要があります。。

• index.tpl
• header.xml

【ポイント】
エクスポートされる画像サイズを変更するにはテンプレートの index.tpl を編集する必要がありますが、MegaZine 3 側のページサイズ変更に関しては、エクスポート後に megazine.xml を直接編集しても対応できます。
常に同じ条件でエクスポートするなら、テンプレートを編集してしまったほうが手間が省けます。
どちらでもお好きなほうで対応してください。

以下にテンプレートを直接編集して対応するいくつかの例を挙げておきます。

1 ページの高さを 600px にしたい場合

一眼デジタル縦位置写真を 600px でエクスポートする必要がありますので

1. index.tpl をテキストエディタ等で開き、高さ (長辺) が 600 でエクスポートされるようにします。
   編集前

   define imageWidth 500
   define imageHeight 500
   

   500 を 600 にして保存。
   編集後

   define imageWidth 600
   define imageHeight 600
   

2. 次に header.xml をテキストエディタ等で開き、1 ページのサイズを変更します。
   編集前

   <book bgcolor="0xCCCC99" pagewidth="333" pageheight="500" lang="ja,en">
   	<chapter>
   

   ページ幅 (pagewidth) 333 を 400 に、ページ高さ (pageheight) 500 を 600 にして保存。
   編集後

   <book bgcolor="0xCCCC99" pagewidth="400" pageheight="600" lang="ja,en">
   	<chapter>
   

   400 という数字 (幅) は一眼デジタルで撮影した縦位置写真の縦方向を 600px と設定したことで
   縦横比 3 : 2 = 600 : x という比から求めた数値です。

一眼デジタルの横位置写真仕様

1ページの幅を 500px 、高さ 333px 、本を開いた状態 = 見開き 1000px にして横長の本みたいに見せたい場合

1. header.xml をテキストエディタ等で開き、ページが横長になるようにします。
   編集前

   <book bgcolor="0xCCCC99" pagewidth="333" pageheight="500" lang="ja,en">
   	<chapter>
   

   ページ幅 (pagewidth) 333 を 500 に、ページ高さ (pageheight) 500 を 333 にして保存。
   編集後

   <book bgcolor="0xCCCC99" pagewidth="500" pageheight="333" lang="ja,en">
   	<chapter>
   

コンパクトデジタル横位置写真仕様

コンパクトデジタルの横位置写真を幅 400 px でエクスポートして、1ページの幅が400px、高さ300px、本を開いた状態 = 見開き 800px にフィットさせる場合

1. index.tpl をテキストエディタ等で開き、幅 400px でエクスポートされるようにします。
   編集前

   define imageWidth 500
   define imageHeight 500
   

   エクスポートされる画像の長辺サイズ 500 を 400 にして保存。
   編集後

   define imageWidth 400
   define imageHeight 400
   

2. header.xml をテキストエディタ等で開き、横 400px でエクスポートされた写真がフィットするように 1 ページのサイズを変更します。
   編集前

   <book bgcolor="0xCCCC99" pagewidth="333" pageheight="500" lang="ja,en">
   	<chapter>
   

   ページ幅 (pagewidth) 333 を 400 に、ページ高さ (pageheight) 500 を 300 にして保存。
   編集後

   <book bgcolor="0xCCCC99" pagewidth="400" pageheight="300" lang="ja,en">
   	<chapter>
   

   300 という数字 (高さ) はコンパクトデジタルで撮影した横位置写真の幅を 400px に設定したことで
   縦横比 3 : 4 = x : 400 という比から求めた数値です。

不具合等ありましたらコメントしてください。
お疲れさまでした