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 の両方に対応したファイル・アップローダーも提供されています。

フォトアルバムのサービスとしては、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