Ssaw08 1021

SSAW08 後期第6回

WebAPIの利用(1)FlickrAPIを利用してみる2008年10月21日

本日の内容

• WebAPIの利用実践編• FlickrのWebAPIを利用してみる

• Flickr：写真の共有サービス

Flickr Web Serviceの概要

• Flickr Services の API の解説ページを見てみる• http://www.flickr.com/services/api/• 膨大な開発者向けAPIが公開されている

http://www.flickr.com/services/

http://www.flickr.com/services/

開発者キーの登録

• FlickrのAPIを利用するには、Flickr API KEYを登録する必要あり• 下記のページより登録する

• http://www.flickr.com/services/api/keys/

WebブラウザでAPIを使用してみる

• Web API をWebブラウザから直接たたいてみる• flickr.photos.search を使ってみる

• キーワードから投稿された写真をサーチするサービス• 下記のURLを入力してみる• http://api.flickr.com/services/rest/?

method=flickr.photos.search&api_key=[登録したAPI KEY]&tags=[検索ワード]

• ブラウザから「ソースを表示」を選択• APIから返送されてきた、XML形式の情報を参照できる


検索ワード "tamabi" で検索した例

<?xml version="1.0" encoding="utf-8" ?><rsp stat="ok"><photos page="1" pages="4" perpage="100" total="360"> <photo id="2878963976" owner="64925044@N00" secret="78ff42e98c" server="3199" farm="4" title="080927_大学院前期審査会" ispublic="1" isfriend="0" isfamily="0" /> <photo id="2878130929" owner="64925044@N00" secret="53680e4271" server="3027" farm="4" title="080927_大学院前期審査会" ispublic="1" isfriend="0" isfamily="0" /> <photo id="2878130717" owner="64925044@N00" secret="b3f9c8d178" server="3232" farm="4" title="080927_大学院前期審査会" ispublic="1" isfriend="0" isfamily="0" /> ...</photos></rsp>


• 取得したXMLの情報から画像を参照するには?• 取得した情報から画像を参照するURLを合成することができる• 下記のように情報を組み合わせることで画像のURLを生成する

• http://farm[farm].static.flickr.com/[server]/[id]_[secret].jpg

• 例) 下記の情報がXMLから取得された場合• farm = 4• server = 3199• id = 2878963976• secret = 78ff42e98c

• 画像のURLは…• http://farm4.static.flickr.com/3199/2878963976_78ff42e98c.jpg

Flickrで検索した画像をFlashに表示する

• Flickr APIを利用して、Flickrでキーワードサーチした結果得られた画像をFlashに表示してみたい

• 大きく分けて4つの処理が必要1. 検索ワードを指定して、Flickr APIの flickr.photos.searchを呼び出す2. APIから返答されるXML形式の情報を解析3. 解析された情報から、画像のURLを生成4. Loaderに画像をロード


Flash

Flickr DBFlickr API

Flickr 画像ファイル

XMLを返答

画像のURLを参照

画像データ

インターネットXMLを解析APIを参照

URLを参照Loaderに表示


• 3のAS3でXMLの解析する部分• 以外とめんどうな処理が多い• Flickrの膨大なAPIを実装するのは大変

• AdobeからFlickrAPIをAS3で解析するためのライブラリが提供されている• as3flickrlib• 比較的容易にFlickrAPIの情報を解析できる• 今回は、これを利用してみる


Flash

Flickr DBFlickr API

Flickr 画像ファイル

XMLを返答

画像のURLを参照

画像データ

URLを参照Loaderに表示

インターネット

as3flickrlib

APIを参照XMLを解析して必要な情報を抽出


• Adobe ActionScript 3.0 API for Flickrのページ• http://code.google.com/p/as3flickrlib/


• Adobe ActionScript 3.0 API for Flickr (as3flickrlib) のページ• http://code.google.com/p/as3flickrlib/• Downloadのセクションから、Zipファイルをダウンロード

