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

発

J0333 福島美菜（越田研究室）

１．背景・ Web2.0 といわれる新しいインターネットの時代

REST移行

新しいWeb サービス

組み合わせる

REST 型 Web サービス

REST 型 Web サービス

REST 型 Web サービスマッシュアップ

SOAP

・ Web サービス

Google

Amazon

Yahoo

・マッシュアップ

マッシュアップの利点例：おいしいラーメン屋さんに行きたい！

グルメサイト

地図サイト

交通情報サイト

その店の地図は？

その店までの行き方は？

今までは

ラーメン屋さんは？

ユーザーにとって、複数のサイトにまたがる関連情報を集めるのが大変

マッシュアップの利点

グルメサイト

地図サイト

交通情報サイト

その店の地図は？

その店までの行き方は？

ラーメン屋さんは？

Web サービスのマッシュアップ

マッシュアップとは ・・・　複数の Web サービスを目的に応じてまとめて

　　 　　　　　　　　　　　　 新しい Web サービスを作り上げること

ユーザの手間を省く

２．研究目標

マッシュアップを利用したシステム開発を通してＷ 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 の出力データ

<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" }

]

}

}

}

XML 形式 JSON 形式

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 サービスの出力結果の解析や最適な検索結果を得ることが難しかった

今後の課題

◆ 検索キーワードと入力パラメータにうまく適合したサイト、またコスメティックが表示されるようにする

◆ 検索キーワードと入力パラメータに対応したコスメティックの使用画像を表示できるようにする

コスメティック検索システム