すぐに忘れてしまうので、ソースをメモ

実際のデモ

以下の画像は実際にFlickr APIを利用して、natureで検索してヒットした画像を人気順に8件表示するという処理を行っています。
JavaScriptなので、このBloggerでも動きます。

設置方法

以下は、flickr_photosという値のID属性をもつDIV要素内に写真をだーっと並べるだけのサンプルです。

Flickr APIでJSONデータを取得する

JSON Response Formatのページなどを参考にしてJSONを取得する。

以下のソースを適当に設置する

JSONを取得するためのコードより前に記述しておく必要があります。

function jsonFlickrApi( obj ){
  if( obj.stat != 'ok' ){
    return false;
  }

  document.getElementById('flickr_photos').innerHTML = '';
  document.getElementById('flickr_photos').style.textAlign = 'center';
  var p = obj.photos;

  for( var i=0; i<p.photo.length; i++ ){
    var id = p.photo[i].id;
    var owner = p.photo[i].owner;
    var secret = p.photo[i].secret;
    var server = p.photo[i].server;
    var farm = p.photo[i].farm;
    var title = p.photo[i].title;
    var ispublic = p.photo[i].ispublic;
    var isfriend = p.photo[i].isfriend;
    var isfamily = p.photo[i].isfamily;

    var url = 'http://www.flickr.com/photos/'+owner+'/'+id+'/';
    var oimg = 'http://static.flickr.com/'+server+'/'+id+'_'+secret+'.jpg';
    var simg = 'http://static.flickr.com/'+server+'/'+id+'_'+secret+'_s.jpg';

    var img = document.createElement('IMG');
    img.src = simg;

    var link = document.createElement('A');
    link.title = title;
    link.href = url;
    link.insertBefore(img, null);

    document.getElementById('flickr_photos').insertBefore(link, null);
  }
}

弊社が運営するエコ生活でも使ってます。