• as3flickrlibの使用の際に、AdobeのWebAPIを利用するコアクラスが必要となる• corelib• http://code.google.com/p/as3corelib/• Downloadのセクションから、Zipファイルをダウンロード

• as3flickrlib、corelib共にsrc以下のフォルダ全てを作成するASファイルと同じ階層に配置する

Flickrで検索した画像をFlashに表示する画像URLの抽出：FlickrTest.as

package { import com.adobe.webapis.flickr.*; import com.adobe.webapis.flickr.events.*; import com.adobe.webapis.flickr.methodgroups.*; import flash.display.*; import flash.events.*; import flash.net.*; import flash.text.*; [SWF(backgroundColor="#888888")] public class FlickrTest extends Sprite { //-------------------------------------- // CLASS CONSTANTS //-------------------------------------- private static const UID:String = "Flickr API_KEYを記入"; //-------------------------------------- // CONSTRUCTOR //-------------------------------------- public function FlickrTest() { //ステージ設定 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE;


//Flickr APIサービスの準備 var fls:FlickrService = new FlickrService(UID); //検索終了時のリスナーを登録 fls.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, onFlickrSearchComplete); //検索ワード"Tamabi"で検索開始 fls.photos.search("", "Tamabi", "any", ""); } //-------------------------------------- // PRIVATE VARIABLES //-------------------------------------- //-------------------------------------- // GETTER/SETTERS //-------------------------------------- //-------------------------------------- // PUBLIC METHODS //-------------------------------------- //-------------------------------------- // EVENT HANDLERS //-------------------------------------- //検索完了後、写真を表示 private function onFlickrSearchComplete(event:FlickrResultEvent):void {


//検索結果を配列に格納 var photos:Array = PagedPhotoList( event.data['photos'] ).photos; //配列の数だけくりかえし for ( var i:int = 0; i < photos.length; i++ ) { //現在処理している写真を取り出し var curPhoto:Photo = photos[i]; //写真のURLを生成 var photoUrl:String = "http://farm" + curPhoto.farmId + ".static.flickr.com/" + curPhoto.server + "/" + curPhoto.id + "_" + curPhoto.secret + ".jpg"; //検索結果をトレース trace("photo[" + i + "] : " + photoUrl); } } //-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- }}


• Traceのログphoto[0] : http://farm4.static.flickr.com/3199/2878963976_78ff42e98c.jpgphoto[1] : http://farm4.static.flickr.com/3027/2878130929_53680e4271.jpgphoto[2] : http://farm4.static.flickr.com/3232/2878130717_b3f9c8d178.jpgphoto[3] : http://farm4.static.flickr.com/3184/2878963878_610e16954d.jpgphoto[4] : http://farm4.static.flickr.com/3062/2878964976_a4d56895fc.jpgphoto[5] : http://farm4.static.flickr.com/3073/2878964868_db1c055008.jpgphoto[6] : http://farm4.static.flickr.com/3163/2878130563_1878026a30.jpgphoto[7] : http://farm4.static.flickr.com/3120/2878131029_30412ece9b.jpgphoto[8] : http://farm4.static.flickr.com/3287/2878130653_68cc07b505.jpgphoto[9] : http://farm4.static.flickr.com/3084/2878964260_389c7462eb.jpgphoto[10] : http://farm4.static.flickr.com/3070/2878964790_84a4bb9498.jpg...

• それぞれのURLをブラウザに入力すると、画像が表示される• きちんとXMLの情報が解析されている証拠

Flickrで検索した画像をFlashに表示する画像表示クラスの追加

• 先週の授業で使用した、ImageLoaderクラスを利用してみる• ImageLoader.as• 画像のURLを読み込んで、画面にランダムに配置するクラス

• 画像のURLが生成されるたびに、ImageLoaderクラスのインスタンスを追加していく

Flickrで検索した画像をFlashに表示する画像URLの抽出：FlickrTest.as (ImageLoaderの準備)

package { import com.adobe.webapis.flickr.*; import com.adobe.webapis.flickr.events.*; import com.adobe.webapis.flickr.methodgroups.*; import flash.display.*; import flash.events.*; import flash.net.*; import flash.text.*; [SWF(backgroundColor="#888888")] public class FlickrTest extends Sprite { //-------------------------------------- // CLASS CONSTANTS //-------------------------------------- private static const UID:String = "API_KEY"; //-------------------------------------- // CONSTRUCTOR //-------------------------------------- public function FlickrTest() { //ステージ設定 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE;


//Flickr APIサービスの準備 var fls:FlickrService = new FlickrService(UID); //検索終了時のリスナーを登録 fls.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, onFlickrSearchComplete); //検索ワード"Tamabi"で検索開始 fls.photos.search("", "Tamabi", "any", ""); } //-------------------------------------- // PRIVATE VARIABLES //-------------------------------------- //-------------------------------------- // GETTER/SETTERS //-------------------------------------- //-------------------------------------- // PUBLIC METHODS //-------------------------------------- //選択したイメージを最前面に移動する public function swapToTop(img:ImageLoader):void { addChild(img); }


//-------------------------------------- // EVENT HANDLERS //-------------------------------------- //検索完了後、写真を表示 private function onFlickrSearchComplete(event:FlickrResultEvent):void { //検索結果を配列に格納 var photos:Array = PagedPhotoList( event.data['photos'] ).photos; //配列の数だけくりかえし for ( var i:int = 0; i < photos.length; i++ ) { //現在処理している写真を取り出し var curPhoto:Photo = photos[i]; //写真のURLを生成 var photoUrl:String = "http://farm" + curPhoto.farmId + ".static.flickr.com/" + curPhoto.server + "/" + curPhoto.id + "_" + curPhoto.secret + ".jpg"; //検索結果をトレース trace("photo[" + i + "] : " + photoUrl); //ImagLoaderクラスを利用して表示 var imgLoader:ImageLoader = new ImageLoader(photoUrl, this); addChild(imgLoader); } }


//-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- }}

Flickrで検索した画像をFlashに表示する画像表示クラス：ImageLoader.as

// ImageLoader.aspackage { import flash.display.*; import flash.net.*; import flash.events.*; import flash.text.*; import flash.filters.DropShadowFilter; import gs.TweenMax; import gs.easing.*; public class ImageLoader extends Sprite { //-------------------------------------- // CLASS CONSTANTS //-------------------------------------- //-------------------------------------- // CONSTRUCTOR //-------------------------------------- public function ImageLoader(url:String, main:Object) { //プロパティ初期化 _main = main; scaleX = 0; scaleY = 0; buttonMode = true;


//ドロップシャドウ filters = [new DropShadowFilter(0,0,0,0.5,16,16)]; //loader作成 _imgLoader = new Loader(); //イベントリスナー定義：読込み完了 _imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaded); //マウスで移動可能に this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); //読み込み開始 var urlReq:URLRequest=new URLRequest(url); _imgLoader.load(urlReq); } //-------------------------------------- // PRIVATE VARIABLES //-------------------------------------- private var _main:Object; private var _url:String; private var _imgLoader:Loader; private var _perFld:TextField; private var _width:Number; private var _height:Number;


//-------------------------------------- // GETTER/SETTERS //-------------------------------------- //-------------------------------------- // PUBLIC METHODS //-------------------------------------- //-------------------------------------- // EVENT HANDLERS //-------------------------------------- //読み込み完了 private function onLoaded(event:Event):void { //写真のサイズを取得 var info:LoaderInfo = LoaderInfo(_imgLoader.contentLoaderInfo); _imgLoader.width = info.width / 4; _imgLoader.height = info.height / 4; _imgLoader.x = -_imgLoader.width / 2; _imgLoader.y = -_imgLoader.height / 2; //初期位置を画面中央に x = stage.stageWidth / 2; y = stage.stageHeight / 2; //土台作成 drawBaseRect();


//写真貼り付け addChild(_imgLoader); //写真を最前面に移動 _main.swapToTop(this); //トウィーン TweenMax.to(this, 1, {scaleX:1, scaleY:1, ease:Elastic.easeOut}); TweenMax.to(this, 1, {rotation:Math.random() * 360 - 180, ease:Quint.easeOut}); TweenMax.to(this, 1, {x:Math.random() * stage.stageWidth, y:Math.random() * stage.stageHeight, ease:Quint.easeOut}); } //マウスダウンで写真を掴む private function onMouseDown(event:MouseEvent):void { //ドラッグ開始 this.startDrag(true); //選択した写真を最前面に移動 _main.swapToTop(this); //トウィーン TweenMax.to(this, 1, {scaleX:4.0, scaleY:4.0, ease:Elastic.easeOut}); TweenMax.to(this, 0.2, {rotation:0, ease:Quint.easeOut}); }


//マウスアップで写真を放す private function onMouseUp(event:MouseEvent):void { this.stopDrag(); TweenMax.to(this, 1, {rotation:Math.random() * 360 - 180, scaleX:1.0, scaleY:1.0, ease:Quint.easeOut}); } //-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- //写真土台の白い枠を生成 private function drawBaseRect():void { var rect:Sprite = new Sprite(); rect.graphics.beginFill(0xFFFFFF); rect.graphics.drawRect(-3, -3, _imgLoader.width + 6, _imgLoader.height + 6); rect.x = -_imgLoader.width / 2; rect.y = -_imgLoader.height / 2; addChild(rect); } }}

Flickrで検索した画像をFlashに表示する検索ワード入力テキストフィールド追加

• 検索ワードを入力するテキストフィールドを追加する

Flickrで検索した画像をFlashに表示する画像URLの抽出：FlickrTest.as (検索フィールド追加)

package { import com.adobe.webapis.flickr.*; import com.adobe.webapis.flickr.events.*; import com.adobe.webapis.flickr.methodgroups.*; import flash.display.*; import flash.events.*; import flash.net.*; import flash.text.*; [SWF(backgroundColor="#888888")] public class FlickrSearch extends Sprite { //-------------------------------------- // CLASS CONSTANTS //-------------------------------------- private static const UID:String = "API_KEY"; //-------------------------------------- // CONSTRUCTOR //-------------------------------------- public function FlickrSearch() { //ステージ設定 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE;


//写真表示用のレイヤーを生成 _photoLayer = new Sprite(); addChild(_photoLayer); //GUI用のレイヤーを生成 _guiLayer = new Sprite(); addChild(_guiLayer); //サーチのインタフェイスを生成 createUI(); } //-------------------------------------- // PRIVATE VARIABLES //-------------------------------------- private var _photoLayer:Sprite; //写真表示用レイヤー private var _guiLayer:Sprite; //UI表示用レイヤー private var _headerBackground:Sprite; //UIの背景 private var _tf:TextField; //サーチワード入力テキストフィールド private var _searchButton:SimpleButton; //検索開始ボタン private var _resetButton:SimpleButton; //リセットボタン private var _fls:FlickrService; //Flickrサービス private var _photos:Photos; //写真


//-------------------------------------- // GETTER/SETTERS //-------------------------------------- //-------------------------------------- // PUBLIC METHODS //-------------------------------------- //選択したイメージを最前面に移動する public function swapToTop(img:ImageLoader):void { _photoLayer.addChild(img); } //-------------------------------------- // EVENT HANDLERS //-------------------------------------- //searchボタンをクリックで、検索開始 private function onSearchButtonClick(event:Event):void { _fls = new FlickrService(UID); _fls.addEventListener( FlickrResultEvent.PHOTOS_SEARCH, onFlickrSearchComplete); _fls.photos.search("", _tf.text, "any", ""); }


//リセットボタンをクリック private function onResetButtonClick(event:Event):void { removeChild(_photoLayer); _photoLayer = new Sprite(); addChild(_photoLayer); addChild(_guiLayer); } //検索完了後、写真を表示 private function onFlickrSearchComplete(event:FlickrResultEvent):void { //検索結果を配列に格納 var photos:Array = PagedPhotoList( event.data['photos'] ).photos; //配列の数だけくりかえし for ( var i:int = 0; i < photos.length; i++ ) { //現在処理している写真を取り出し var curPhoto:Photo = photos[i]; //写真のURLを生成 var photoUrl:String = "http://farm" + curPhoto.farmId + ".static.flickr.com/" + curPhoto.server + "/" + curPhoto.id + "_" + curPhoto.secret + ".jpg"; //ImagLoaderクラスを利用して表示 var imgLoader:ImageLoader = new ImageLoader(photoUrl, this);


_photoLayer.addChild(imgLoader); } } //-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- //UI生成 private function createUI():void { //背景を生成 _headerBackground = new Sprite(); _headerBackground.graphics.beginFill(0x000000); _headerBackground.graphics.drawRect(0, 0, 430, 42); _headerBackground.alpha = 0.8; _guiLayer.addChild(_headerBackground); //入力テキストフィールド _tf = createTextField(10, 10, 200, 20); _tf.wordWrap = true; _tf.type = TextFieldType.INPUT; _tf.text = ""; //検索開始ボタン _searchButton = new SimpleButton(); _searchButton.x = 214; _searchButton.y = 10;


_searchButton.upState = makeRoundRect(0x666666, "search"); _searchButton.overState = makeRoundRect(0xcc0000, "search"); _searchButton.downState = makeRoundRect(0x3399cc, "search"); _searchButton.hitTestState = _searchButton.upState; _searchButton.addEventListener(MouseEvent.CLICK, onSearchButtonClick); _guiLayer.addChild(_searchButton); //リセットボタン _resetButton = new SimpleButton(); _resetButton.x = 316; _resetButton.y = 10; _resetButton.upState = makeRoundRect(0x666666, "reset "); _resetButton.overState = makeRoundRect(0xcc0000, "reset "); _resetButton.downState = makeRoundRect(0x3399cc, "reset "); _resetButton.hitTestState = _resetButton.upState; _resetButton.addEventListener(MouseEvent.CLICK, onResetButtonClick); _guiLayer.addChild(_resetButton); } //テキストフィールド生成 private function createTextField(x:Number, y:Number, width:Number, height:Number):TextField { //テキストフィールド生成 var result:TextField = new TextField(); result.x = x; result.y = y;


result.width = width; result.height = height; result.border = true; result.background = true; //テキストフォーマット var textFormat:TextFormat = new TextFormat(); textFormat.font = "Lucida Grande"; textFormat.color = 0x444444; textFormat.size = 12; result.defaultTextFormat = textFormat; _guiLayer.addChild(result); return result; } //ボタン用四角形生成 private function makeRoundRect(color:uint, st:String):Sprite { //ボタン枠生成 var s:Sprite = new Sprite(); s.graphics.beginFill(color); s.graphics.drawRoundRect(0, 0, 100, 21, 21); s.graphics.endFill(); //ラベルテキスト生成 var t:TextField = new TextField();


t.x = 0; t.y = 0; t.width = 100; t.autoSize = TextFieldAutoSize.CENTER; t.text = st; //テキストのフォーマット var textFormat:TextFormat = new TextFormat(); textFormat.font = "Lucida Grande"; textFormat.color = 0xFFFFFF; textFormat.size = 12; t.setTextFormat(textFormat); s.addChild(t); return s; } }}

Ssaw08 1021

Documents

Transcript of Ssaw08 1021