STAC STAR STAC STAR flickr REST Sample URL http://stacstar.jp/flickr_panel/ Archive flickrpanelsearch.zip File ActionScript 2.0 Flash Player 8 Flash 8 2 3
発 案 デザイン 駒 を 動 かし 検 索 結 果 を 取 り 出 す このコンテンツは flickr の 提 供 している Web サービスを 使 って 写 真 をザッピングのように 探 していくコ ンテンツです 特 に flickr のおもしろい 概 念 である 写 真 ( 画 像 ) と 言 葉 (タグ) をつなぐ 部 分 だけ をピックアップし それを HTML とは 違 うインターフェースとして 提 供 しました flickr の 提 供 している HTML のインターフェースとは 違 い 画 像 とタグをシームレスにザッピングできるのが 特 徴 です " コンセプト これを 作 る 前 に 頭 の 中 では 作 ってみたいインターフェースがありました それは ステージ 上 に 検 索 条 件 となるようなものをしきつめ そのうえに 駒 を 配 置 させ それを 動 かすたびに 該 当 する 検 索 結 果 が 集 ま ってくるインターフェースでした たとえば ステージにカラーパレットをしき チェスの 駒 のようなものを 動 かすたびにその 置 いた 位 置 にあるカラーに 近 い 画 像 が 集 まってくるというようなものを 想 像 していました まずは 必 要 となる 検 索 結 果 検 索 条 件 駒 をどういった 情 報 にするかということを 考 えました 検 索 結 果 は 集 まってきたときにそれが 即 座 に 結 果 だとユーザーにダイレクトに 伝 わるほうがよいため 画 像 (サムネイル)にすることにしました 検 索 条 件 は 使 用 する Web サービスに 大 きく 依 存 するので いくつかの Web サービスを 調 べてみました そこで 言 葉 (タグ)と 画 像 ( 写 真 )の 結 び 付 きを 提 供 する flickr の Web サービスを 利 用 し 検 索 条 件 として 言 葉 (タグ) を 選 択 しました 残 るは 駒 です 駒 に 関 しては サムネイルが 言 葉 (タグ) を 持 っているのを 利 用 し 検 索 結 果 のサム ネイル 自 身 を 駒 としました(つまり 検 索 結 果 = 駒 です) こうすることで 言 葉 (タグ) 画 像 ( 写 真 ) 言 葉 (タグ) 画 像 ( 写 真 ) というサイクルが 生 まれます あとは シームレスに 言 葉 と 画 像 を 探 索 するインターフェースということでデザインを 考 えました プロトタイプインターフェース 写 真 共 有 サイト flickr " 具 現 化 ここで 想 像 していたインターフェースと 実 際 にできること と できないこと の 落 としどころを 模 索 する 作 業 になります flickr とは 自 分 の 撮 った 写 真 や 作 成 した 画 像 をアップ ロードし 写 真 を 公 開 できるサービスです 写 真 を 公 開 す るだけではなく 写 真 に 対 してタグ( 写 真 へのキーワード) を 設 定 することができます このタグを 付 けることにより 画 像 に 絵 としての 要 素 の 他 言 葉 が 加 わり 写 真 としての 意 味 が 広 がります たとえば 今 窓 から 撮 った 写 真 をアップロードして 公 開 しても それは 窓 から 撮 った 風 景 写 真 でしかありま せん ところが それに december というタグを 付 け れば 写 真 に 時 間 が 加 わり tokyo といタグを 付 ければ 場 所 の 情 報 が 加 わります これにより 写 真 の 表 情 が 広 が ります さらに ユーザーの 検 索 するキーワードと 写 真 の 持 つキ ーワードをマッチングさせれば 検 索 したり その 写 真 が 持 つタグから 他 の 写 真 を 見 つけることができます 他 にも グループを 作 成 して 同 じ 興 味 を 持 つ 人 たちが 写 真 を 共 有 し たり 特 定 の 所 有 者 の 写 真 を 閲 覧 できたりとさまざまな 使 い 方 があります flickr では これらのサービスを 外 部 から 利 用 できるよ うに Web サービスとして 提 供 しています flickr http://www.flickr.com/ 4 5
スクリプト Flickr API と Flash の 連 携 ードで 関 連 する 写 真 の 一 覧 を 取 得 してみましょう(****には 取 得 した API Key を 入 れてください) http://www.flickr.com/services/rest/?method=flickr.photos.search&api_key= **** &tags=flash すると 結 果 となる 写 真 情 報 群 が XML 形 式 で 取 得 できます " flickr の Web サービスへ 接 続 するための 準 備 写 真 情 報 を XML 形 式 で 取 得 最 初 に flickr の Web サービスにつなぐ 準 備 から 見 ていきます flickr の Web サービスを 使 うには まず flickr のアカウントを 取 る 必 要 があります flickr は Yahoo! にてサービスを 展 開 しているので はじめに Yahoo! への 登 録 が 必 要 です(Yahoo!Japan の ID は 使 えません) 登 録 し flickr にログインした 後 に 下 記 URL にてFlickr API Key を 発 行 してもらう 必 要 があります API Key とは Web サービスを 利 用 する 際 に 使 用 する 識 別 子 です http://www.flickr.com/services/api/key.gne API Key の 発 行 が 完 了 すると Web サービスへつなぐ 準 備 は 完 了 です Yahoo.com アカウントの 登 録 Flickr API Key の 取 得 このURLでは flickr.photos パッケージの search() というメソッドに 対 して api_keyとtags の2つの 引 数 を わたして 呼 び 出 しました flickr の REST 方 式 の 書 式 は 以 下 の URL のあとに 特 定 のパッケージのメソッドを 指 定 し API に 合 った 引 数 を 付 加 して 呼 び 出 すだけです http://www.flickr.com/services/rest/? REST による Web サービスの 利 用 flickrのweb サービスでは XML-RPC SOAP REST(REpresentational State Transfer)の 3 つの 方 式 で サービスを 提 供 しています 今 回 のコンテンツでは 実 装 が 簡 単 な REST を 採 用 しました なぜ 簡 単 かというと 他 の 2 つの 方 法 はデータの 送 受 信 に XML を 使 って 行 うのに 対 して REST は URL に クエリ 文 字 列 を 付 加 して HTTP GET で 送 信 するだけで 結 果 を 取 得 することができるからです 簡 単 にいうと 特 定 の URL をたたけばその 結 果 を XML で 返 してくれます ためしに flash というキーワ メソッド 群 については 下 記 の URL にまとめて 解 説 があるので どんなメソッドがあるかを 最 初 に 把 握 して おいたほうがいいでしょう http://www.flickr.com/services/api/ また 今 回 このコンテンツでは 使 用 していませんが flickr の Web サービスに 接 続 するための 処 理 を 担 うク ラス 群 の AS ファイルも 上 記 URL からダウンロードできます 6 7
" データ 構 造 flickrから 取 得 するデータを 格 納 するクラスとして このコンテンツでは 以 下 の3つのモデルとなるクラスと して 設 計 しました flickr から 取 得 するデータを 格 納 するクラス クラス 概 要 " 写 真 情 報 の 取 得 このスクリプトでキーとなる 部 分 は flickr から 必 要 な 写 真 情 報 の 取 得 と 読 み 込 まれた 後 の 動 作 のふるまい です まずは 写 真 情 報 の 取 得 について 見 ていきます このコンテンツにおいて 写 真 に 必 要 な 情 報 はタイトル サムネイルの URL 大 きな 画 像 の URL 写 真 に 割 り 当 てられたタグ( 複 数 )になります Web サービスの 仕 様 から 関 連 しそうなメソッドを 探 してみます PhotoInfo Tag TagHolder 写 真 の 情 報 を 格 納 するクラス また isenough() メソッドにより このコンテンツで 使 う 写 真 情 報 が すべて 取 得 できているかを 返 す タグに 関 する 情 報 を 持 つクラス タグとなるキーワードと 写 真 情 報 を 配 列 として 保 持 しています 設 定 されているタグ 名 での 検 索 が 実 行 されたかどうか 写 真 の 基 本 情 報 までの 取 得 が 行 われているかど うかのフラグを 持 つ また PhotoInfo.isEnough() メソッドを 使 って 格 納 している 写 真 情 報 すべてが 十 分 な 情 報 を 持 っているかを 返 すメソッドも 用 意 タグをまとめてあるクラス filltagfromphotoinfo() メソッドは 写 真 情 報 を 引 数 に 取 り その 写 真 情 報 が 持 つタグに 該 当 する Tag クラスのインスタンスに 写 真 情 報 を 格 納 していくメソッド また Tag. isenough() メソッドをダイレクトに 呼 び 出 すメソッドも 用 意 flickr から 取 得 するデータを 格 納 するクラスの 構 造 TagHolder 1 * Tag * 1..* PhotoInfo 写 真 情 報 の 取 得 に 関 連 するメソッド(Flickr API) メソッド flickr.photos.search flickr.tags.getlistphoto flickr.photos.getsizes この 辺 が 写 真 情 報 を 埋 めるのに 関 係 がありそうです しかし これを 見 ると 必 要 な 画 像 情 報 が 一 度 の 接 続 で は 取 得 できないことがわかります 一 度 の 接 続 で 取 得 できないということは 複 数 回 の 接 続 で 取 得 しなくては ならないということになります その 順 番 を 追 ってみましょう 1. タグに 対 する 画 像 概 要 情 報 の 一 覧 を 取 得 (flickr.photos.search) 2. 一 覧 から 1 つずつ 写 真 情 報 を 取 得 し タグの 一 覧 を 取 得 (flickr.tags.getlistphoto) 3. 画 像 の URL の 取 得 (flickr.photos.getsizes) この 流 れを 介 して はじめてこのコンテンツで 利 用 する 1 枚 の 写 真 の 情 報 がそろいます この 写 真 の 情 報 を そろえる 役 割 を 担 うのが FlickrSearch クラスと FlickrConnector クラスになります flickrとの 直 接 的 な 接 続 を 担 うのが FlickrConnector クラスです FlickrConnector の 役 割 は flickrのwebサービスから 要 求 したデータ を 取 得 し エラーがあればエラーの 発 行 処 理 を 行 い 問 題 がなければ 特 定 のイベントハンドラを 実 行 します そして その FlickrConnector を 使 ってこのコンテンツ 用 のふるまいを 記 述 したのが FlickrSearch クラス になっています FlickrSearch は FlickrConnector から 取 得 した XML データを 解 析 し 先 に 設 計 したモデル となるクラスを 埋 めていく 役 割 です Flickrsearch と FlickrConnector FlickrSearch use 概 要 タグから 写 真 の 概 要 の 一 覧 を 取 得 するメソッド 写 真 の ID からタグの 一 覧 を 取 得 するメソッド 画 像 の URL とそのサイズを 取 得 するメソッド FlickrConnector 8 9
この 流 れを 組 んでいるスクリプトのキーとなる 部 分 を 抜 粋 して 一 連 の 流 れを 追 ってみます まずは この コンテンツの 主 となる 制 御 をする FlickrPanelMediator クラスから FlickrSearch.searchPhotos() メソッドが 呼 び 出 されるところからスタートします FlickrSearch.searchPhotos() メソッド // flickrconnector へ 接 続 の 準 備 var flickrconnector = new FlickrConnector(FlickrSearch.API_KEY); var target = this; flickrconnector.onphotosbytagfind = function(resultxml:xml) { target.storephotoinfofromxml(tag, resultxml); }; while (currentnode!= null) { if (currentnode.nodename!= 'tag') throw new FlickrException(this.toString() + ' fillphototags() 予 期 し ないレスポンスを 受 け 取 りました '); } photoinfo.arrtag.push(currentnode.firstchild.nodevalue); currentnode = currentnode.nextsibling; // 画 像 の URL を 埋 める target.fillphotourl(tag, photoinfo); flickrconnector.searchphotosbytag(tag); ここでキーになるのは FlickrConnector のイベントハンドラの 上 書 きと 検 索 にかける 部 分 です 検 索 が 終 了 し 正 しいレスポンスが 返 ってきたときには storephotoinfofromxml() メソッドが 呼 び 出 されるように 設 定 しています 次 に storephotoinfofromxml() メソッドを 見 てみましょう FlickrSearch.storePhotoInfoFromXML() メソッド // 写 真 の 基 本 情 報 を 設 定 photoinfo.id = currentnode.attributes['id']; photoinfo.title = currentnode.attributes['title']; // TagHolder へ 格 納 objtag.arrphotoinfo.push(photoinfo); // 写 真 の 情 報 を 埋 める this.fillphototags(tag, photoinfo); ここでの 主 な 処 理 は 取 得 した 写 真 の 概 要 一 覧 の XML を 解 析 し PhotoInfo を 作 成 して Tag インスタンスに 格 納 することです また その Tag インスタンスを TagHolder へ 格 納 しています しかし これだけでは 画 像 の 概 要 情 報 (ID とタイトル)しかそろっていません まずは その 画 像 の 持 つタ グ 情 報 を 取 得 するために fillphototags() メソッドを 呼 び 出 します // 写 真 ID からタグを 取 得 する flickrconnector.searchtagsbyphoto(photoinfo.id); ここでは FlickrConnector を 通 してタグ 情 報 を 検 索 させ 取 得 に 成 功 した 際 の ontagsbyphotofind() イベ ントハンドラを 上 書 きしています その 上 書 きしたメソッドの 中 で 取 得 した XML を 解 析 し 写 真 情 報 にタグ を 追 加 しています しかし これだけでもまだ 写 真 情 報 はそろいません FlickrSearch.fillPhotoURL()を 呼 び 出 して URL を 補 完 します FlickrSearch.fillPhotoURL() メソッド // FlickrConnector.onTagsByPhotoFind イベントハンドラを 上 書 きし // 写 真 情 報 のタグを 補 完 する flickrconnector.onurlbyphotofind = function(resultxml) { while (currentnode!= null) { photoinfo.thumbnailurl = currentnode.attributes['source']; photoinfo.imageurl = currentnode.attributes['source']; } currentnode = currentnode.nextsibling; // 持 っているタグに 属 するようにする tagholder.filltagfromphotoinfo(photoinfo); FlickrSearch.fillPhotoTags() メソッド // FlickrConnector.onTagsByPhotoFind イベントハンドラを 上 書 きし // 写 真 情 報 のタグを 補 完 する flickrconnector.ontagsbyphotofind = function(resultxml) { } // 1 つの 画 像 情 報 が 整 ったイベントハンドラを 発 行 target.onphotofill(photoinfo); // 写 真 ID から 画 像 の URL 情 報 を 取 得 する flickrconnector.searchurlbyphoto(photoinfo.id); 150 151
ここでも FlickrConnector.onURLByPhotoFind() イベントハンドラを 上 書 きし 写 真 情 報 のサムネイルの URL と 大 きな 画 像 の URL を 埋 めていきます そして 最 後 にこの 画 像 の 情 報 がすべてそろったというイベン トハンドラをたたいて 1 つの 写 真 の 情 報 の 取 得 が 完 了 します FlickrPanelMediator クラスと FlickrSearch.searchPhotos() メソッド mediator:flickrpanelmediator flickrsearch:flickrsearch 1:searchPhotos(tag:String) " 画 像 情 報 の 読 み 込 み 完 了 の 際 の 処 理 画 像 情 報 がそろえば あとはサムネイルをロードする 作 業 です しかしロードしたサムネイルを 指 定 のタグ に 集 まるようにすればいいかというと 少 し 違 います それは すでにユーザーが 検 索 しているタグが 変 わっ ている 可 能 性 があるからです その 処 理 の 流 れを 見 てみます 画 像 の 情 報 がそろうと FlickrSearch.onPhotoFill イベントハンドラが 呼 ばれます このメソッドは FlickrPanelMediator.createThumbnail で 上 書 きされています その 中 で FlickrPanel にサムネイルをロードす るよう 命 令 を 出 します FlickrPanelはサムネイルとなる MC(Thumbnail) をステージに attachmovie() させて サムネイルの 画 像 を 呼 び 出 します このサムネイルの 読 み 込 みが 終 わったことを 告 げる Thumbnail.onThumbnailInit を 受 けて FlickrPanel.initThumbnail メソッドが 呼 ばれます その 中 では ロードした Thumbnail が 現 在 検 索 されているタグを 持 っているかをチェックして 持 っていな ければ 即 座 に removemovieclip を 行 っています FlickrPanel.initThumbnail メソッド // 現 在 のターゲットのタグに 属 してなければ fadeout させる var tagholder = TagHolder.getInstance(); if (!tagholder.doesphotoinfobelongto(this.targetpanel.gettag(), thumbnail.photoinfo)) thumbnail.removemovieclip(); こういったチェックを 行 うことにより 読 み 込 み 開 始 から 準 備 完 了 までのタイムラグでの 状 態 の 変 化 をうま くコントロールしています 152 153