外部API(Flickr)を試す!

2008年6月28日(土)
林 豊

FlickrAPIにつなげてみる

 FlickrAPIを使うにはAPIkeyという認証文字列が必要になります。YahooIDがあればログインが可能ですが、Yahoo! JAPANのIDではダメなので注意が必要です。持っていなかったら、「Flickr(http://www.flickr.com/)」の「Create Your Account」でアカウントを取得し、ログインします。

 その後、「Flickr Services(http://www.flickr.com/services/api/)」にアクセスします。ここは英語ですが、FlickrAPIの細かな使い方が載っています。まずは「Your API Keys」に入ってAPIkeyを発行しましょう。

 検索をはじめ、基本はURLにクエスチョンパラメーターでメソッドと引数を設定してアクセスするとXMLの形式でかえってきます。ここでは基本中の基本である画像検索を例に解説していきます。

 基本の文法は「http://api.flickr.com/services/rest/http://api.flickr.com/services/rest/)」に任意の指定をすることで、さまざまな情報のやりとりをします。具体的に指定してみましょう。

 必ず指定しないといけないのは、やりたいことを指定する「method」と各methodに関係する引数です。上記で触れたAPIkeyは各methodの引数には必ず指定しないといけない引数になります。ちなみに、指定する順番は関係ありません。

 まずはAPIkeyとmethodパラメーターを指定していきます。指定方法はAPIkeyは下記のようにイコールでつなぎます。

api_key=[あなたのAPIkey]

 画像検索は「method=flickr.photos.search」です。&を使ってくつけていきます。

http://api.flickr.com/services/rest/?api_key=[あなたのAPIkey]&method=flickr.photos.search

 次に何をもとに検索するかを指定します。今回は「tags」で検索することにします。検索文字列を「dog」だとすると、下記のようになります。

http://api.flickr.com/services/rest/?api_key=[あなたのAPIkey]&method=flickr.photos.search&tags=dog


 ほかにも検索結果のページを指定したりといった絞り込むためのパラメーターも同じように追加していくこともできます。「flickr.photos.search(http://www.flickr.com/services/api/flickr.photos.search.html)」に詳しく載っています。

 ブラウザでこのURLをたたくとXMLで検索結果がかえってきます。ActionScriptの場合はURLLoaderクラスを使ってXMLをロードするイメージになります。

 photosタグのアトリビュートには、下記に文字列で格納されています。

・現在のページ(page)
・総ページ数(pages)
・ページ毎検索結果数(perpage)
・総結果数(total)

 photoタグのアトリビュートには画像の詳細情報がかえってきます。このphotoタグ内の情報をもとに各画像のURLにたどり付けます。

 画像URLの構造は下記になります。

http://farm[farm].static.flickr.com/[server]/[id]_[secret]_[size].jpg

 size以外のパラメーターは検索結果から抽出できます。

 sizeは次の6種類の中から指定します。

・75px x 75pxの画像:s
・1辺は100pxの画像:t
・1辺は240pxの画像:m
・1辺は500pxの画像:「_」から何も入れない
・1辺は1024pxの画像:b
・オリジナル画像:o

 ただし写真により希望サイズの画像が無い場合があります。さらにこの画像の詳細を知る場合は、「method=flickr.people.getInfo」に検索結果からのowner情報をもとに検索をかけなおす必要があります。

FlickrAPIの検索部分の実装

 さて、いよいよ実装していきます。はじめにも書いたとおりcontrollerがサーバ通信系を役割で持つことになってますが、controller内に直接ロジックは書かずに別クラスでロジックを持つことにします。

 ここでは、FlickrConnectクラスを新しく作って、通信モジュールとして機能するように作りました。サンプルはこちらからダウンロード(http://www.thinkit.co.jp/images/article/91/4/9141.zip)できます(9141.zip/526 KB)。

 サンプルではこの部分を切り出してあります。APIkeyは入っていないので入れてパブリッシュしてください。

 FlickrConnectクラスの持つ外からアクセスできるPublicなファンクションは、「search(searchText:String):引数のsearchTextで画像検索」「searchUsers(searchOwnerId:String):引数のsearchOwnerIdで画像の詳細情報を検索」の2つにします。

 それぞれがたたかれると前ページで書いたようなURLを構築し、URLLoaderクラスでロードしXMLとしてデータを保持します。今回は後々での使い回しも考えて、簡単にアクセスしやすい形で1回Array型に成型しています。そして、検索終了後に検索終了イベントを発信して検索終了をお知らせします。

 ここまでをFlickrConnectクラスの役割として定義します。では、このクラスを作りましょう。

 FlickrConnectクラス自身がイベントを発信するためにはEventDispatcherクラスを継承する必要があります。importした後、クラス定義の際にextends~でそのクラスを継承します。

import flash.events.EventDispatcher;
public class FlickrConnect extends EventDispatcher

 メソッドsearch(searchText:String)を実装していきます。searchTextのString情報をFlickrConnectクラスのプロパティで保持します。その後検索URLを作ってロードします(リスト1)。

 ロード終了後はまずXMLとしてデータを保持して簡単に成型した後、画像検索終了イベントを発信します。

 画像検索終了イベント名URL_SET_COMPLETEは、下記のように定義しておきます。

public static const URL_SET_COMPLETE:String = "URL_SET_COMPLETE";

 ロード完了後はXMLデータを取り出して成型後、URL_SET_COMPLETEイベントを発信します(リスト2)。

 同様にsearchUsers(searchOwnerId:String)も作ります。

 controllerはFlickrConnectクラスを使って通信をして、結果をmodelに格納します。modelは格納されたデータをこのコンテンツで使いやすいように再成型します。すべてのデータの整理が終わったらイベントで発信して、view側はそれをリスナーしデータを取得して利用しています。

有限会社ムーニーワークス
有限会社ムーニーワークス 代表取締役。大学卒業後、医療系会社情報企画室にてCD-ROM、Web、ストリーミングなどのマルチメディアコンテンツの制作を担当。その後フリーランスのWebディレクター/デザイナーとして独立し、2001年(有)ムーニーワークス設立。デジタルハリウッドスクール講師、デジタルハリウッド大学院客員教授、明治大学院兼任講師。有限会社ムーニーワークス:http://www.moonyworks.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています