GData API のJSONP出力を利用して、Picasa のアルバム写真をjavascriptでサイトに埋め込み

Google Picasa の GData API を利用して、ピカサにアップロードしてある写真の情報をJSON形式で取得、自分のウェブサイトに javascript で組み込むサンプルを作ってみた。Picasa で無料で使える 1GB のアップロード領域を利用して、フォトアルバムを自分のページで表示したりできますね。JSONをjavascriptで処理するので、サーバ側のプログラムなども不要。Google だけあって、写真の表示速度も結構高速です。

Google Picasa : GData API JSON を利用したデモ

Googleの画像管理ソフト Picasaはwindows専用ですが、そのオンライン・アルバム機能であるPicasa webはOSに関係なく利用できるフォトアルバム・サービスです。windows, mac の両方に対応したファイル・アップローダーも提供されています。

Picasa%20Web%20Albums%20UploaderScreenSnapz001.png

フォトアルバムのサービスとしては、Flickrの知名度が圧倒的で、WEBサービスAPIを利用した周辺サービスも沢山あります。しかしFlickrの影に隠れてはいますが、実はPicasaのWEBサービスAPIも、かなり充実しています。というのも、Googleは自社の多くのサービスで共通に使えるGoogle Data API( GData API )というものを用意していて、そのサブセットとしてPicasaのWEBサービスAPIも用意されているからです。

Picasa Web Albums Data API Overview

GData APIは、基本的にはRSSフィードあるいは、Atom APIを利用するのですが、一部のサービスついてはJavascript で手軽に利用するためにJSON形式でのデータ取得にも対応しています。

Google Data APIs (Beta) Developer's Guide - Using JSON with Google Data APIs

上記のJSONについての説明ページには、Picasa Web Albums Data API は対応サービスに入っていなかったのですが、試しにリクエストを投げてみると、ちゃんとJSONフォーマットが返ってきました。

Picasa API JSONサンプルリクエスト

レスポンスの内容は、改行等が圧縮されていて読みづらいので、JsDecoderで再整形するか、Firebugs などで構造を見るとわかりやすいかも。ちなみに再整形したレスポンスは、このような感じ。exif情報も含め、かなり多くのデータが含まれています。そのかわりレスポンスのデータサイズもかなり巨大で、javascript として include することも考えると、取得する画像データの枚数は制限したほうがよいかも。

picasaCallback.js

Picasa Web Album API に対するリクエストは、以下のような HTTP リクエストで実行。

ユーザーが保持しているアルバムなどの情報を取得
http://picasaweb.google.com/data/feed/projection/user/userID/?kind=kinds

アルバムIDからアルバム情報を取得
http://picasaweb.google.com/data/feed/projection/user/userID/albumid/albumID?kind=kinds
あるいは、アルバム名でも可能
http://picasaweb.google.com/data/feed/projection/user/userID/album/albumName?kind=kinds

画像IDから画像情報を取得
http://picasaweb.google.com/data/feed/projection/user/userID/albumid/albumID/photoid/photoID?kind=kinds
あるいは
http://picasaweb.google.com/data/feed/projection/user/userID/album/albumName/photoid/photoID?kind=kinds

公開されているPublicの画像を検索するには
http://picasaweb.google.com/data/feed/projection/all?kind=photo&q=searchTerm

例えば、kaneko というユーザの持っているアルバム情報を、JSON形式で取得するのは以下。

http://picasaweb.google.com/data/feed/api/user/kaneko?kind=album&alt=json-in-script&callback=picasaCallbackAlbum

アルバムIDを指定して、アルバム情報を取得するサンプルは、

http://picasaweb.google.com/data/feed/api/kaneko/kaneko/albumid/5086333454932929537?kind=photo&alt=json-in-script&callback=picasaCallback&start-index=1&max-results=30;

alt=json-in-script は、ピカサのAPIに明示的に対応とは書いてありませんが、JSON形式でレスポンス形式を取得する指定です。また、callback= を指定して、JSONレスポンスを読み込み時に実行するcallback 関数を指定することができます。この callback 関数を利用して、ピカサから取得したレスポンス情報をWEBページ上に表示したりできます。サンプルでは jQuery ライブラリ を使っていますが、こんな感じ。

function picasaRequestAlbum() {
  insertScript("http://picasaweb.google.com/data/feed/api/user/"
    + $('input#picasaUser').attr('value')
    + "?kind=album&alt=json-in-script&callback=picasaCallbackAlbum");
};

function insertScript(query) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = query;
  $('head').append(script);
};

function picasaCallbackAlbum(response) {
  // console.debug(response);
  var output = "<h3>2. アルバムを選択</h3><p>Google Data API からアルバムを取得しました。画像を取得するアルバムを選んでください。</p><ul>";
  for (var i = 0; i < response.feed.entry.length; i ++) {
    output += "<li><a onclick='picasaRequestPhoto(¥""
     + response.feed.entry[i].gphoto$user.$t
     + "¥",¥"" + response.feed.entry[i].gphoto$id.$t + "¥")' >"
     + response.feed.entry[i].title.$t  + "</a></li>";
  };
  output += "</ul>";
  $("#albums").html(output).slideDown("slow");;
};

パラメーターについては詳しくは、Picasa Web Albums Data API Reference Guideのページで。簡単にメモっておくと、まずは kind= で取得するデータを指定。

Kind Description Supported Feeds
album 指定したユーザの持つアルバムを取得する。 User-based feed
photo アルバムに含まれる写真や、ユーザのアップロードした最新の写真を取得する。公開されているコミュニティーの写真の検索にも使う。 Album-based, user-based and community search feeds
comment 写真やユーザにつけられたコメントを取得する。 Photo-based and user-based feeds
tag ユーザーやアルバム、写真につけられたタグを取得。ユーザーやアルバムのタグを取得すると、どのようなタグが多く使われているかも表示。 User-based, album-based, and photo-based feeds

その他のパラメーターとしては、レスポンスの範囲を指定する方法として GData共通の start-index と max-results の指定が可能。またユーザーとコミュニティー検索に関しては、 q= で指定してテキスト検索をすることが可能。

Parameter Meaning Notes
kind Picasa Web Albums-specific query parameter for kind queries. 上記の kind 指定を参照
access Visibility parameter all, private, public を指定して、取得対象のプライバシー設定を指定。
thumbsize Thumbnail size parameter kind に album と photo を指定する時に有効。サムネイルとして利用する画像のサイズを指定。コンマで区切って複数の値を指定することも可能。複数を指定すると、feed の中に複数の media:thumbnail エレメントが含まれる。有効な指定値は以下にリスト。
imgmax Image size parameter album と photo の kind で有効。media:content の中に含まれる画像のサイズを指定。有効値は以下を参照。
tag Tag filter parameter user や album フィードで有効。タグを指定して、画像をフィルターする。
q Full-text query string タイトル、キャプション、タグをテキスト検索。 user-based と community 検索に有効。詳細はこちら参照。GData query parameter reference.
max-results 取得するレスポンスの最大件数。 See the Google data query parameter reference.
start-index 1-based index of the first result to be retrieved Used to page through the result set. See the Google data query parameter reference.

thumbsize と imagemax指定できる数字は以下の通り。

Size Cropped Embeddable Size Cropped Embeddable
32 Yes Yes 576 No Yes
48 Yes Yes 640 No Yes
64 Yes Yes 720 No Yes
72 No Yes 800 No Yes
144 No Yes 912 No No
160 Yes Yes 1024 No No
200 Yes Yes 1152 No No
288 No Yes 1280 No No
320 No Yes 1440 No No
400 No Yes 1600 No No
512 No Yes d No No