Flickr の JSON フィードで自作ブログパーツ

Flickr の JSON フィードで自作ブログパーツ

2008/06/15 10:09am

写真を撮るのが好きじゃない。

カメラは荷物になるし、壊れやすいから気をつかう。いざ撮影になると、バッグから取り出して、電源ボタンを押す、レンズを向ける、ピントを合わせて、と面倒だ。衆人環視の中、うんうん唸りながらシャッターを切るのも粋じゃない。

では、何が楽しくて写真を撮るのかといえば、補正が楽しい。Photoshop Elements の自動補正がよく出来ていて、何も考えずにボタンを押していくだけで、それなりの見栄えになってくれる。これは楽しい（ただし、たまに自力で補正に挑戦しても、自動補正の方がキレイで気分が悪い）。

そのうち、出来上がった写真を他人に見せびらかしたくなるのが自然の流れ。写真を Flickr にアップロードするようになった。さらに、このブログをリニューアルするさいには、Flickr にアップロードした写真を表示するブログパーツを追加するつもりだった。

公式のブログパーツは Flickr Badge という名前で Flash 版と HTML 版が用意されている。しかし、いくつかの理由により、どちらも使う気になれなかった。幸い、Flickr ではさまざまなフィードが提供されている。これらを利用すれば、自作のブログパーツをつくるのは難しくない。

公式ブログパーツの不満点

提供されているもので満足なら自作する必要はない。公式ブログパーツの不満点も挙げておこう。

まずは、Flash 版だが、

という不満がある。

一方、HTML 版はというと、サムネイルの大きさは選択可能、レイアウトも CSS で設定できるので自由度も高い。ただし、ブログパーツを挿入するための JavaScript が好みじゃない（以下、一部整形済み）。

var b_txt = '';

b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image1"><a href="http://www.flickr.com/photos/ishikawa_takanori/2555186680/"><img src="http://farm4.static.flickr.com/3006/2555186680_7c18b8cc1a_s.jpg" alt="A photo on Flickr" title="BUFFET STYLE" height="75" width="75"></a></div>';

b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image2"><a href="http://www.flickr.com/photos/ishikawa_takanori/2555186616/"><img src="http://farm4.static.flickr.com/3140/2555186616_823d69311e_s.jpg" alt="A photo on Flickr" title="spaghetti with Genova style basil sauce" height="75" width="75"></a></div>';

b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image3"><a href="http://www.flickr.com/photos/ishikawa_takanori/2553633584/"><img src="http://farm4.static.flickr.com/3274/2553633584_0e3633ebe6_s.jpg" alt="A photo on Flickr" title="The Technorati Monster escaped again." height="75" width="75"></a></div>';

document.write(b_txt)

ごらんのとおり、古典的な document.write のブログパーツである。最速インターフェース研究会 :: ページレンダリングを妨げない広告挿入手法に関する覚書でも説明されているように、この手法だとページの表示を妨げる可能性がある。ブログパーツはあくまでオマケ。ページの表示が遅れるのは嬉しくない。

今回自作するブログパーツでは、ページの読み込み後にブログパーツの表示を行うことで、この問題による影響を軽減している。

Flickr の JSON フィード

Flickr ではさまざまなフィードが提供されているが、ありがたいことに JSONP (JSON with Padding) 形式のフィードも提供されている。

JSONP については以下の記事に詳しい（最初の記事は MochiKit の作者による解説。これが初出っぽい）。

まずは、実例をみるのがいいだろう。

たとえば、http://api.flickr.com/services/feeds/photos_public.gne?id=23956121%40N00&tags=green&format=json を開くと、次のような JavaScript が返ってくる。

jsonFlickrFeed({
    "title": "Uploads from Takanori Ishikawa, tagged green",
    "link": "http://www.flickr.com/photos/ishikawa_takanori/tags/green/",
    "description": "",
    "modified": "2008-05-24T07:39:52Z",
    "generator": "http://www.flickr.com/",
    "items": [
     {
      "title": "Shadow Game",
      "link": "http://www.flickr.com/photos/ishikawa_takanori/2517368623/",
      "media": {"m":"http://farm3.static.flickr.com/2141/2517368623_9c15a8e38dv"},
      "date_taken": "2008-05-04T15:15:36-08:00",
      "description": "...",
      "published": "2008-05-24T07:39:52Z",
      "author": "nobody@flickr.com (Takanori Ishikawa)",
      "author_id": "23956121@N00",
      "tags": "green nara horyuji"
     },
...
        ]
})

返ってくるのが JavaScript というのがミソで、つまり、次のような使い方ができる。

  1. 上記 URL を <script> タグに指定し、JavaScript を読み込む
  2. 読み込みが完了すると、jsonFlickrFeed 関数が呼ばれる
  3. そのときの引数は写真のデータを格納した連想配列

このとき渡される引数の詳細については JSON Response Format を参考にしてほしい（参照先にも書かれているように、呼び出される関数の名前を指定することも可能だ）。

では、実際に Flickr JSON フィードを使って、写真を表示してみよう。

この即席ブログパーツの jsonFlickrFeed 関数は以下のようになっている。

function jsonFlickrFeed(json) {
  var div = document.getElementById("flickr-json-api-example-001");
  var items = json.items.slice(0, 6);

  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    var a = document.createElement("a");
    var img = document.createElement("img");
    var media = item.media.m.replace(/_m.(jpe?g)$/, "_t.$1"); // (1)

    img.setAttribute("src", media);
    a.setAttribute("href", item.link);
    a.setAttribute("title", item.title);

    a.appendChild(img);
    div.appendChild(a);
  }
}

特に問題はないと思う。引数で渡される連想配列には items という名前で各写真のデータが入っている。それをループで回して img 要素を作成している。

説明がいるとすれば、写真の URL を正規表現でいじっている部分だろうか（コメントで (1) と書いた行）。Flickr の写真にはいくかのサイズがあって、それぞれに URL の形式が決まっている。このへんの写真 URL の形式については Photo Source URLs が詳しい。

あとは、script 要素で JSON フィードの URL を指定する。

<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=23956121%40N00&amp;tags=popular&amp;jsoncallback=flickrJsonAPIExample001&amp;format=json" type="text/javascript" charset="utf-8"></script>

また、この script 要素を置く場所を </body> タグの直前にしておけば、JavaScript の読み込みがはじまったときには他の部分が表示されているので、ページの表示の妨げになりにくい。

JSON フィードの手軽さ

Flickr が JSON フィードを利用すれば、写真を表示するブログパーツが簡単に自作できることが分かった。

JavaScript と親和性が高いのみならず、ただの外部スクリプト読み込みなので、XMLHttpRequest につきもののクロスドメイン制限がないのもありがたい。

最後に、参考リンクをまとめておく。