「新館」の方で、Flickrと絡めて何かやりたいと思い、その手始めでFlickrから写真のリストを取得する方法を研究しました。研究と言いましても、Flickrには便利なAPIセットがありますし、それを使うための情報もいろいろ公開されていますので、取得自体は楽でした。
FlickrのAPIを使うには、まずはAPI Keyを取得する必要があります。これは、Flickrから見れば、誰が何をしているのかを把握するためのもので、アプリケーションの名前や目的を書いた上で取得する必要があります。ちょっと面倒なのですが、まずは、Flickrの以下のページに飛んで下さい。
右のピンク色の番号から「(1) Get your API Key」にある「Request an API key」を選びます。移動したページで、非商用利用か、商用利用かを聞かれますので、個人的に何かする、という場合には「APPLY FOR A NON-COMMERCIAL KEY」を選べばよいでしょう。
さらに移動したページで、アプリケーションの名前と、何を作っているのかを聞かれます。また、2つのチェックボックスで、規約等に同意した旨を伝えます。「SUBMIT」を押せば、API Keyが取得できます。
取得したAPI Keyは、忘れずに保管しておきましょう。
「新館」はASP.NETで作成されていますが、この手順はASP.NETページでなくとも使えます。また、jQueryといったJavaScriptライブラリを使うと非常に簡単ですので、この方法を使ってみることにします。
ASP.NETページでは、ScriptManagerProxyコントロールを使って、jQueryのライブラリを読み込むことにしましょう(Pathは適当に変えて下さい)。
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="../js/jquery-1.3.2.min.js" />
</Scripts>
</asp:ScriptManagerProxy>
そして、適当な場所に置いた<script>タグの中に以下のようなJavaScriptコードを書きます。通常は、何かボタンが押された場合のイベントハンドラとか、そんな場所に書くはずです。
var url = 'http://www.flickr.com/services/rest/?jsoncallback=?'; (1)
var params = { (2)
api_key: '28b65234b525030fb000000000000000', (3)
user_id: '463900000000’, (4)
method: 'flickr.photos.search', (5)
min_taken_date: '2010-07-11 00:00:00', (6)
max_taken_date: '2010-07-11 23:59:59', (6)
//Page: '1', (7)
//per_page: '3',
format: 'json'
}
$.getJSON(url, params, function (data) {
var str = 'stat: ' + data.stat + ' code: ' + data.code + ' message: ' + data.message + '\n';
str += 'total: ' + data.photos.total + '\n';
$.each(data.photos.photo, function (i, item) {
var src = 'farm; ' + item.farm + ' server: ' + item.server + ' id: ' + item.id + ' secret: ' + item.secret + ' owner: ' + item.owner + ' title: ' + item.title + '\n';
str += src;
});
$('#results').text(str);
});
(1)はFlickrのAPIを呼び出すためのもので、基本的に固定です。異ドメインへの呼び出しを可能にするために、JSONPによるコールバックを指定しています。
(2)にはAPIのパラメータを指定しています。基本的に、パラメータ名と値をコロンで区切って並べていけばよいのですが、APIの種類によって指定しなければならない、あるいは指定できるパラメータは異なるので、FlickrのAPIガイドをよく読んで使った方がよいでしょう。
(3)は、取得したAPI Keyを指定します。(4)はユーザIDです。このIDを指定することにより、取得対象のユーザを限定できます。たいていの場合は自分自身を指定することが多いです。
(5)は、この呼び出しが検索(search)であることを示しています。ここによって、ほかに指定するパラメータが変化します。
(6)は検索APIのオプションです。この場合は写真の最小撮影日と最大撮影日を指定しています。ここはMySQLの日付フォーマットに従う、とあってしばらくはまりました。要は、時刻まで指定しなければならず、単一の日を指定するには、このように午前0時から23時59分59秒まで、というようにしないとヒットしません。
(7)もオプションですが、指定していません。Pageでは取得するページ、Per_pageではページあたりのデータ数を指定しますが、デフォルトではページあたり100をデータとして返してきます。返されるデータ数が100を越える場合には複数のページにわたって取得する必要があるので、その場合にPageでページを指定するわけです。
ちなみに、一度に返せるデータ数は999までとなっています。
$.getJSON()で呼び出しを実行します。取得できれば、あとは取得できたものをどうしようが勝手なのですが、今回は単純にステータスやデータ数、それぞれのデータを表示させるべく、Textareaに設定する、といったのみにしています。
さて、どのようなデータが返されるのか、ということなのですが、基本的にXMLです。JSONによってラップされていますので、どのような形態で返されるかわかりにくいのですが、この記事を書いている時点ではこんな感じです。
id…写真のID。すべての写真で一意。
owner…写真を投稿したユーザのID。
server…写真が格納されているサーバのID。
farm…サーバの存在するファーム。
secret…id, server, farmから生成されるハッシュのようなもの。
title…写真の表題。
実際に何を返しているのかはXMLを直接覗いた方がわかりやすいので、機会があれば直接見るようなコードを書いてもよいでしょう。
コメント