Flickrの写真をjQueryで取得して表示してみた

Flickr の写真のリストを取得してみることにしました。
jQuery でならできるんじゃないかしら自分と思ったので。

取得して表示してみたページがこれです。 → Flickr Photos ※調整中です。

Flickr API の提供する flickr.photos.search メソッドを使って、特定のユーザー（わたし）の square というタグのついた写真を検索しています。

Flickr API Key を取得する

The App Garden で［Get your API Key］の［Request an API Key］から取得画面へ進みます。

非商用利用なので、［APPLY FOR A NON-COMMERCIAL KEY］を選択。

アプリケーション名と、何を作っているのか入力して、規約に同意して［SUBMIT］すれば取得完了。
アプリケーション名や、説明は適当で大丈夫です。あとで編集できます。

写真投稿者ユーザー ID を調べる

特定のユーザーの写真を検索したいので、ユーザーIDを調べます。
こういうやつです。→ 00000000@N00

この ID は、buddy icon の画像名を調べたらわかりました。※プロフィール用の画像

ID を調べるための idgettr という便利なサービスもあります。

Flickr に REST でリクエストして JSONP 形式で取得

jQuery たまご組の頃に、会社のプログラマから教えてもらった JSONP ^^
JSONP 形式で取得できるということなら、jQuery ひよこ組のわたしでも取得して表示くらいなら出来そうだなと思ったので。実際簡単に取得できました。

The App Garden :: JSON Response Format
flickr.photos.search メソッドのパラメータについては『 第2回　JavaScriptからFlickr APIで画像検索』を参考にさせていただきました。

$(function(){
    $.ajax({
        type : 'GET',
        url : 'http://www.flickr.com/services/rest/',
        data : {
            format : 'json',
            method : 'flickr.photos.search', // 必須 :: 実行メソッド名 
            api_key : 'xxxxxxxxxxxxxxxxxxx', // 必須 :: API Key
            user_id : 'xxxxxxxx@N00', // 任意 :: userID
            sort : 'date-posted-desc', // 任意 :: 並べ替え
            tags : 'square', // 任意 :: タグで検索
            per_page : '100', // 任意 :: 1回あたりの取得件数
        },
        dataType : 'jsonp',
        jsonp : 'jsoncallback', // Flickrの場合はjsoncallback
        success : _getFlickrPhotos // 通信が成功した場合の処理
    });
});

function _getFlickrPhotos(data){
    var dataStat  = data.stat;
    if(dataStat == 'ok'){
            // success ★
    }else{
            // fail
    }
}

上記で下記のようにリクエストしてることになる。と思う。

http://www.flickr.com/services/rest/?jsoncallback=foo&format=json&method=flickr.photos.search&api_key=xxxxxxxxxxxxxxxxxxx&user_id=xxxxxxxx@N00&sort=date-posted-desc&tags=square&per_page=100

特定ユーザー（わたし）のデータを取得結果

写真を表示する

取得した値を使って、画像のURLと、Flickr URLを作って、append しました。
上のソースの★のところに任意の処理を書けば表示されます。

function _getFlickrPhotos(data){
    var dataStat = data.stat;
    var dataTotal = data.photos.total;
    if(dataStat == 'ok'){
            // success ★
        $('#FlickrPhotos').append('<ul></ul>');
        $.each(data.photos.photo, function(i, item){
            var itemFarm = item.farm;
            var itemServer = item.server;
            var itemID = item.id;
            var itemSecret = item.secret;
            var itemTitle = item.title;
            var itemLink = 'http://www.flickr.com/photos/cbn_akey/' + itemID + '/'
            var itemPath = 'http://farm' + itemFarm + '.static.flickr.com/' + itemServer + '/' + itemID + '_' + itemSecret + '_m.jpg'
            var flickrSrc = '<img src="' + itemPath + '" alt="' + itemTitle + '" width="200" height="200">';
            var htmlSrc = '<li><a href="' + itemLink + '" target="_blank">' + flickrSrc + '</a></li>'
            $('#FlickrPhotos ul').append(htmlSrc);
        });
    }else{
        // fail の場合の処理
    }

めんどくさがって、instagr.am から Flickr に同時投稿したときに付与される square タグのついた写真だけを検索して、Small サイズの画像をそのまま 200px × 200px にして表示しています。