Office Live にうつつをぬかしている間に @aka さんに先を越されてしまいましたが、せっかく書いたので投稿しちゃいます（＾＾ゞ。先日のアップデートで日本語化され、有料ながら大容量サービスへもアップグレード可能になるなど、日本でも利用しやすくなった Picasa Web Album ですが、そこにアップロードした画像を自分の Web ページに埋め込む方法が Google Operatin System さんのこちらの記事で紹介されていました。サムネイルのサイズが指定できるなど、なかなか便利に使えそうです。また、標準の閲覧ページではオリジナルサイズの画像全体を表示することができませんが、それを解消する方法もご紹介します。 Picasa Web Album に保存した画像を blog などで利用しようと思っている方は必見ですよ！

まずは、なにも考えずに画像を埋め込んでみましょう。手順は以下のとおりです。

1. Picasa Web Album で埋め込みたい画像を表示させる。
2. ページの右にある「ブログ/MySpaceに埋め込む」というリンクをクリックする。
3. 表示された HTML を自分の Web ページの任意の場所にコピー＆ペーストする。

これだけです。試しに埋め込んでみたのが以下の画像です。

From blog画像

デフォルトでは公開アルバムへのリンクが画像の下に表示されますが、 HTML コードの上にある「アルバムリンクを非表示」のチェックを入れれば、完全に画像だけの状態にもできます。いずれの場合も、画像をクリックすれば Picasa Web Album でその画像を閲覧できます。

なお、私が試した限り Opera ではうまくいきませんでした。 JavaScript なしの簡易バージョンになってしまうので、「ブログ/MySpaceに埋め込む」のリンクが表示されません。まあ「View largest photo」のリンクで画像の URL はわかるので、自分で HTML を書けばいいんですけどね。相変わらず Opera には冷たいなぁ・・・（´ー｀；

追記 : こちらの記事でご紹介した User JavaScript を使えば、 Opera でもきちんと動作するようです。というか、単に UA を変えればいいだけなのかも。

標準の UI には表示されていませんが、 Picasa Web Album はさまざまな大きさのサムネイル画像を生成してくれるようです。前述の Google Operating System さんの記事によると、 72, 144, 200, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600 のサイズの画像が利用できるそうです。それらの利用方法をご紹介しましょう。

上記の埋め込み用 HTML をよく見ると、サムネイル画像の URL は概ね以下の形式になっているのがわかります。

http://lh?.google.com/image/<ユーザー名>/<id1>/<id2>/<id3>/s288/name.jpg

この "s288" の部分が画像サイズの指定になっているようです。従って、そこを "s144" に置き換えれば、 144 ピクセルのサムネイルが取得できます。こんな感じですね。

なお、オリジナルサイズの画像を取得するときは、 "s???" の部分を省略して以下のような URL にすればよいようです。

http://lh?.google.com/image/<ユーザー名>/<id1>/<id2>/<id3>/name.jpg

これを知っていれば、オリジナル画像への直リンクも張れるので、便利なことも多いかと思います。

Picasa Web Album の標準の画像閲覧ページには、上記のオリジナル画像へのリンクが配置されていません。ですので、サイズの大きい画像をオリジナルの解像度で見たいときは、小さいウインドウの中でスクロールして見なければならず、かなり不便です。ところが、 Opera などで表示される JavaScript なしの閲覧ページには、ちゃんとオリジナルサイズへのリンクが配置されていますので、サポートブラウザーでもこちらのページを使いたい場合もあるでしょう。そんなわけで、ブラウザーによらず JavaScript なしの閲覧ページにアクセスする方法をご紹介します。

JavaScript なしの閲覧ページの URL は以下のようになっています。

http://picasaweb.google.com/lh/viewPhoto?uname=<ユーザー名>&iid=<画像ID>

画像IDは、通常の（JavaScriptが有効な）閲覧ページの '#' 以降の数値です。例えば、最初の画像の通常閲覧ページは以下の URL になっていますので

http://picasaweb.google.com/webosgoodies.jp/Blog/photo#5007676518200821442

JavaScript なしの閲覧ページは以下になります。

http://picasaweb.google.com/lh/viewPhoto?uname=webosgoodies.jp&iid=5007676518200821442

最後におまけとして、上記の JavaScript なし閲覧ページにリンクした画像を簡単に埋め込めるブックマークレットを作ってみました。

Picasa画像埋め込み

Picasa の閲覧ページで上記のブックマークレットを実行すると、その画像を埋め込む HTML が表示されます。動作は Opera と Firefox で確認しています。残念ながら IE6 では動きません。 IE6 上での開発環境が整っていないのでデバッグし切れませんでした・・・orz 。申し訳ありません。

以上、本日は Picasa Web Album にアップロードした画像の活用方法をご紹介しました。この blog で使う画像も、今度から Picasa で保存しようかと考えています（PNG が保存できないので断念しました・・・orz）。画像の管理インターフェースはとても良くできているので、なかなか有効ではないでしょうか。あとは、もう少し無料で使える容量が多ければというところですね。足りなくなったら有料サービスに移行すればいいのですが、今後の改善に期待したいところです。