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

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

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

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

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

手順

  1. MegaZine 3 – A Free and Opensource Pageflip Engine 用の特製 :ase: 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 ファイルを解凍します。
    MegaZine-3-Picasa-Template.zipを解凍する
  3. 解凍してできた MegaZine-3-Picasa-Template というフォルダ (上の画像の赤枠のフォルダ) を丸ごと Picasa の templates フォルダに移動します。これは他のテンプレートとまったく同じ作業です。

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

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

    にあります。

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

    HTMLページとしてエクスポート

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

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

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

    拡大写真のサイズ指定ウィンドウ

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

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

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

    MegaZine 3 Picasa Template を選択して[完了]

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

    Error

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

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

    必ず megazine.xml を移動する

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

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

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

1ページあたりの寸法

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
    

    500600 にして保存。
    編集後

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

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

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

    <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) 333500 に、ページ高さ (pageheight) 500333 にして保存。
    編集後

    <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
    

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

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

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

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

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

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

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