FlickrViewer：as3flickrlibを使ってFlickrから画像を読み込む方法

Flickrを検索して表示するViewerを作ってみました。

画像の取得には、Adobe Labsで作成されたas3flickrlibというライブラリを使っています。

このライブラリは、サンプルコードも付属しておらずあまり解説している記事もみかけないので試しに使ってみました。

また、Flickrへのアクセスはクロスサイトのデータアクセスとなるためcrossdomain.xmlを読み込みが必要となります。その方法についても説明します。

as3flickrlibとは

as3flickrlibは、Adobe Labsで作成されたas3用のFlickr APIラッパーライブラリです。

このライブラリを使うとURLLoaderなどを使って直接APIを呼び出した場合と比べて、データの受け渡しが楽になるなどのメリットがあります。

今回サンプルとして取り上げるのは検索用APIのみです。アップロードAPIに関しては、hatayanさんのこのエントリーが参考になります。

as3flickrlibを使うための準備

as3flickrlibはas3corelibに依存しているため下記URLから先にダウンロードして下さい。

http://code.google.com/p/as3corelib/

次に、as3flickrlibを下記URLからダウンロードして下さい。

http://code.google.com/p/as3flickrlib/

ダウンロードしたZIPファイルを展開し、src/以下のファイルをクラスパスが通っているディレクトリにコピーして下さい。

私が使用したas3flickrlibのバージョンは、0.87なのですが、このバージョンには画像のURL生成に必要なfarm idを取得できないという欠陥があったため下記の修正を行いました。パッチファイルもこちらに用意しましました。

as3flickrlibがfarmを無視している問題を回避するための修正点

src/com/adobe/webapis/flickr/Photo.asに追加

private var _farm:String;
public function get farm():String {
	return _farm;
}
		
public function set farm( value:String ):void {
	_farm = value;
}

farm idを格納するためのメンバ変数とプロパティを追加しました。

src/com/adobe/webapis/flickr/methodgroups/MethodGroupHelper.asの370行目に追加

photo.farm = [email protected]();

検索結果をPhotoオブジェクトに追加している箇所でfarm idも読み込むように修正しました。

as3flickrlibのページをみると既にバグ報告としてあがっているのでそのうち修正されるのではないかと思います。

as3flickrlibを使ってみる

実際にas3flickrlibを使って、キーワードに一致した写真の一覧を取得し画像のURLを生成するところまで紹介します。また、crossdomain.xmlの読み込み方についても説明します。

はじめに、com.adobe.webapis.flickr.FlickrServiceのインスタンスを作成します。このとき引数に渡すAPI KEYはFlickrのアカウントを作成すれば取得することができます。

	this.flickr = new FlickrService(FLICKR_APIKEY);

つぎに先ほど作成したインスタンスにイベントハンドラを登録します。今回はキーワード検索を実行しその結果を取得したいので、PHOTOS_SEARCHイベントのハンドラを登録します。

	this.flickr.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, flickr_onPhotosSearch);

イベントハンドラが受け取るイベントはFlickrResultEvent型で、successプロパティにAPIの呼び出しが成功したかどうかが設定されます。
APIの実行結果は、dataプロパティに設定されます。

private function flickr_onPhotosSearch(event:FlickrResultEvent):void

{

	if ( event.success )

	{

		var photos:Array = PagedPhotoList(event.data['photos']).photos;

		for ( var i:int = 0; i < photos.length; i++ )

		{

			var imageUrl:String = 'http://farm' + photos[i].farm + '.static.flickr.com/' +

				photos[i].server + '/' + photos[i].id + '_' + photos[i].secret + '.jpg';

			var loader:Loader = new Loader();

			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_onComplete);

			loader.load(new URLRequest(imageUrl), new LoaderContext(true));

		}

	}

}

Photos.search()を呼び出した際の実行結果はPagedPhotoListオブジェクトとして返されます。

このオブジェクトはFlickr APIのsearchを呼び出した際の実行結果そのものなのでFlickrAPIを使ったことがある人であればどのような結果が返ってきているかで迷うことはないかと思います。

Flickrのサムネイル画像のURLを生成するには、farm idが必要になります。URLのフォーマットについては寺子屋未満さんのこのエントリーを参考にしました。

Flickrではサムネイル画像が保存されているfarmごとにcrossdomain.xmlが配置されています。そのため、Loaderのload()オブジェクトの第２引数にcheckPolicyFileプロパティをtrueに設定したLoaderContext()を渡します。

LoaderはcheckPolicyFileがtrueになっている場合、crossdomain.xmlを探すようになります。サンプルコードでは、LoaderContext()のコンストラクタの第１引数で設定しました。

最後にFlickr APIを呼び出します。呼び出しは、最初に作成したFlickrServiceオブジェクトのプロパティを通して行います。

	this.flickr.photos.search("", "", "any", keyword);

この呼び出しもFlickr APIのflickr.photos.searchそのものです。ただし、APIKEYはFlickrService生成時に渡したものが使われるため個々のAPI呼び出しでは不要です。

で、使用感はどうだったのか？

API呼び出しの結果を自分で解析しなくて良いことはメリットに感じられました。その点に関しては、写真をアップロードしようと試みた場合に恩恵があるのだろうと思います。

また、Flash で Flickr に写真をアップロードするサンプル（FlashCS3 + Action Script3）によると

※残念ながらwww.flickr.comのサーバーに"crossdomain.xml"がないので(api.flickr.comにはある。)swfをwebにアップした状態からはアップロードの処理がうまく動きませんでした。ローカルで実行してください。

ということなので、このライブラリの利用はAIRアプリにFlickrへのアップロード機能を付けたい場合など使用方法は限定される感じがします。

ソースコードとコンパイル方法

ファイル一式はここからダウンロードして下さい。コンパイルには、flex3 sdkとPapervision3D 2.0とas3corelibとas3flickrlibが必要です。

Papervision3D 2.0はまだアルファリリースなのでsvnから直接ダウンロードするしか入手方法がありません。svnコマンドが使える環境であれば、以下のコマンドで入手出来ます。

$svn co http://papervision3d.googlecode.com/svn/trunk papervision3d

コマンド実行後、branches/GreatWhite/src以下にクラスパスを通して下さい。

また、ソースファイルにはfickrのAPIKEYが含まれていないので各自取得して自分のAPIKEYを入力して下さい。

最後に

今回は、as3flickrlibの説明をメインに書きましたが、Papervision3D 2.0を使ってみた感想を後日レポートしたいと思います。

参考

1. Flash で Flickr に写真をアップロードするサンプル（FlashCS3 + Action Script3）
2. Splash.image.jsを使う。(6) - with FlickrAPI サムネイル画像のURLと検索結果XMLの関係がわかりやすくまとめられています
3. Flickr Services
4. as3corelib
5. as3flickrlib