Flex2でFlickrの写真を取得してみる
こんにちは、熊谷です。
最近私の中で流行っているというか勉強したいと思っているものがあります。それはFlex。なぜか最近無性にそれを使ってみたくなりまして、勉強がてら時間の空いたときに触っています。
まだ勉強し始めたばかりなので、なかなか思い 通りにさくっと作れるまでには至っていないのですが、ググったりしながらようやくFlickr APIを使って写真を表示すると言うところまでは理解できるようになりました。
では早速。今回はFlex2からFlickr APIを使うためにas3flickrlibを使いました。このライブラリを使うにはas3corelibも必要なのでそれも準備します。で、それらライブラリ（flickr.swc、corelib.swc）をビルドパスに含めてビルドすることにより使えるようになります。
それでもって、以下ソースコードになります。
flickr.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" horizontalAlign="center" verticalAlign="middle">
<mx:Script source="flickr.as"></mx:Script>
<mx:Label x="10" y="11" text="Flexサンプル" fontWeight="bold" fontSize="15"/>
<mx:Panel layout="absolute" top="43" id="flickr" title="Flickr" right="10" bottom="10" left="10">
<mx:TileList id="tile" dataProvider="{photos}" top="10" left="20" right="20" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="none" bottom="54">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="138" height="108" horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalAlign="center" verticalAlign="middle">
<mx:Image id="photo" width="100" height="88" source="http://static.flickr.com/{data.server}/{data.id}_{data.secret}_t.jpg" verticalAlign="middle" horizontalAlign="center" />
<mx:Label id="title" text="{data.title}" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<mx:ControlBar x="19" y="473" verticalAlign="middle" horizontalAlign="right">
<mx:ComboBox id="combo_limit" height="22">
<mx:dataProvider>
<mx:Array>
<mx:Object label="10件" data="10" />
<mx:Object label="20件" data="20" />
<mx:Object label="30件" data="30" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<mx:Button label="最近の写真" id="btn_1"/>
<mx:Button label="flowerタグで探す" id="btn_2"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
flickr.as
import mx.collections.ArrayCollection;
import com.adobe.webapis.flickr.*;
import com.adobe.webapis.flickr.events.*;
//import org.osflash.thunderbolt.Logger;
private var API_KEY:String = 'ここにFlickrのAPI KEYを記述';
private var max_result:Number;
private var flickr_service:FlickrService;
[Bindable] public var photos:ArrayCollection;
private function init():void
{
max_result = Number(combo_limit.value.toString());
flickr_service = new FlickrService(API_KEY);
flickr_service.addEventListener(FlickrResultEvent.PHOTOS_GET_RECENT, onPhotosResult);
flickr_service.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, onPhotosResult);
btn_1.addEventListener(MouseEvent.CLICK, onClickBtn1);
btn_2.addEventListener(MouseEvent.CLICK, onClickBtn2);
}
private function onClickBtn1(e:MouseEvent):void
{
max_result = Number(combo_limit.value.toString());
flickr_service.photos.getRecent('', max_result, 1);
}
private function onClickBtn2(e:MouseEvent):void
{
max_result = Number(combo_limit.value.toString());
flickr_service.photos.search('', 'flower', 'any', '', null, null, null, null, -1, '', max_result, 1, 'date-posted-desc');
}
private function onPhotosResult(e:FlickrResultEvent):void
{
//Logger.debug('debug', '結果は？');
if (e.success) {
var photo_list:PagedPhotoList
photo_list = e.data.photos;
photos = new ArrayCollection(photo_list.photos);
//Logger.debug('debug', '取得できました');
} else {
//Logger.error('error', '取得できませんでした');
}
}
で、実行すると以下のような感じになります。
サンプルやドキュメントを見ても初めのうちは処理の流れがわからなかったのですが、ようはaddEventListenerを使って最近の写真（getRecent）や検索（search）のイベントを登録して、それらが実行されたときの処理（取得された画像を表示する）を記述する、ボタンを押したら最近の写真（getRecent）や検索（search）を実行する。ということなんですね！
以上のように、私なりの解釈でようやく意味が理解できてきた今日この頃、次はAPIを使って認証してなんだかんだと言うことを勉強してみたいと思います。
ちなみに、FlexといかActionScriptのデバッグのやり方がわからないというか難しいというか面倒というか、そんな今日この頃、ThunderBoltというFirebugでFlexやActionScriptのデバッグができるものがあるということを知りました。
早速使ってみたのですが、Logger.debugでFirebugのコンソールに表示できたりして私的にこれは便利！勉強がさらにはかどります！
