すぐに忘れてしまうので、ソースをメモ
実際のデモ
以下の画像は実際に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);
}
}
弊社が運営するエコ生活でも使ってます。