backyard.weblog

Main Contents

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

/ jQuery, Service, Web / , , , ,

Post

Flickr Photos

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

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

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

Flickr API Key を取得する

The App Garden :: Flickr

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

The App Garden :: Flickr

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

The App Garden :: Flick

アプリケーション名と、何を作っているのか入力して、規約に同意して[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 : 'https://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
    }
}

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

https://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 の場合の処理
    }
画像のサイズは、URLの末尾に応じて違っています。
画像URLの末尾 画像のサイズ
_s.jpg Square[width 75px :: height 75px]
_t.jpg Thumbnail[max 100px]
_m.jpg Small[max 240px]
.jpg Medium[max 500px]
_b.jpg Large[max 1200px]
_o.jpg Original[元画像サイズ]

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

  • Check
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote

Similar Posts

Add Comment

WP-SpamFree by Pole Position Marketing

Comments

From:holidayworking
February 05, 2012 (Sun)

][flickr] / “Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog” http://t.co/q7TiTx7Q

From:wjsnews
February 06, 2012 (Mon)

Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog http://t.co/LDeMv0Dp

From:infoeproduction
February 06, 2012 (Mon)

][flickr] / “Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog” http://t.co/q7TiTx7Q

From:chihiro_kaasan
February 08, 2012 (Wed)

][flickr] / “Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog” http://t.co/i2kw0ESM http://t.co/Xr4Pxnuy

From:infoeproduction
February 08, 2012 (Wed)

][flickr] / “Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog” http://t.co/i2kw0ESM http://t.co/Xr4Pxnuy

From:shotaatago
February 08, 2012 (Wed)

][flickr] / “Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog” http://t.co/i2kw0ESM http://t.co/Xr4Pxnuy

From:crampon
February 08, 2012 (Wed)

][flickr] / “Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog” http://t.co/i2kw0ESM http://t.co/Xr4Pxnuy

From:croe_c
May 10, 2012 (Thu)

@croe_c めも:http://t.co/c7WwXnlI

From:webspacelab
December 03, 2012 (Mon)

“Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog” http://t.co/VbZDOBba

From:javascript
February 24, 2013 (Sun)

Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog: http://t.co/9AJ0NBXKdg

From:Javascript News
February 24, 2013 (Sun)

Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog http://t.co/DwOakKdHcf

From:イープ
February 24, 2013 (Sun)

RT @del_javascript: Flickrの写真をjQueryで取得して表示してみた :: Backyard.weblog http://t.co/DwOakKdHcf

From:miyakawa244
March 18, 2013 (Mon)

マッシュアップ・ラボを参考にしている記事なので使えるかも。

Trackbacks

Trackback URL