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）