SINAPの柿内です。

この連載では写真共有サイトFlickrのAPIを使い、FlickrとFlashを連携させて、FlashへFlickrの画像を読み込んだり、Flashから写真をアップする様なアプリケーションを作る方法をご紹介ています。

前回はFlickr APIへブラウザを使って接続してみました。今回は実際にFlashから接続して、写真をFlashに取り込んでみましょう。

テスト用のFLAファイルの作成
今回はAdobe Flashを使ってオーサリングしていきます。まずは何もオブジェクトを持たないファイルを作り、その中に写真読み込み用の空のムービークリップを作成します。空のムービークリップのインスタンス名を"PhotoCont"としてください。PhotoContに写真を１枚読み込みます。

写真の一覧を取得
前回はブラウザから自分のIDで公開されている写真の一覧を取得しました。
公開している写真を検索するメソッドは

flickr.photos.search

です。このメソッドのオプションでユーザーIDを指定する事ができますので、自分のユーザーIDを指定します。リクエストのパラメーターをまとめると次のようになります。

このリクエストに対するFlickrからのレスポンスは下記のようなXMLになります。

<rsp stat="ok">
<photos page="1" pages="1" perpage="100" total="2">
<photo id="3662624132" owner="39846669@N02" secret="4f51488d1e" server="3385" farm="4" title="ポスター" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="3662622568" owner="39846669@N02" secret="82df43f234" server="2470" farm="3" title="チョコ" ispublic="1" isfriend="0" isfamily="0"/>
</photos>
</rsp>

ではFlashからそのXMLを読み込んでみましょう

import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.events.Event;
import flash.events.IOErrorEvent;

//NSID、api_keyを格納
var user_id:String = "12345678@N00";
var api_key:String = "1234f56cdal";

//返り値のXMLを格納するXMLオブジェクトを生成
var myXML:XML;

//リクエスト用のURLを生成します
var url:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + api_key + "&user_id=" + user_id +"&privacy_filter=1";
var myURLReq:URLRequest = new URLRequest(url);

//リクエスト発行します
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.dataFormat = URLLoaderDataFormat.TEXT;
myXMLLoader.addEventListener(Event.COMPLETE,setPhotoXML);
myXMLLoader.addEventListener(IOErrorEvent.IO_ERROR,isError);
myXMLLoader.load(myURLReq);

function setPhotoXML(e:Event):void{
	//読み込んだ後の処理を記述
	myXML = new XML(myXMLLoader.data);
}

function isError(e:IOErrorEvent):void{
	trace("failed to Load photos info");
}

上記のコードで正常に写真の一覧を読み込めれば、"setPhotoXML"が実行され
myXMLに写真の一覧情報がxmlとして代入されます。

写真をロードする
さて読み込んだflickrから写真一覧を読み込むことは成功しましたが、取得できたのは写真の属性情報であり、写真本体のデータではありません。
写真本体のダータを外部から読み込む為のURLがflickrでは用意されています。
これは写真の一覧情報には含まれないので、写真の情報から自分で生成する必要があります。

下記がそのフォーマットです。

たとえば1番目の写真の小さいサイズのURLは
http://farm4.static.flickr.com/3385/3662624132_4f51488d1e_m.jpg
となります。

あとは生成したURLの写真をFlashに読み込み終了です。

それでは１番目の写真を読み込む処理を記述したソースを記述します

import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.display.Loader;
import flash.display.LoaderInfo;

//NSID、api_keyを格納
var user_id:String = "12345678@N00";
var api_key:String = "1234f56cdal"

//返り値のXMLを格納するXMLオブジェクトを生成
var myXML:XML;

//写真を読み込む為のLoaderを生成
var myLoader:Loader;

//リクエスト用のURLを生成します
var url:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + api_key + "&user_id=" + user_id +"&privacy_filter=1";
var myURLReq:URLRequest = new URLRequest(url);

//リクエスト発行します
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.dataFormat = URLLoaderDataFormat.TEXT;
myXMLLoader.addEventListener(Event.COMPLETE,setPhotoXML);
myXMLLoader.addEventListener(IOErrorEvent.IO_ERROR,isError);
myXMLLoader.load(myURLReq); 

function setPhotoXML(e:Event):void{
//読み込んだ後の処理を記述
myXML = new XML(myXMLLoader.data);

var photo_id:String = myXML.photos.photo[0].@id;
var farm_id:String = myXML.photos.photo[0].@farm;
var server_id:String = myXML.photos.photo[0].@server;
var secret:String = myXML.photos.photo[0].@secret;
var size:String = "m"

var photoURL:String = "http://farm" + farm_id + ".static.flickr.com/" + server_id + "/" + photo_id + "_" + secret + "_" + size +".jpg"

var photoURLreq:URLRequest = new URLRequest(photoURL);

myLoader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,setImage);
myLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,isError);
myLoader.load(photoURLreq);
}

function setImage(e:Event){
var myCont:MovieClip = this.PhotoCont;

var myImage:Bitmap = e.target.content;
myCont.addChild(myImage);

//ステージの中心に表示させましょう
myCont.x = (this.stage.stageWidth - myCont.width)/2;
myCont.y = (this.stage.stageHeight - myCont.height)/2;

}

function isError(e:IOErrorEvent):void{
trace("failed to Load photos info");
}

どうでしたか、ステージに写真が表示されましたか？
いままで、写真をデータベースに保存しFlashで表示させるには、どうしてもサーバーサイドのプログラミングが必須でした。しかしFlickr APIを利用すればこれがFlashの開発だけでできてしましいます。

次回はFlickrを使った簡単なスライドショーを作成していきます。

→今回のFlaファイルです。
ダウンロードして制作の参考にしてください。