Marilenaでアイドル(２)

080701.jpg

さてさて。
少し日にちがあいてしまいましたが、前回の続きです。

今日はFlickrから写真を読むところをしてみたいと思います。

参考にさせていただいたサイト

先に参考にさせていただいたサイトを上げておきます。
というのも、これ以上の事はほぼ書いていないからです、、。

[ActionScript3.0] AS3でFlickrAPI を使ってみる(with as3flickrlib) その１[AS3] | moriBlog
FlickrViewer：as3flickrlibを使ってFlickrから画像を読み込む方法 - プログラミングとかそんなの

とりあえず自分のメモのためにもまとめてみます。

概要

Flickrから画像を落としてくる、というか、画像のURLを取得するには、
自力での実装も出来ますが、as3flickrlibというライブラリを使うと便利そうです。

このas3flickrlibを使うには別途、as3corelibというライブラリも必要みたいです。
（これはこれで便利なライブラリみたいです。）

それぞれ、Google Codeからダウンロードして、パスを通しておきます。

それから、FlickrのAPIを使用して画像を使わせてもらうので、Flickrにユーザー登録をして、APIキーをゲットする必要があります。

で、いよいよ、、、といきたいところですが、なんだかこのライブラリ、バグがちょこちょこあるみたいです。

なのでとりあえず、修正しておきます。
下記のリンク先の通り修正しました。ありがたいです。

public var むらけん:Flasher; Flickr api のas3flickrlibのバグ修正。
FlickrViewer：as3flickrlibを使ってFlickrから画像を読み込む方法 - プログラミングとかそんなの

画像を検索する

さて、準備が整ったところで、いよいよ使ってみます。

とりあえず、検索したいワードの画像のURL一覧を取得する、というくらいならすごい簡単でした。
（それ以上のものはわかりませんが、、）

まず、APIキーを渡しつつ、初期設定。

PLAIN TEXT
ACTIONSCRIPT:
  1. var fls :FlickrService = new FlickrService("APIキーを入れて下さい。");
  2. var photo : Photos = new Photo(fls);

Photosは、検索とかするのに使うみたい。
で、検索する単語を与えつつ、イベントを登録。

PLAIN TEXT
ACTIONSCRIPT:
  1. photo.search("", "", "any", "idol", null, null, null, 1, "", 100, 1);
  2. fls.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, searchComplete);

searchに設定する引数は、かなりいっぱいあって、ダウンロードした中にあるドキュメントによれば、

public function search(user_id:String = "", tags:String = "", tag_mode:String = "any", text:String = "", min_upload_date:Date = null, max_upload_date:Date = null, min_taken_date:Date = null, max_taken_date:Date = null, license:Number = -1, extras:String = "", per_page:Number = 100, page:Number = 1, sort:String = "date-posted-desc"):void

こんな感じ。詳しくはここ。
なんか、いっぱいあって何がなんだか、、、だけど、第４引数のtextのところが検索ワードをいれるところなんで、そこだけ入れといたらいいかと。
上の例だと、「idol」で検索した結果の1ページ目の画像情報を100個とってくる、ってこと（だと思う。）

で、その結果がを渡す先がこんな感じ。

PLAIN TEXT
ACTIONSCRIPT:
  1. function searchComplete(e:FlickrResultEvent):void
  2. if(e.success){
  3. //処理
  4. }
  5. }

successプロパティにロードが成功したか返ってくるので、成功した時のみ処理をするように、とかってする。

で、その処理の中で、画像のURLと、その画像があるFlickrのURLを取ってくる。

PLAIN TEXT
ACTIONSCRIPT:
  1. var photoArr : Array = e.data.photos.photos;
  2. for(var i:Number = 0; i<photoArr.length; i++){
  3. farm = photoArr[i].farm;
  4. server = photoArr[i].server;
  5. id = photoArr[i].id;
  6. secret = photoArr[i].secret;
  7. owner = photoArr[i].ownerId;
  8. //画像のURL
  9. trace( 'http://farm' + farm + '.static.flickr.com/' + server + '/' + id + '_' + secret + '.jpg');
  10. //FlickrのURL
  11. trace('http://www.flickr.com/photos/' + owner + '/' + id);
  12. }

各URLがどういう構成になってるかは、FlickrAPIのドキュメントを見ればわかります。
Flickr Service - Photo Source URLs

これを元に、取り出した各要素から、URLを再現しています。

これで、URLはわかったので、あとはそのURLから画像を引っ張ってくるだけ！
なのですが、Flashで別ドメインから画像をひっぱってこようと思うと、クロスドメインってのが必要です。
これは、通常はセキュリティーの問題で他ドメインからはデータを取って来れないようになっているけれど、
このクロスドメインのファイル（crossdomain.xml)が設置してあれば、他ドメインでも大丈夫、ってやつです。
Flash ドキュメンテーション - ドメイン間のデータロード許可

なので、このcrossdomain.xmlを読ませるように指定してやらないといけません。
それがこれ。

PLAIN TEXT
ACTIONSCRIPT:
  1. loader.load(new URLRequest(URL), new LoaderContext(true));

データをロードする時に、Loaderのloadの第二引数に、new LoaderContext(true)と、指定してやるといいみたいです。

まとめ

もうあとは、MarilenaのほうでFlickrからとって来たURLを指定してやるだけなんですが、、
長くなってきましたし、疲れてきたんで今日はここまでで。

最後にまとめたソース。
idolで検索した結果のURLを100個、traceで吐き出すだけです。

PLAIN TEXT
ACTIONSCRIPT:
  1. package  {
  2.     import com.adobe.webapis.flickr.*;
  3.     import com.adobe.webapis.flickr.events.*;
  4.     import com.adobe.webapis.flickr.methodgroups.*;
  5.     import flash.display.*; 
  6.     public class Main extends Sprite
  7.     {
  8.         private var fls           :FlickrService;
  9.         private var photo         :Photos;
  10.         private var _photoURLArr  :Array = [];   
  11.         private var _flickrURLArr :Array = [];     
  12.         //______________________________________________________________       
  13.         //Constructor
  14.         public function Main()
  15.         {           
  16.             //API Key
  17.             fls   = new FlickrService("APIキーを入れるところ");
  18.             photo = new Photos(fls);           
  19.             //idol で検索           
  20.             photo.search("", "", "any", "idol");
  21.             fls.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, searchComplete);     
  22.         }               
  23.         //______________________________________________________________       
  24.         //searchComplete       
  25.         private function searchComplete(event:FlickrResultEvent):void
  26.         {           
  27.             if ( event.success )           
  28.             {               
  29.                 var photoArr : Array = event.data.photos.photos;
  30.                 for (var i:Number = 0; i <photoArr.length; i++)
  31.                 {                 
  32.                     var farm:String = photoArr[i].farm;
  33.                     var server:String = photoArr[i].server; 
  34.                     var id:String = photoArr[i].id;           
  35.                     var secret:String = photoArr[i].secret;         
  36.                     var owner:String = photoArr[i].ownerId;           
  37.                     //画像のURL               
  38.                     trace( 'http://farm' + farm + '.static.flickr.com/' + server + '/' + id + '_' + secret + '.jpg');   
  39.                     //FlickrのURL           
  40.                     trace('http://www.flickr.com/photos/' + owner + '/' + id); 
  41.                 }
  42.             }
  43.         }
  44.     }
  45. }

・Marilenaシリーズ
Marilenaでアイドル(1)
Marilenaでアイドル(3)

About this entry

Published:
6.30.08 / 8pm
Category:
flash
Tags:
« Marilenaでアイドル(1) | Marilenaでアイドル(3) »