Flickr API で JSONP

Flickr API を使って photoset の一覧を Ajax で表示するものをつくってみたので、以下、まとめ。

まずは Flickr API を利用するための api key を取得する。

次に API の呼び出し方だけど、Flickr API はリクエストパラメータに "format=json" をつけると、こんな感じに、次のフォーマットで返ってくる：

jsonFlickrApi( /* JSON */ )

JSON の前後におまけがついて、関数呼び出しのフォーマットで返ってくる。 これすなわち、そのまま responseText を eval できることを意味するわけで、jsonFlickrApi は Ajax リクエストのコールバック関数というわけだ。 JSON におまけをつけるテクニックを JSONP (JSON with Padding) というらしい。

function photoset_init(){
   var url = "http://tsuyuguchi.com/masaaki/Flickr/flickrjson.cgi";
   var pars = "method=flickr.photosets.getList";
   var myAjax = new Ajax.Request(  /* from prototype.js */
      url, 
      {
         method: 'get', 
         parameters: pars, 
         onComplete: showResponse
      });
}

function showResponse( originalRequest ){
   /* call jsonFlickrApi */
   eval( originalRequest.responseText );
}

function jsonFlickrApi( obj ){
   /* ここにいろいろ処理を書く */
}

Ajax の通信はクロスドメインができないので、同じサーバに Flickr API のプロクシとなる CGI が必要になるが、これはただ単に Flickr API サーバとクロスドメイン通信ができない Javascript との間に立って右から左にリクエストを橋渡ししているだけで、特別な小細工は特に必要ない。ひとつ前のエントリはエラー周りで若干小細工してあるけど、たいした行数ではない。

Flickr 本家による説明によると、 format=json のほかにさらに 2 つのパラメータがあって

nojsoncallback=1   -> {...}
jsoncallback=wooYay   -> wooYay({...});

それぞれ JSON データのみ返すように指定できたり、コールバックの関数名を自分で指定できたりもするようだ。