FlickrのURLからサムネールを取得する

JavaScript

twicli用サムネール表示プラグイン「thumbnail.js」を作った時の備忘録として。

だいたいの流れは

  1. FlickrのURLから写真のIDを抽出する
  2. Flickr APIの「flickr.photos.getInfo」を使ってJSONPで写真の情報を得る
  3. 得た情報からサムネールのURLを構築

という感じです。

詳しくは以下。

0. Flickr API keyを取得する

http://www.flickr.com/services/apps/create/apply/ から、用途に応じたKEYを取得しておきます。

1. FlickrのURLから写真のIDを抽出する

FlickrのURLについてはFlickr API Documentation | URLsを参照。

　　　　　　　　
例えば、 http://www.flickr.com/photos/neocat/3488883246/ だったら、「3488883246」がIDになります。正規表現で書くなら

/^http:\/\/www\.flickr\.com\/photos\/[\w-_@]+\/(\d+)/

とすれば、$1にIDが入ります。


Flickrは短縮URLもサポートしています。さっきの例だと、短縮URLは http://flic.kr/p//6jirrq となります。「6jirrq」の部分は、IDの「3488883246」をBase58でエンコードした文字列です。


URLからBase58 IDを取り出すには、正規表現で以下のように書けるでしょう。

/^http:\/\/flic\.kr\/p\/(\w+)$/


また、Base58のデコードは以下のスクリプトでできます。

function decodeBase58(snipcode) {
	var base58_letters = '123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ';
	var ret = 0;
	for (var i = snipcode.length, m = 1; i; i--, m *= 58)
		ret += base58_letters.indexOf(snipcode.substr(i-1,1)) * m;
	return ret;
}


どちらのURLからもIDを抽出できる関数は、上2つの正規表現をマージして下のように書けます。どちらにもマッチしないとundefinedが返ります。

function flickrPhotoID(url) {
	if (url.match(/^http:\/\/(?:www\.flickr\.com\/photos\/[\w-_@]+\/(\d+)|flic\.kr\/p\/(\w+)$)/))
		return RegExp.$2 ? decodeBase58(RegExp.$2) : RegExp.$1;
}

2. Flickr APIの「flickr.photos.getInfo」を使ってJSONPで写真の情報を得る

Flickr APIはJSONPに対応しているので、これを使って外部ドメインからでもJavaScriptだけでアクセスできます。
ここでは1.で得たIDから、写真の各種情報を得る「flickr.photos.getInfo」を呼び出します。


Flickr APIはいろいろな呼び出し方をサポートしていますが、JavaScriptならRESTが簡単です。また、レスポンスのformatとしてjsonを指定し、コールバック関数名をjsoncallback=〜で指定すれば、JSONPになります(jsoncallbackは省略するとjsonFlickrApiになる)。


具体的には、以下のようなURLをscriptタグのsrc="〜"に指定すればOKです。

http://www.flickr.com/services/rest?method=flickr.photos.getInfo
&format=json&api_key=<APIキー>&photo_id=<写真ID>&jsoncallback=<コールバック関数名>


実際に呼び出してみると、

jsonFlickrApi({"photo":{"id":"3488883246", "secret":"aa472bc65f", "server":"3342", "farm":4,
                        "dateuploaded":"1241098701", "isfavorite":0, "license":"4", "rotation":0,
                        "owner":{"nsid":"34944948@N03", "username":"neo_cat", "realname":"NeoCat", "location":""},
                        "title":{"_content":"Alpaca Mix CAFE"}, ...

といった感じのデータが返ってきます。


なおtwicliではJSONPの取得には拙作の クロスドメインJavaScript呼び出しクラスを使っています。このあたりはjQuery.getJSONとかお好みで。

3. 得た情報からサムネールのURLを構築

Flickr API Documentation | URLsにあるPhoto Source URLsのうち、サイズ指定を含む

http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg

を使います。{〜}内を2.で得たresponse.photo.〜で埋めていけばOKです。[mstb]の部分はサイズ指定で、サムネールならs(75x75)かt(長辺100)を指定すれば良いでしょう。例えばJSONPのコールバックで

function (x) {
	var p = x.photo;
	if (!p) return;
	var url = 'http://farm'+p.farm+'.static.flickr.com/'+p.server+'/'+
			p.id+'_'+p.secret+'_s.jpg';
	// このurlを使って何かする
}

という感じです。


先の写真の例であれば、

http://farm4.static.flickr.com/3342/3488883246_aa472bc65f_s.jpg

となります。

なお、Flickrのイメージを貼るときは必ずオリジナルのページにリンクする規約となっているので、忘れずリンクも張っておきましょう。