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

平成 19 年度情報工学科卒業研究発表会 2008.1.31
Web サービスマッシュアップを利用した Web アプリケーションの開発
研究者：福島美菜，指導教員：越田高志
１．はじめに
今，Web2.0 といわれる新しいインターネットの時
代に入ってきている．Web2.0[1]とは，従来のサーバ
から情報を受け取るだけの受身のサービスから，ユ
ーザ自らもサービスや情報を発信する新しい Web の
あり方をいう．それにともない Web サービスも従来の
SOAP 型から，より利用しやすい REST 型へと移り変
わりつつある．現在，Yahoo，Google，Amazon など
様々な企業がその REST 型 Web サービスを提供し
てきている．それらの Web サービスを組み合わせて，
新しい Web サービスを開発することをマッシュアップ
という．そのマッシュアップにおいては，目的に応じ
て，如何に最適に Web サービスを組み合わせるか，
という利用技術が重要であり，そのプログラミング技
術も従来からの Java を始め，PHP，JavaScript など複
数の言語を使うことも必要になる．
本研究では，JavaScript を利用し，Yahoo と Flickr
の REST 型 Web サービスをマッシュアップしたコスメ
ティック検索システムの開発を行い，この開発を通し
て，JavaScript プログラミング技術やマッシュアップな
どの Web2.0 アプリケーション開発技術を習得するこ
とを目的とする．
２．REST 型 Web サービスについて
サービスについて[2]
について[2]
REST とは，Representational State Transfer の略
で， HTTP を使って通信をおこなう手法である．
REST の最大の特徴は「Web ブラウザに URL を入力
すれば実行できる」事である．Web ブラウザから容易
に実行できるため，すでに存在しているサービスに
対しては「まずはアクセスしてみて必要な情報が得ら
れるか確認し，実際に使うかどうかはそれから考え
る」という使い方ができる点で利用しやすい．
３．コスメティック検索
コスメティック検索システム
検索システムの
システムの開発
３．１システムの
システムの概要
化粧品は多くの女性にとっての必需品であり，用
途に応じた最適な化粧品の選択が必要であるが，そ
の選択は難しい．そこで本研究では，Yahoo の検索
及びショッピング Web サービス[3][4]と画像に関する
Flickr の photos.search を結合し，JavaScript を用い
てシステム全体を開発し，その問題解決を図る．
（１）年齢・予算・メイクスタイル・肌質・メーカなど
の項目指定とキーワードによる検索を行う，さらにコ
スメティック製品を検索する
（２）検索結果で表示されたコスメティックの価格
とレビューを表示する
（３）検索キーワードに対応したコスメティック使
用画像を表示する
３．２システムの
システムの開発
システム全体は JavaScript を用いて開発した[5][6]．
図１にシステムの入力画面を示す．
図 1 コスメテック検索システム入力画面
この入力画面で，検索キーワードの入力とパラメ
ータの選択を行う．入力したキーワードと選択したパ
ラメータの内容は図２のように，Web サービスの URL
や callback 関数などと一緒に組み込ませる．この入
力画面の検索には米国 Yahoo の WebSearchService
が対応し，ショッピングには ShoppingService が対応
している．ラジオボタン（図２）に対する入力パラメー
タの抽出が最初はできなくて，困った部分であるが，
図３の処理で正確に抽出することができた．
<input type="radio" name="cosme" value="Shiseido">資生堂
<input type="radio" name="cosme" value="Dior">
クリスチャン・ディオール
<input type="radio" name="cosme" value="KOSE">コーセー
<input type="radio" name="cosme" value="Kanebo">
カネボウ
<input type="radio" name="cosme" value="CHANEL">
シャネル
図２ラジオボタンによる入力パラメータ指定部分
obj.cosme1 =
document.getElementsByName('cosme');
for (var i=0; i<obj.cosme1.length; i++){
if(obj.cosme1[i].checked){
memo3= i;
} }
obj.cosme1[memo3].value;
図３ラジオボタンの入力パラメータ抽出
①YahooWeb サービスの
サービスの組み込み
本システムでは Ajax の活用も見据えて，
JavaScript の軽量データフォーマットである
JSON(JavaScript Object Notation)[7]利用技術の修
得とコールバック関数を利用するために米国 Yahoo
のサービスを利用した．これらは日本の Yahoo Web
サービスでは提供されていない．JSON は JavaScript
Web サービスマッシュアップを利用した Web アプリケーションの開発（８－1）
平成 19 年度情報工学科卒業研究発表会 2008.1.31
で利用されるテキストベースのデータ記述言語であ
り，XML より簡素にオブジェクトデータを記述でき，
可読性が高い．また，本システムでは，入力画面が
切り替わることなく，出力結果が表示されるように，入
力パラメータを組み込んだ REST 型 Web サービスを
実行する JavaScript を動的に生成している．更に
Web サービスの出力は JSON 形式で返され，その出
力データを解析する関数を callback パラメータで実
行時に指定している．このため，Web サービスへの
入力パラメータの設定と実行，及びその出力まで全
て自動で画面の切り替わりがなく，表示できる．その
プログラム部分を図４に示す．
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 画像検索実行部分
obj.s = document.createElement('script');
obj.s.type ='text/javascript';
obj.s.charset ='utf-8';
obj.s.src='http://search.yahooapis.com/WebSearchSe
rvice/V1/WebSearch?appid= ユーザ ID
&output=json & callback= コールバック関数
&results=10&type=all&query=
'+encodeURIComponent(obj.q.value)+'……..;
document.getElementsByTagName('head')[0].appen
dChild(obj.s);
図４ Web サービス実行の JavaScript 部分
コールバック関数は JSON 形式の出力データを解析
して，タイトル，URL,商品価格と商品情報を表示す
るように工夫した．その解析部分を図５に示す．
コールバック関数: function(z) {
abc.text = obj.q.value;
Flickr 検索のメソッド
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);
}
};
図５コールバック関数の処理内容
②FlickrWeb サービスの
サービスの組込み
組込み[8]
[8]
画像データの表示のために，写真検索を行う
flickr.photos サービスを利用した．flickr でも検索結果
出力フォーマットが JSON の場合はコールバック関数
が利用できる．その Web サービス実行部分の
JavaScript を図６に示す．画像表示も含むシステムの
実行画面を図７に示す．
図７実行画面
６．おわりに
JavaScript 言語を使って Yahoo と Flikcr の REST
型 Web サービスをマッシュアップしたコスメテック検
索システムを開発した．JavaScript 言語の理解と修
得，また Web サービス API と出力結果の解析部分に
苦労したが，何とか開発できた．しかし最適な検索
結果を得ることは難しいと感じた．検索キーワードと
入力パラメータにうまく適合したサイト，
また画像
が表示されるようにこれからも検討していきたい．
参考文献
[1]大向一輝,橋本大也:Web2.0 について,
情報処理,Vol.47 No.11(2006).
[2] 荒本道隆:Web2.0 時代の WebServices,
http://www.xmlconsortium.org/wg/
web2.0/teigensho/4--REST-SOAP.html
[3]Yahoo Web Service:
http://developer.yahoo.com/
[4]Yahoo Web サービス:
http://developer.yahoo.co.jp/
[5]古旗一浩:JavaScript テクニカルブック,
C&R 研究所(2007).
[6]半場方人: JavaScript&DynamicHTML 辞典,
秀和システム(2007).
[7]JSON:http://www.json.org/
[8]Flickr: http://www.flickr.com/
Web サービスマッシュアップを利用した Web アプリケーションの開発（８－2）

Download Report