Ssaw08 1028

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(検索ワード) で検索

http://as3flickrlib.googlecode.com/svn/trunk/docs/com/adobe/webapis/flickr/methodgroups/Tags.html#getRelated()

http://as3flickrlib.googlecode.com/svn/trunk/docs/com/adobe/webapis/flickr/methodgroups/Tags.html#getRelated()

Related tag browser (1)関連するタグをテキストフィールドに表示

• 関連タグ検索のテストその1• キーワードを入力すると、関連タグが別のテキストフィールドに表示されるという簡単なサンプル


• ソースコードを参照

• 本日のサンプルファイルをダウンロード• http://idisk.mac.com/tadokoroatsushi/Public/ssaw08_sample_1028.zip

• FlickrTagClusters01/src/FlickrTagClusters.as を参照


• 処理内容1. public function FlickrTagClusters()• コンストラクター• ステージの設定• 表示レイヤーの設定• _tagLayer：タグのテキストを表示• _guiLayre：ユーザインタフェイス

• ユーザインタフェイス生成関数を呼びだし2. private function createUI():void• ユーザインタフェイスの生成• 検索テキスト入力用テキストフィールド• createTextField関数で細かな処理を定義

• 検索開始ボタン• makeRoundRect関数で生成

• ボタンをクリックした際のイベントハンドラを設定• MouseEvent.CLICK で onSearchButtonClick を呼びだす

• 結果の表示用テキストフィールド生成


• 処理内容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)検索結果を円環状に配置

• 検索結果


• ソースを参照• FlickrTagClusters02/src/

• 新規に円環状にテキストを配置するクラス TagClusterView.as を追加• 検索が完了した際に、メインクラス FlickerTagCluster.as から生成される• 2つの引数を渡す• メインクラスのインスタンス (あとでコールバックできるように)• タグの配列• var tagClusterView:TagClusterView = new TagClusterView(this, event.data.tags);

• ステージの中央に配置


• クラス TagClusterView.as• private function makeTagCulster():void• コンストラクター• for分で検索結果の個数分処理を繰り返し• 検索結果個数から、ラジアン角を算出• X座標とY座標を三角関数を用いて算出• テキストフィールド生成、タグテキストを設定• 中心点からタグのテキストフィールドにラインを引く

Related tag browser (3)タグの関連を連結する

• 関連タグの円環から、さらに関連タグを検索できるように

Related tag browser (3)タグの関連を連結する


• タグ表示クラス TagClusterView のそれぞれのテキストフィールドをボタンにする

• ボタンにイベントリスナーを設定• イベントリスナー、クリックするとメインクラスFlickrTagClusterのonClickTagを呼びだし

• FlickrTagCluster.onClickTag で再度検索をする

Related tag browser (4)タグの関連を連結する2 - サイズを変化させる

• 円環がつながるにつれて、サイズが小さくなっていくようにしてみる

Related tag browser (4)タグの関連を連結する2 - サイズを変化させる


• メインクラス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

Technology

Ssaw08 1028