このブログでは、お出かけした先の写真を公開するのに、Flickrにあるものを使っています。Flickrに写真をアップロードし、アップロードした写真のリンクを個別に取得して、ブログの記事に貼り付けています。これにより、Flickrで一元管理、その写真を方々で活用する、といったことができています。
しかしまぁ、Flickrの写真へのリンクを個別に取っていくのはけっこう面倒な作業で、写真が100枚を超えるようにもなると、ほぼ半日がかりの作業に
なります。これはたまらんなぁ、とさすがに思い始めて（特に、最近インタフェースが変わったのを受けて）、プログラムで一気に取ってしまえ！と思うように
なりました。
一気に取るのなら、プログラムの出番でしょう。幸い、これまでもFlickrのAPIを研究してきて、ASP.NETでWebサービスなどを実装してきた経験がありますので、それを活かせそうです。ということで、さっそくやってみました。
なお、今回の例ではすべてクライアントサイドに実装します。適当なHTMLファイルを作り、必要なフォームを作成し、JavaScriptによるイベントハンドラを書けば、実行できるようにしています。jQueryが必要ですので、適当なタイミングで読み込むscriptタグをどこかに書いておいて下さい。
最低限必要なフォームは、日付を指定するためのテキストボックス、取得実行のためのボタン、結果を格納するためのテキストエリアの3つです。それぞれ、tbDate、btnGet、resultとid属性を付けておきます。
まずは、ボタン（btnGet）が押された際に呼び出されるイベントハンドラをscript要素の中に書いておきます。このイベントハンドラでは、tbDateから値を取り出し、それをFlickr APIが受け付ける形に整形し、Flickr APIのひとつであるflickr.photos.searchを呼び出します。これで、指定撮影日の写真の一覧を取得できます。
$('#btnGet').click(function () {
var min_date = $('#tbDate').val();
min_date = min_date.replace(/\//g, '-');
var max_date = (min_date.split(' '))[0] + ' 23:59:59';
var url = 'http://www.flickr.com/services/rest/?jsoncallback=?';
var params = {
api_key: '28b65234b52503000000000000000000',
user_id: '46390000@N00',
min_taken_date: min_date,
max_taken_date: max_date,
method: 'flickr.photos.search',
per_page: '999',
format: 'json'
}
$.getJSON(url, params, function (data) {
………
});
});
Flickr APIでは、日付を「YYYY-MM-DD HH:MM:SS」の形式でしか受け付けませんので、最初に整形処理を簡単に入れています。スラッシュで日付を区切っても大丈夫です（実はこれはASP.NETでCalendarコントロールを使って日付を取得した場合に対応するために入れました）。
パラメータapi_keyとuser_idはご自分のを入れて下さい。また、パラメータのper_pageにて最大取得数を仕様上最大の999としています。これだけあれば十分でしょう。
$.getJSONメソッドにて、取得結果がdataに返ります。このdataを処理する関数を定義すればよいのですが、今回は呼び出しの成否や、取得した写真の数などをまずresultに入れるようにしてあります。続けて、dataについて$.eachメソッドで繰り返し処理をします。
var html;
html += 'date: ' + (min_date.split(' '))[0] + '\n';
html += 'stat: ' + data.stat + ' code: ' + data.code + ' message: ' + data.message + '\n';
html += 'total: ' + data.photos.total + '\n';
$('#results').text(html);
$.each(data.photos.photo, function (i, item) {
………
});
繰り返し処理の中身ですが、これは実際に取得したい項目の内容によって変えていきます。写真のid, secret, owner, server, farm, titleのみでOKであれば、itemからそれらを取り出し、適当なHTMLへの整形処理を入れてやればOKです。
var html;
html += '<a ';
html += 'href="http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b_d.jpg" ';
html += 'title="' + data.title + '">';
html += '<img src=';
html += '"http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg" ';
html += 'alt="' + data.title + '" ';
html += '></a>' + '\n';
$('#results').text(html+$('#results').text());
a要素の参照先はBサイズの画像、img要素にはMサイズの画像をそれぞれ指定していますので、このへんは適当に書き換えます。
汎用性を高めて、繰り返しの中でさらにFlickr APIを呼ぶという場合、以下のようにします。この例では、flickr.photos.getInfoを呼んで写真の各種情報を一括取得できるようにしています。ただし利用しているのは、title要素のみです。
var params2 = {
api_key: '28b65234b52503000000000000000000',
user_id: '46390000@N00',
method: 'flickr.photos.getInfo',
photo_id: item.id,
secret: item.secret,
format: 'json'
}
i = i + 1;
$.getJSON(url, params2, function (data2) {
var html;
html += '<a ';
html += 'href="http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b_d.jpg" ';
html += 'title="' + data2.photo.title._content + '">';
html += '<img src=';
html += '"http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg" ';
html += 'alt="' + data2.photo.title._content + '" ';
html += '></a>' + '\n';
$('#results').text(html+$('#results').text());
});
titleについて、flickr.photos.searchで取得する場合と扱いが違います。flickr.photos.searchではtitleという属性で返ってきますので、data.titleという感じで取得できますが、flickr.photos.getInfoではtitleという要素で返ってきますので、data2.photo.title._contentとやや回りくどい取得になっています。しかし、他の要素も同様に取得できますので、flickr.photos.getInfoを研究してどのような情報が取れるか調べてみて下さい（タグやセットなど、かなり広範囲の情報をとれます）。
こんな感じで整形したHTMLが取得できますので、あとはブログ記事に貼り付ければOKです。形式は、プログラムを書き換えればいかようにもカスタマイズできます（当たり前）。
コメント