Flickr APIを試してみた

Flickrから画像をFlashに取得する流れを調べてみた。
こちらのブログエントリ「FlickrViewer：as3flickrlibを使ってFlickrから画像を読み込む方法 - プログラミングとかそんなの」が非常に参考になりました。（このエントリでfarm周りのソース修正を行っていますが、現在(2008-09-22)公開されているas3flickrlibでは修正する必要はありません。）

Flickr API Keyを取得する

Flickr APIを使用するには、Flickr API Keyが必要なのでそれを取得します。
まず、Flickrにログインし、[Explore]メニュー内にある[Flickr Services]を選びます。このページにある[Apply for a new API Key]をクリックします。

クリックして出てきたページで、必要な項目に入力し、下のチェックボックス（使用許諾）にチェックを入れ、[APPLY]をクリックします。
これでAPI Keyが発行されますので、メモしておきます。

AS3ライブラリの準備

ActionScript 3.0を使って取得したいと思います。
AdobeがFlickr APIのアクセスに便利なライブラリを公開しているのでそれを使いたいと思います。
以下の二つのライブラリをsubversion リポジトリからチェックアウトします。

as3corelib
- http://as3corelib.googlecode.com/svn/trunk/
as3flickrlib
- http://as3flickrlib.googlecode.com/svn/trunk/

チェックアウトしたら、Flash上からクラスパスの設定を行います。
クラスパスは以下のような感じになりますので、「パブリッシュ設定」パネルの[Flash]タブのActionScriptのバージョン[設定...]を押して出てくるウィンドウ内で設定を行います。

C:\libs\as3corelib\src
C:\libs\as3flicrlib\src

Subversionって？

Subversion リポジトリからのチェックアウトする流れを分からない方のために、ちょっとメモを書いておきます。
Windowsユーザであれば、TortoiseSVNというSubversionクライアントアプリをダウンロードすることを薦めます。

Downloads · TortoiseSVN

TortoiseSVNをインストールした状態で、C:\libs以下に、as3corelibをチェックアウトする様子をキャプチャしてアップしてみました。

http://screencast.com/t/KaupUIOp

分からない方は参考にしてみてください。

Flaファイルを作成

適当な大きさのFlaファイルを作成し、テキストエリアを作成します。
そのテキストエリアのインスタンス名をmDebugTextとし、複数行表示にし、「テキストをHTMLとしてレンダリング」ボタンをチェックします。

ドキュメントクラスを[TestRoot]とし、TestRoot.asをflaファイルと同じディレクトリに作成します。
そのTestRoot.asに以下のスクリプトを記入します。

package {
  import com.adobe.webapis.flickr.FlickrService;
  import com.adobe.webapis.flickr.Photo;
  import com.adobe.webapis.flickr.PagedPhotoList;
  import com.adobe.webapis.flickr.methodgroups.Photos;
  import com.adobe.webapis.flickr.events.FlickrResultEvent;
  import flash.display.Sprite;
  import flash.text.TextField;
  
  public class StudyFlash001Root extends Sprite { 
    private var mFlickrService:FlickrService  = null;
    
    //------------------------------------------------------------
    /**
     * コンストラクタ.
     */
    //------------------------------------------------------------
    public function StudyFlash001Root()
    {
      debugPrint( "-- Flickr API Demo --\n" );
      mFlickrService  = new FlickrService( "[API KEY]" );
      mFlickrService.addEventListener( FlickrResultEvent.PHOTOS_SEARCH, flickrEventHandler );
      mFlickrService.photos.search( "", "", "", "children" );
      
    }
    
    //------------------------------------------------------------
    /**
     * デバッグ用文字列の出力.
     */
    //------------------------------------------------------------
    public function debugPrint( text:String ) :void
    {
      mDebugText.appendText( " " + text + " " );
    }
    
    //------------------------------------------------------------
    /**
     * Flickr　API用イベントハンドラ.
     */
    //------------------------------------------------------------
    private function flickrEventHandler( event:FlickrResultEvent ) :void
    {
      if ( event.success == false ) {
        // エラーが発生したときの処理.
        debugPrint( "[!] Flickr Event Error: " + event );
        return;
      }
      
      // APIアクセスで成功したときにイベントタイプによって処理分岐.
      switch( event.type ) {
      case FlickrResultEvent.PHOTOS_SEARCH:
        var tempHtml:String  = "";
        
        // Photoインスタンスの配列.
        var photos:Array  = PagedPhotoList( event.data['photos'] ).photos;
        for ( var i:int = 0; i < photos.length; i++ ) {
          var curPhoto:Photo  = photos[i];
          tempHtml  += '<a href="http://farm' + curPhoto.farmId + ".static.flickr.com/" + 
                  curPhoto.server + "/" + curPhoto.id + "_" + curPhoto.secret +
                  '.jpg" target="_blank">image[' + i + ']</a> ';
        }
        mDebugText.htmlText  = tempHtml;
        break;
      }
    }
    
  }
}

これをパブリッシュすると、キーワード"children"で検索された結果のトップ100のリストが表示され、文字をクリックすると、別ウィンドウにその画像が表示されます。
swfの表示サンプルをこちらに置いておきますので、参考にしてください。