アシアルの中の人が技術と思いのたけをつづるブログ

Flex2でFlickrの写真を取得してみる

タグ [　 Tech　 ]
こんにちは、熊谷です。

最近私の中で流行っているというか勉強したいと思っているものがあります。それはFlex。なぜか最近無性にそれを使ってみたくなりまして、勉強がてら時間の空いたときに触っています。

まだ勉強し始めたばかりなので、なかなか思い通りにさくっと作れるまでには至っていないのですが、ググったりしながらようやくFlickr APIを使って写真を表示すると言うところまでは理解できるようになりました。

では早速。今回はFlex2からFlickr APIを使うためにas3flickrlibを使いました。このライブラリを使うにはas3corelibも必要なのでそれも準備します。で、それらライブラリ（flickr.swc、corelib.swc）をビルドパスに含めてビルドすることにより使えるようになります。

それでもって、以下ソースコードになります。

flickr.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" horizontalAlign="center" verticalAlign="middle">
  3.  
  4. <mx:Script source="flickr.as"></mx:Script>
  5.  
  6. <mx:Label x="10" y="11" text="Flexサンプル" fontWeight="bold" fontSize="15"/>
  7. <mx:Panel layout="absolute" top="43" id="flickr" title="Flickr"   right="10" bottom="10" left="10">
  8.   <mx:TileList id="tile" dataProvider="{photos}" top="10" left="20" right="20" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="none" bottom="54">
  9.     <mx:itemRenderer>
  10.       <mx:Component>
  11.         <mx:VBox width="138" height="108"  horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalAlign="center" verticalAlign="middle">
  12.           <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" />
  13.           <mx:Label id="title" text="{data.title}" />
  14.         </mx:VBox>
  15.       </mx:Component>
  16.     </mx:itemRenderer>
  17.   </mx:TileList>
  18.   <mx:ControlBar x="19" y="473" verticalAlign="middle" horizontalAlign="right">
  19.     <mx:ComboBox id="combo_limit" height="22">
  20.       <mx:dataProvider>
  21.         <mx:Array>
  22.           <mx:Object label="10件" data="10" />
  23.           <mx:Object label="20件" data="20" />
  24.           <mx:Object label="30件" data="30" />
  25.         </mx:Array>
  26.       </mx:dataProvider>
  27.     </mx:ComboBox>
  28.     <mx:Button label="最近の写真" id="btn_1"/>
  29.     <mx:Button label="flowerタグで探す" id="btn_2"/>
  30.   </mx:ControlBar>
  31. </mx:Panel>
  32. </mx:Application>

flickr.as
  1. import mx.collections.ArrayCollection;
  2. import com.adobe.webapis.flickr.*;
  3. import com.adobe.webapis.flickr.events.*;
  4. //import org.osflash.thunderbolt.Logger;
  5.  
  6. private var API_KEY:String = 'ここにFlickrのAPI KEYを記述';
  7.  
  8. private var max_result:Number;
  9. private var flickr_service:FlickrService;
  10.  
  11. [Bindable] public var photos:ArrayCollection;
  12.  
  13. private function init():void
  14. {
  15.   max_result = Number(combo_limit.value.toString());
  16.   flickr_service = new FlickrService(API_KEY);
  17.   flickr_service.addEventListener(FlickrResultEvent.PHOTOS_GET_RECENT, onPhotosResult);  
  18.   flickr_service.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, onPhotosResult);
  19.   
  20.   btn_1.addEventListener(MouseEvent.CLICK, onClickBtn1);  
  21.   btn_2.addEventListener(MouseEvent.CLICK, onClickBtn2);    
  22. }
  23.  
  24. private function onClickBtn1(e:MouseEvent):void
  25. {
  26.   max_result = Number(combo_limit.value.toString());
  27.   flickr_service.photos.getRecent('', max_result, 1);
  28. }
  29.  
  30. private function onClickBtn2(e:MouseEvent):void
  31. {
  32.   max_result = Number(combo_limit.value.toString());
  33.   flickr_service.photos.search('', 'flower', 'any', '', null, null, null, null, -1, '', max_result, 1, 'date-posted-desc');
  34. }
  35.  
  36. private function onPhotosResult(e:FlickrResultEvent):void
  37. {
  38.   //Logger.debug('debug', '結果は？');
  39.   if (e.success) {
  40.     var photo_list:PagedPhotoList
  41.     photo_list = e.data.photos;
  42.     photos = new ArrayCollection(photo_list.photos);
  43.     //Logger.debug('debug', '取得できました');
  44.   } else {
  45.     //Logger.error('error', '取得できませんでした');
  46.   }
  47. }

で、実行すると以下のような感じになります。









サンプルやドキュメントを見ても初めのうちは処理の流れがわからなかったのですが、ようはaddEventListenerを使って最近の写真（getRecent）や検索（search）のイベントを登録して、それらが実行されたときの処理（取得された画像を表示する）を記述する、ボタンを押したら最近の写真（getRecent）や検索（search）を実行する。ということなんですね！

以上のように、私なりの解釈でようやく意味が理解できてきた今日この頃、次はAPIを使って認証してなんだかんだと言うことを勉強してみたいと思います。

ちなみに、FlexといかActionScriptのデバッグのやり方がわからないというか難しいというか面倒というか、そんな今日この頃、ThunderBoltというFirebugでFlexやActionScriptのデバッグができるものがあるということを知りました。

早速使ってみたのですが、Logger.debugでFirebugのコンソールに表示できたりして私的にこれは便利！勉強がさらにはかどります！

コメント

    • こんにちは

      紹介記事を実際に作ってみようと思ったのですが、ちょっとてこずっております。。

      flickr.swc、corelib.swcともに入れてからビルドしたのですが、
      型が見つからないか、コンパイル時定数ではありません：FlickerResultEvent
      とエラー吐き出されてしまいます。。

      ライブラリを追加して利用するのは初めてなもので。。何か理由をご存知でしたらおしえてください
    • by せい | 2008年10月12日 15:07
    • こんにちは、せいさん。

      返信が遅くなり申し訳ありません。この記事を書いた当時はflex builderを使用してコンパイルを行っていました。で、せいさんからのこのコメントをいただきまして、コマンドラインからコンパイルをしてみました。

      flickr.swc、corelib.swcともにクラスパス等々に設定すれば大丈夫だと思うのですが、一番ってとりばやい方法としては、私の記事で書かれているソースファイルと同じディレクトリにflickr.swc、corelib.swcをおいて、

      mxmlc -compiler.include-libraries=flickr.swc,corelib.swc flickr.mxml

      というような感じでコマンドラインでコンパイルすればコンパイルできると思います。試してみてください。
    • by 熊谷 | 2008年10月17日 11:32
    • お返事ありがとうございます。

      つい先日なんとか動かすことができました。
      わざわざお返事いただきありがとうございます^^

      またちょくちょく覗かせていただきます。
      ではでは
    • by せい | 2008年10月18日 01:15
    • こんにちは

      質問があります。
      紹介してあるプログラムをAIRで動かそうとしたのですが動きません。
      何かほかに必要な処理があるのでしょうか？？

      よろしくお願いします。
    • by teck | 2008年10月20日 19:11
    • あぁ、なるほど。
      自己解決です。

      失礼しました。
    • by teck | 2008年10月20日 19:14

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事