Web サービスマッシュアップを利用した Web アプリケーションの開発

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

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

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

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

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

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

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

Webサービス実行のプログラム部分 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サービスの出力データの解析 コールバック関数: 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　画像検索実行部分 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サービスの出力結果の解析や最適な検索結果を得ることが難しかった

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

Web サービスマッシュアップを利用した Web アプリケーションの開発

Web サービスマッシュアップを利用した Web アプリケーションの開発

Presentation Transcript