Webサービスマッシュアップを利用したWebアプリケーションの開発 J0333 福島美菜 （越田研究室）

１．背景 ・Web2.0といわれる新しいインターネットの時代 ・Webサービス ・マッシュアップ 新しい Webサービス マッシュアップ SOAP ・Webサービス 移行 REST Google Amazon Yahoo ・マッシュアップ REST型Webサービス 新しい Webサービス 組 み 合 わ せ る マッシュアップ

マッシュアップの利点 例：おいしいラーメン屋さんに行きたい！ ユーザーにとって、複数のサイトにまたがる関連情報を集めるのが大変 今までは グルメサイト ラーメン屋さんは？ 地図サイト その店の地図は？ 交通情報 サイト その店までの行き方は？ ユーザーにとって、複数のサイトにまたがる関連情報を集めるのが大変

マッシュアップの利点 新しいWebサービスを作り上げること ユーザの手間を省く グルメサイト ラーメン屋さんは？ Webサービスの マッシュアップ 地図サイト その店の地図は？ 交通情報 サイト その店までの行き方は？ ユーザの手間を省く

２．研究目標 マッシュアップを利用したシステム開発を通してＷeb2.0時代のＷebアプリケーション開発技術の習得を目的とする ・REST型Webサービス ・JavaScript言語 ・JSON ・マッシュアップ コスメティック検索システム

３．コスメティック検索システムの開発 ３．１ システムの概要 化粧品は女性にとって必需品であるが、最適な化粧品の選択は難しい ３．１　システムの概要 　①年齢、予算、肌質などの項目指定とキーワードによる検索を行う、さらにコスメティックを検索する 　②検索結果で表示されたコスメティックの価格とレビューを表示する 　③検索キーワードに対応したコスメティック使用画像を表示する ●開発言語 　 JavaScript ●REST型Webサービス 　・Yahoo Webサービス ・Flickr Webサービス

３．２　システムの内容 入力画面 キーワードを入力する 項目を 指定する

Webサービス実行のプログラム部分 ◆日本のYahoo Webサービスはoutput関数とcallback関数を提供していない obj.s = document.createElement('script'); obj.s.type ='text/javascript'; obj.s.charset ='utf-8'; obj.s.src=‘http://search.yahooapis.com/WebSearchService/V1/webSearch? appid=ユーザID &output=json（出力フォーマット） &callback=出力結果を処理する関数名 &results=出力結果の数 &type=all &query='encodeURIComponent(obj.q.value) +'+‘ +encodeURIComponent(obj.hada1[memo2].value)+'+‘ +encodeURIComponent(obj.style1[memo].value)+'+‘ +obj.cosme1[memo3].value+'+‘ +encodeURIComponent(obj.eye1[memo4].value)+'+‘ +obj.year1.value; document.getElementsByTagName('head')[0].appendChild(obj.s); ◆日本のYahoo Webサービスはoutput関数とcallback関数を提供していない ◆アメリカのYahoo Webサービスを利用する キーワードと指定した項目を組み込む

ＸＭＬ形式の出力データ

XMLとJSONの出力データ XML形式 JSON形式 <ListingInfo> <Request> <Parameters> <Parameter value="あいうえお" name="keyword" /> <Parameter value="Shift_JIS" name="enc" /> <Parameter value="xml_lite4" name="tf" /> <Parameter value="FP" name="at" /> <Parameter value="10" name="ipp" /> <Parameter value="777" name="categ_id" /> </Parameters> </Request> </ListingInfo> ListingInfo: { Request: { Parameters: { Parameter: [ { value: "あいうえお", name: "keyword" }, { value: "Shift_JIS", name: "enc" }, { value: "xml_lite4", name: "tf" }, { value: "FP", name: "at" }, { value: "10", name: "ipp" }, { value: "777", name: "categ_id" } ] }

Webサービスの出力データの解析 入力した検索キーワードを引数にしてFlickrで画像検索を行う。 コールバック関数: function(z) { abc.text = obj.q.value; photo_search(abc); obj.r.innerHTML = ''; for(var i = 0; i < z.ResultSet.Result.length; i++){ var li = document.createElement('li'); var a = document.createElement('a'); a.href = z.ResultSet.Result[i].ClickUrl; 　　　　a.innerHTML = z.ResultSet.Result[i].Title; li.innerHTML = 'Summary : ' + z.ResultSet.Result[i].Summary+'<br> '; li.appendChild(a); obj.r.appendChild(li); } }, 入力した検索キーワードを引数にしてFlickrで画像検索を行う。 検索結果のURLを表示する。[innerHTML]プロパティを使ってタイトル、商品情報をHTMLデータで表示する。

Flickr 画像検索実行部分 Flickrで検索するために必要な情報を設定する function photo_search ( param ) { param.api_key = ユーザID; param.method = 'flickr.photos.search'; param.per_page = 10; param.sort = 'date-posted-desc'; param.format = 'json'; param.jsoncallback = 'jsonFlickrApi'; var url = 'http://www.flickr.com/services/rest/?'+ obj2query( param ); var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = url; document.body.appendChild( script ); }; Flickrで検索するために必要な情報を設定する 検索キーワードを組み込ませた、画像検索のためのURLを変数に代入する その変数を使用し、画像検索を行う

　出力画面 Webサービスの検索結果 Flickrの検索結果

４．終わりに まとめ ◆JavaScript言語、JSON形式、callback関数などの技術を使ってYahooとFlickrのREST型Webサービスをマッシュアップしたコスメティック検索システムを開発した ◆Webサービスの出力結果の解析や最適な検索結果を得ることが難しかった

今後の課題 ◆検索キーワードと入力パラメータにうまく適合したサイト、またコスメティックが表示されるようにする ◆検索キーワードと入力パラメータに対応したコスメティックの使用画像を表示できるようにする コスメティック検索システム