ssaw08 1028
TRANSCRIPT
SSAW08 後期第6回
WebAPIの利用(2)FlickrAPI:タグのつながりを視覚化2008年10月21日
本日の内容
• FlickrのWebAPIの利用その2• Flickrの関連タグの検索を利用して、タグの繋がりを視覚化してみる
Flickrのタグ機能
• Flickrの写真はアップロードする際にtag (写真に関するキーワード) を設定できる
ココ
flickr.tags.getClusterPhotos関連タグを検索する
• flickr.tags.getClusterPhotos• 関連するタグのクラスターを取得できる• Flickr API ドキュメントでの解説• http://www.flickr.com/services/api/flickr.tags.getClusters.html• このページの下にある、API Explorer のリンクから、実際の動作を検証できる
flickr.tags.getClusterPhotos関連タグを検索する
• 例) "Japan" を検索タグに設定して、タグクラウドを取得した結果
flickr.tags.getClusterPhotosFlashに実装する
• as3flickrlibのドキュメントを参照• http://as3flickrlib.googlecode.com/svn/trunk/docs/index.html
• Tags クラスの getRelated メソッドを呼び出すことで、flickr.urls.getRelated.htmlと同様の機能を実装可能• public function getRelated(tag:String):void
• Flickrサービスから利用する場合には、• new FlickrService(API_KEY) で新規にFlickrServiceのインスタンス生成• タグ検索終了を検知するイベントリスナーを設定• 「FlickrResultEvent.TAGS_GET_RELATED 」で取得できる
• FlickrServiceのインスタンス名.tags.getRerated(検索ワード) で検索
Related tag browser (1)関連するタグをテキストフィールドに表示
• 関連タグ検索のテストその1• キーワードを入力すると、関連タグが別のテキストフィールドに表示されるという簡単なサンプル
Related tag browser (1)関連するタグをテキストフィールドに表示
• ソースコードを参照
• 本日のサンプルファイルをダウンロード• http://idisk.mac.com/tadokoroatsushi/Public/ssaw08_sample_1028.zip
• FlickrTagClusters01/src/FlickrTagClusters.as を参照
Related tag browser (1)関連するタグをテキストフィールドに表示
• 処理内容1. public function FlickrTagClusters()• コンストラクター• ステージの設定• 表示レイヤーの設定• _tagLayer:タグのテキストを表示• _guiLayre:ユーザインタフェイス
• ユーザインタフェイス生成関数を呼びだし2. private function createUI():void• ユーザインタフェイスの生成• 検索テキスト入力用テキストフィールド• createTextField関数で細かな処理を定義
• 検索開始ボタン• makeRoundRect関数で生成
• ボタンをクリックした際のイベントハンドラを設定• MouseEvent.CLICK で onSearchButtonClick を呼びだす
• 結果の表示用テキストフィールド生成
Related tag browser (1)関連するタグをテキストフィールドに表示
• 処理内容3. private function onSearchButtonClick(event:Event):void• 検索ボタンをクリックした際に呼びだされるイベントハンドラー• 新規にFlickrServiceクラスをインスタンス化 (_fls)• 検索が終了した際に呼びだされるイベントハンドラを定義• FlickrResultEvent.TAGS_GET_RELATED で onTagsGetRelatedを呼び出す
• テキストフィールド (_tf) の情報を読みこんで、検索開始• _fls.tags.getRelated(_tf.text);
4. private function onTagsGetRelated(event:FlickrResultEvent):void• 検索が終了した際に呼びだされるイベントハンドラー• 検索結果を読込み• event.data.tags から結果の配列を取り出し
• for分でひとつひとつの項目を取り出して、結果出力用のテキストフィールドに書き出し
検索結果をビジュアライズする
• 検索した結果をビジュアライズしてみたい• 検索結果を円環状に並べてみたい
タグ1
タグ2
タグ3
タグ4
タグ5
タグ6
タグ7
タグ8
検索結果をビジュアライズする
• 検索ワードから、ひとつづつの角度を計算する• 360° / 検索ワード総数 * i
• 角度が計算できれば、三角関数を用いて、円周に沿って物体を配置できる• ただし角度はラジアン角に変換する必要あり• ラジアン角の算出方法 (deg:度、 rad:ラジアン)• deg = rad * 180 / π• rad = deg * π / 180
• 求められたラジアン角から、物体の座標を計算• X座標:半径 * sin(ラジアン )• 半径200pixelの場合• x = 200 * Math.sin(rad * i);
• X座標:半径 * cos(ラジアン )• 半径200pixelの場合• y = 200 * Math.cos(rad * i);
Related tag browser (2)検索結果を円環状に配置
• 検索結果
Related tag browser (2)検索結果を円環状に配置
• ソースを参照• FlickrTagClusters02/src/
• 新規に円環状にテキストを配置するクラス TagClusterView.as を追加• 検索が完了した際に、メインクラス FlickerTagCluster.as から生成される• 2つの引数を渡す• メインクラスのインスタンス (あとでコールバックできるように)• タグの配列• var tagClusterView:TagClusterView = new TagClusterView(this, event.data.tags);
• ステージの中央に配置
Related tag browser (2)検索結果を円環状に配置
• クラス TagClusterView.as• private function makeTagCulster():void• コンストラクター• for分で検索結果の個数分処理を繰り返し• 検索結果個数から、ラジアン角を算出• X座標とY座標を三角関数を用いて算出• テキストフィールド生成、タグテキストを設定• 中心点からタグのテキストフィールドにラインを引く
Related tag browser (3)タグの関連を連結する
• 関連タグの円環から、さらに関連タグを検索できるように
Related tag browser (3)タグの関連を連結する
• ソースを参照• FlickrTagClusters03/src/
• タグ表示クラス TagClusterView のそれぞれのテキストフィールドをボタンにする
• ボタンにイベントリスナーを設定• イベントリスナー、クリックするとメインクラスFlickrTagClusterのonClickTagを呼びだし
• FlickrTagCluster.onClickTag で再度検索をする
Related tag browser (4)タグの関連を連結する2 - サイズを変化させる
• 円環がつながるにつれて、サイズが小さくなっていくようにしてみる
Related tag browser (4)タグの関連を連結する2 - サイズを変化させる
• ソースを参照• FlickrTagClusters04/src/
• メインクラスFlickrTagClusterから、 TagClusterViewを表示リストに貼り付ける際に、縮尺を小さくしていく• _tagViewSclae *= 縮小率• tagClusterView.scaleX = _tagViewSclae;• tagClusterView.scaleY = _tagViewSclae;
Related tag browser (5)タグの関連を連結する3 - アニメーション追加
• TweenMaxを使って、円環が開く際にアニメーションを設定する
応用例
• Flickr関連タグ検索を用いた作品2つ
• Flickr Related Tag Browser• http://www.airtightinteractive.com/projects/related_tag_browser/app/
• Tag Galaxy• http://taggalaxy.de/
応用例
• Flickr Related Tag Browser
応用例
• Tag Galaxy
応用例
• Tag Galaxy