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

Webサービスマッシュアップを利用した
Webアプリケーションの開発
J0333 福島美菜
（越田研究室）
１．背景
・Web2.0といわれる新しいインターネットの時代
・Webサービス
移行
SOAP
REST
・マッシュアップ
Yahoo
Google
Amazon
REST型Webサービス
REST型Webサービス
REST型Webサービス
組
み
合
わ
せ
る
新しい
Webサービス
マッシュアップ
マッシュアップの利点
例：おいしいラーメン屋さんに行きたい！
今までは
ラーメン屋さんは？
グルメサイト
その店の地図は？
地図サイト
その店までの行き方は？
交通情報
サイト
ユーザーにとって、複数のサイトにまたがる関連情報を集めるのが大変
マッシュアップの利点
マッシュアップとは・・・複数のWebサービスを目的に応じてまとめて
新しいWebサービスを作り上げること
Webサービスの
マッシュアップ
ユーザの手間を省く
ラーメン屋さんは？
グルメサイト
その店の地図は？
地図サイト
その店までの行き方は？
交通情報
サイト
２．研究目標
マッシュアップを利用したシステム開発を通して
Ｗeb2.0時代のＷebアプリケーション開発技術
の習得を目的とする
・REST型Webサービス
・JavaScript言語
・JSON
・マッシュアップ
コスメティック検索システム
３．コスメティック検索システムの開発
化粧品は女性にとって必需品であるが、最適な化粧品の選択は難しい
３．１システムの概要
①年齢、予算、肌質などの項目指定とキーワードによる検索を行う、
さらにコスメティックを検索する
②検索結果で表示されたコスメティックの価格とレビューを表示する
③検索キーワードに対応したコスメティック使用画像を表示する
●開発言語
JavaScript
●REST型Webサービス
・Yahoo Webサービス
・Flickr Webサービス
３．２システムの内容
入力画面
キーワー
ドを入力
する
項目を
指定する
Webサービス実行のプログラム部分
◆日本のYahoo Web
サービスはoutput関
数とcallback関数を提
供していない
◆アメリカのYahoo
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/webS
earch?
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);
ＸＭＬ形式の出力データ
XMLとJSONの出力データ
XML形式
JSON形式
ListingInfo: {
<ListingInfo>
Request: {
<Request>
Parameters: {
<Parameters>
Parameter: [
<Parameter value="あいうえお" name="keyword" />
{ value: "あいうえお", name: "keyword" },
<Parameter value="Shift_JIS" name="enc" />
{ value: "Shift_JIS", name: "enc" },
<Parameter value="xml_lite4" name="tf" />
{ value: "xml_lite4", name: "tf" },
<Parameter value="FP" name="at" />
{ value: "FP", name: "at" },
<Parameter value="10" name="ipp" />
{ value: "10", name: "ipp" },
<Parameter value="777" name="categ_id" />
{ value: "777", name: "categ_id" }
</Parameters>
]
</Request>
}
</ListingInfo>
}
}
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');
検索結果のURLを表
示する。
[innerHTML]プロパ
ティを使ってタイトル、
商品情報をHTMLデ
ータで表示する。
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 画像検索実行部分
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';
Flickrで検索するた
めに必要な情報を設
定する
var url =
'http://www.flickr.com/services/rest/?'+
obj2query( param );
検索キーワードを組み込ま
せた、画像検索のための
URLを変数に代入する
var script =
document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
document.body.appendChild( script );
};
その変数を使用し、
画像検索を行う
出力画面
Webサー
ビスの検
索結果
Flickr
の検索
結果
４．終わりに
まとめ
◆JavaScript言語、JSON形式、callback関
数などの技術を使ってYahooとFlickrの
REST型Webサービスをマッシュアップしたコ
スメティック検索システムを開発した
◆Webサービスの出力結果の解析や最適な
検索結果を得ることが難しかった
今後の課題
◆検索キーワードと入力パラメータにうまく適合
したサイト、またコスメティックが表示されるよう
にする
◆検索キーワードと入力パラメータに対応した
コスメティックの使用画像を表示できるようにす
る
コスメティック検索システム

Download Report