サイトアイコン たまプラ通信

Flickrから写真のリストを取得する(jQuery編)

「新館」の方で、Flickrと絡めて何かやりたいと思い、その手始めでFlickrから写真のリストを取得する方法を研究しました。研究と言いましても、Flickrには便利なAPIセットがありますし、それを使うための情報もいろいろ公開されていますので、取得自体は楽でした。

FlickrのAPIを使うには、まずはAPI Keyを取得する必要があります。これは、Flickrから見れば、誰が何をしているのかを把握するためのもので、アプリケーションの名前や目的を書いた上で取得する必要があります。ちょっと面倒なのですが、まずは、Flickrの以下のページに飛んで下さい。

The App Garden on 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を直接覗いた方がわかりやすいので、機会があれば直接見るようなコードを書いてもよいでしょう。

モバイルバージョンを終了