卒 業 研 究 論 文 JavaScript による マッシュアップサイトの 作 成 学 籍 番 号 04-13-027 氏 名 安 井 博 行
JavaScript によるマッシュアップサイトの 作 成 1 目 次 1. 概 要... 2 2. 研 究 の 背 景 意 義... 3 2.1. 研 究 の 意 義... 3 2.2. 研 究 の 背 景... 3 2.2.1. Web サービス API... 3 2.2.2. マッシュアップの 障 害 となる 問 題 点... 4 3. GooGurePepper GooGurePepper について... 7 3.1. 概 要... 7 3.2. アプリケーション 構 成... 8 3.3. Web サービス API... 9 3.3.1. ぐるなび Web サービス... 9 3.3.2. リクルート Web サービス(Hotpepper)... 10 3.3.3. Google Maps API... 10 3.4. プログラム 解 説... 11 3.4.1. 開 発 環 境... 11 3.4.2. 使 用 ライブラリ... 11 3.4.3. 中 継 用 cgi... 12 3.4.4. 苦 労 した 点 ノウハウ... 13 4. 考 察... 14 5. 参 考 文 献 資 料... 15
JavaScript によるマッシュアップサイトの 作 成 2 1. 概 要 Google アマゾンなどによる Web サービス API 公 開 を 機 にさまざまなサイトによる Web サービス API が 公 開 されはじめ これらの API を 使 用 した 新 たなサービスが 生 まれています こうした API を 組 み 合 わせ 新 たなサービスを 構 築 する という 手 法 をマッシュアップ ( 注 1)と 呼 び 新 たなサ ービス 構 築 手 法 の1つとして 注 目 を 集 めています 本 研 究 では マッシュアップサイトを 構 築 を 目 的 とし サイト 構 築 を 通 して マッシュアップサイトの 作 成 手 法 Web サービス API の 問 題 等 を 考 察 したいと 思 います ( 注 1)マッシュアップ (Web プログラミング) 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) マッシュアップ(Mashup)とは 複 数 の Web サービスの API を 組 み 合 わせ あたかも 一 つの Web サービスのようにす る 機 能 のこと 音 楽 用 語 のマッシュアップ( 複 数 の 音 源 を 組 み 合 わせるという 意 味 )を 音 源 を Web サービスに 置 き 換 え て IT の 世 界 でも 使 用 するようになった 既 存 の Web サービスを 組 み 合 わせて 短 期 間 で IT の 深 い 知 識 がなくても アプリケーション 開 発 ができることから 新 しい 開 発 技 法 として 注 目 されている
JavaScript によるマッシュアップサイトの 作 成 3 2. 研 究 の 背 景 意 義 2.1. 研 究 の 意 義 公 開 できるマッシュアップサイトの 構 築 を 目 的 といたしました 公 開 できる という 点 にこだわったのは 公 開 にいたる 制 限 問 題 も 含 めて 調 査 をし マッシュアップサイトを 構 築 される 方 の 手 助 けになれればと 思 っ たためです プログラム 言 語 は JavaScript と Ruby を 使 用 します Ruby は 後 述 の 中 継 cgi として 利 用 しますが こ の 中 継 cgi は Perl, PHP でもかまいません (Ruby は 言 語 学 習 のため 選 択 しました ) 2.2. 研 究 の 背 景 2.2.1. Web サービス API ブログ 商 品 情 報 などさまざまな 種 類 の Web サービスの API が 公 開 されています 下 記 表 1がその 一 例 です 表 1 Web サービス サービス 公 式 サイト Twitter http://twitter.com/help/api code なにがし 楽 天 はてな http://code.nanigac.com/help/api http://webservice.rakuten.co.jp/ http://www.hatena.ne.jp/info/webservices また これら Web サービスをまとめたポータルサイトも 立 ち 上 がり 始 めました ( 表 2) このポータルサイトでは Web サービス API の 情 報 収 集 紹 介 インデックス 化 や それらを 利 用 したマッ シュアップサイトの 紹 介 などが 掲 載 されています ユニークな 点 は マッシュアップサイトの 登 録 状 況 をグラ フで 表 現 している 点 です ( 図 1) 表 2 Web サービスポータルサイト MASHPEDIA Programmers Web サービス 公 式 サイト http://www.mashupedia.jp/ http://www.programmableweb.com/
JavaScript によるマッシュアップサイトの 作 成 4 図 1 マッシュアップサイト 登 録 数 (2008/2/26 ProgrammersWeb より) 2.2.2. マッシュアップ ュアップの 障 害 となる 問 題 点 マッシュアップ 構 築 には いくつかの 障 害 となる 問 題 点 があります 下 記 にそれぞれの 問 題 についてまとめ ました 1 利 用 許 諾 と 運 営 規 約 主 な Web サービス API は 無 償 ( 注 2)で 利 用 できますが 利 用 するにあたりいくつかの 決 まりがあります 利 用 する Web サービス API の 利 用 許 諾 条 件 と 運 営 規 約 が 公 開 するサービスにあうものかどうか 事 前 に 確 認 しておく 必 要 があります 具 体 的 な 例 としては 利 用 するサイトの 登 録 有 無 アクセスキーの 取 得 有 無 商 用 利 用 の 可 否 (アフリエイトを 含 む) クレジット 表 示 要 求 画 像 使 用 の 条 件 などです ( 注 2) 有 償 な Web サービス API も 存 在 します 図 2 ぐるなびの 例 ( 一 部 )
JavaScript によるマッシュアップサイトの 作 成 5 2 アクセス 仕 様 とデータ 形 式 A) アクセス 形 式 主 なアクセス 形 式 には SOAP XML-RPC REST があり Web サービス API によりサポートして いる 形 式 が 異 なります 本 研 究 では JavaScript によるサイト 構 築 であるため REST 形 式 でしようで きる Web サービス API を 対 象 としました B) データの 返 送 形 式 XML と JSON に 分 かれます JavaScript にてデータを 使 用 する 場 合 JSON ( 注 3) 形 式 であれば JavaScript のオブジェクトとしてデータを 使 用 できます また JSONP 形 式 であれば クロスドメイン 制 限 ( 後 述 )を 解 消 することが 可 能 です 表 3 データ 形 式 受 信 形 式 データ 形 式 クロスドメイン 制 限 XML XML JSON JavaScript のオブジェクト 形 式 JSONP JavaScript のオブジェクト 形 式 ( 注 3)JSON JSON(JavaScript JavaScript Object Notation on) JavaScript におけるオブジェクトの 表 記 法 をベースとした 軽 量 なデータ 記 述 言 語 JavaScript では eval()にてオブジェクトとして 取 り 込 める var json='{"results":{"results_returned":"15","genre":[{"name":" 居 酒 屋 ","code":"g001"},{"name":"ダイニングバー","code":"g002"}]}}'; var genre_list = eval ("("+ json +")"); 例 alert ( genre_list.results.genre[0].name ) 研 究 発 表 時 の 資 料 では eval( "(" + json + ")") の 左 記 赤 字 が 抜 けておりました ここに 訂 正 いたします
JavaScript によるマッシュアップサイトの 作 成 6 3 クロスドメイン 制 限 JavaScript によるサイト 構 築 で 大 きな 問 題 となるのが クロスドメイン 制 限 です クロスドメイン 制 限 とは セキュリティ 上 の 問 題 から 異 なるドメインに 存 在 するサービスとのデータ 交 換 を 禁 止 しています A B 図 3 クロスドメイン 制 限 ただし 次 の2つの 手 法 を 使 用 することで この 制 限 を 回 避 することができます 表 4 クロスドメイン 制 限 の 回 避 手 法 クロスドメイン 制 限 の 回 避 手 法 詳 細 A) JSONP と<script>タグの 動 的 生 成 <script > タグを 動 的 に 生 成 して JSON 形 式 でデータを 受 け 取 る ( 下 記 詳 細 ) B) 中 継 cgi 同 一 サーバー 内 に 中 継 用 の cgi を 作 成 し cgi 経 由 で 他 のドメイ ンの Web サービス API を 利 用 する // JSONPの 例 ( 一 部 ) var url = http://webservice.recruit.co.jp/hotpepper/genre/v1/?key=..&format=jsonp&callback=hotpepper_genre_m akeoption コールバック 関 数 を 指 定 // リクエスト 実 施 var script = document.createelement( 'script' ); script.type = 'text/javascript'; script.charset = 'utf-8'; script.src = url; document.getelementsbytagname("head")[0].appendchild( script ); :
JavaScript によるマッシュアップサイトの 作 成 7 3. GooGurePepper GooGurePepper について 3.1. 概 要 今 回 マッシュアップサイトとして GooGuruPepper という 店 舗 情 報 検 索 サイトを 作 成 しました このサイト では 店 舗 情 報 をジャンルとフリーワードで 検 索 し 検 索 結 果 を Google Map にプロットします 店 舗 情 報 は ぐるなび Hotpepper の Web サービス API を 使 用 して 取 得 しています 表 5 GooGuruPepper サイト 名 アドレス 内 容 Web2.0 Logo Creater by Alex P のサイトにてロゴ 作 成 http://h-master.net/web2.0/index.php#home http://mashup.cool.coocan.jp/ Googlemap + ぐるなび + Hotpepper のマッシュアップ = GooGuruPepper 店 舗 情 報 をジャンルとフリーワードで 検 索 検 索 結 果 を Google Map にプロット 期 間 限 定 公 開 起 動 するとまず ぐるなび Hotpepper のジャンルリストをそ れぞれのマスタ 取 得 API から 非 同 期 通 信 で 取 得 します ジャンルを 非 同 期 で 取 得 (Hotpepper も 同 様 ) フリーキーワード 欄 にキーワードを 入 力 し ボタンをクリック することにより API から 非 同 期 通 信 で 該 当 する 店 舗 情 報 を 取 得 します コールバック 関 数 内 では 以 下 の 処 理 を 行 います 店 舗 リストのページャー 作 成 店 舗 リストの 作 成 GoogleMap マーカーのクリア GoogleMap マーカー 店 舗 情 報 作 成 ズーム GoogleMap マーカーのクリックイベントの 割 り 当 て
JavaScript によるマッシュアップサイトの 作 成 8 店 舗 リストのラベルをクリックすると 該 当 する GoogleMap のマーカーが 表 示 されます 左 記 は ぐるなびの 例 です 次 の 規 定 を 守 る 必 要 がありま す 写 真 利 用 時 にはぐるなびからの 提 供 であることを 明 確 にする ぐるなびのクレジットの 表 示 掲 載 する 店 舗 情 報 にはぐるなび 店 舗 ページへリンクす る タブを 切 り 替 えることにより Hotpepper の API を 使 用 するこ とができます 左 記 は タブ 切 り 替 え 後 にキーワード 検 索 を 行 った 例 で す 3.2. アプリケーション 構 成 アプリケーション 構 成 は 図 4のようになっています マッシュアップした 点 は ぐるなびと Hotpepper の 店 舗 情 報 から 取 得 できる 世 界 測 地 系 の 緯 度 経 度 情 報 と GoogleMap の 地 図 情 報 です 図 4 アプリケーション 構 成
JavaScript によるマッシュアップサイトの 作 成 9 また Web サービス API との 連 携 手 法 は クロスドメインの 回 避 方 法 で 説 明 した 2 つの 手 法 を 用 いていま すが さらに 利 便 性 向 上 のため Ajax ライブラリを 使 用 しています ぐるなびの Web サービス API には Ruby で 記 述 した 中 継 用 cgi を JKL-Parser ( 注 4)を 使 用 して 呼 び 出 し 得 られた XML 情 報 をさらに JSON に 変 換 しています また Hotpepper の Web サービス API は Jsr_class ( 注 5)にてコールバック 関 数 経 由 で JSON 情 報 を 取 得 しています ( 注 4)JKL.ParseXML/ajax 通 信 処 理 ライブラリ 著 作 :Yusuke Kawasaki 氏 http://www.kawa.net/works/js/jkl/parsexml.html ( 注 5)JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript 著 作 :Jason Levitt 氏 http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html 3.3. Web サービス API 使 用 した Web サービス API とその 特 徴 について 以 下 にまとめました 3.3.1. ぐるなび Web サービス 表 6 ぐるなび Web サービス 公 式 サイト api.gnavi.co.jp/api/service.htm アクセス 形 式 REST データ 形 式 XML アクセスキー 必 要 (ユーザ 登 録 サイト 登 録 ) 商 用 利 用 不 可 利 用 条 件 等 クレジット 表 示 ( 写 真 使 用 時 も 含 む) 店 舗 情 報 へのリンク 使 用 した API レストラン 検 索 API http://api.gnavi.co.jp/ver1/restsearchapi/? 大 業 態 マスタ 取 得 API http://api.gnavi.co.jp/ver1/categorylargesearchapi/? [ 大 業 態 : 和 風 居 酒 屋 キーワード: 秋 葉 原 の 例 ] http://api.gnavi.co.jp/ver1/restsearchapi/?keyid= ( 取 得 したアクセスキー) レストラン 検 索 API &offset_page=1&hit_per_page=10&coordinates_mode 使 用 例 =2&category_l=CTG610&freeword=%E7%A7%8B%E 8%91%89%E5%8E%9F 大 業 態 マスタ 取 得 API http://api.gnavi.co.jp/ver1/categorylargesearchapi/? keyid=( 取 得 したアクセスキー)
JavaScript によるマッシュアップサイトの 作 成 10 3.3.2. リクルート Web サービス(Hotpepper) 表 7 リクルート Web サービス(Hotpepper) 公 式 サイト http://webservice.recruit.co.jp/hotpepper/ アクセス 形 式 REST データ 形 式 XML, JSON, JSONP アクセスキー 必 要 (ユーザ 登 録 ) 利 用 条 件 等 リクルートより 提 供 されたものである 旨 を 表 示 店 舗 情 報 へのリンク 商 用 利 用 不 可 グルメサーチ API http://webservice.recruit.co.jp/hotpepper/gourmet/v1/? 使 用 した API ジャンルマスタ API http://webservice.recruit.co.jp/hotpepper/genre/v1/? [ ジャンル: 居 酒 屋 キーワード: 秋 葉 原 の 例 ] http://webservice.recruit.co.jp/hotpepper/gourmet/v1/? key=( 取 得 したアクセスキー) レストラン 検 索 API &format=jsonp&callback=hotpepper_makeshoplist& start=1&count=10&genre=g001&keyword=%e7%a7 %8B%E8%91%89%E5%8E%9F 使 用 例 赤 字 :コールバック 関 数 http://webservice.recruit.co.jp/hotpepper/genre/v1/?ke y=( 取 得 したアクセスキー) ジャンルマスタ API &format=jsonp&callback=hotpepper_genre_makeopt ion 赤 字 :コールバック 関 数 3.3.3. Google Maps API 表 8 Google Maps API 公 式 サイト http://code.google.com/apis/maps/index.html アクセス 形 式 REST データ 形 式 JavaScript ライブラリ アクセスキー 必 要 (ユーザ 登 録 サイト 登 録 制 ) 利 用 条 件 等 1 日 50,000 ビューを 超 える 場 合 は 別 途 連 絡 ジオコーディングは 1 日 15,000 回 まで 商 用 利 用 不 可 商 用 利 用 ( 有 償 提 供 )する 場 合 は Google Maps for Enterprise を 使 用 すること
JavaScript によるマッシュアップサイトの 作 成 11 3.4. プログラム 解 説 3.4.1. 開 発 環 境 開 発 環 境 は 以 下 のとおりです HTML,JavaScript エディタとして Aptana Studio デバックには Firebug を 使 用 しました ローカル PC においての 動 作 確 認 には Apache を 使 用 しています 表 9 開 発 環 境 使 用 言 語 JavaScript, ruby 1.8.6 ブラウザ Internet Explorer 6 SP2, Firefox 2.0 ツール Aptana Studio, Firebug Http サーバ Apache 2.2 3.4.2. 使 用 ライブラリ 今 回 のマッシュアップサイト 構 築 には さまざまなライブラリを 使 用 させていただきました これらのライブラリ なくでは サイト 構 築 がでなかったと 思 います 表 10 使 用 ライブラリ ライブラリ 名 バージョン 公 開 URL Prototype.js ver 1.6.0.2 http://www.prototypejs.org/ The Yahoo! User Interface Library JKL-ParseXML jsr_class.js ver 2.5.0 ver 0.22 December 7th, 2005 タブライブラリを 使 用 http://developer.yahoo.com/yui/index.html JKL.ParseXML/ajax 通 信 処 理 ライブラリ http://www.kawa.net/works/js/jkl/parsexml.html JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag. html
JavaScript によるマッシュアップサイトの 作 成 12 3.4.3. 中 継 用 cgi ruby にて 作 成 した cgi スクリプトの 例 です #!/usr/local/bin/ruby -Ku require 'open-uri' require 'cgi' require 'rexml/document' class Hash def to_q() query = [] self.each do key,value query << "#{key}=#{value}" end query_str = query.join("&") end end def RestSearchAPI(url) doc = REXML::Document.new(open(url)) print doc end 中 継 先 の URL cgi = CGI.new url = "http://api.gnavi.co.jp/ver1/restsearchapi/" query = cgi.params query['keyid'] = cgi['keyid'] query['offset_page'] = cgi['offset_page'] query['hit_per_page']=cgi['hit_per_page'] query['freeword']=cgi.escape(cgi['freeword'].tr(' ',',')) query['coordinates_mode']=cgi['coordinates_mode'] requrl = "#{url}?#{query.to_q}" print "Content-type: text/html n n" 日 本 語 を 扱 う 場 合 (2バイト 文 字 ) RestSearchAPI(reqUrl) URI エスケープが 必 要
JavaScript によるマッシュアップサイトの 作 成 13 3.4.4. 苦 労 した 点 ノウハウ 苦 労 した 点 ノウハウについて 以 下 にまとめました 表 11 苦 労 した 点 ノウハウなど 対 象 内 容 対 応 Google Map マーカーのふきだし 内 の HTML にてスタイル シートでレイアウトを 設 定 すると 吹 き 出 しがずれ タグの Style 属 性 で 直 接 レイアウトを 指 定 する ことで 改 善 てしまう Hotpepper の JSON 形 式 データに shop.catch で 使 用 すると IE でエラーとな Hotpepper JavaScript の 予 約 語 catch が 含 まれている る shop[ catch ]で 使 用 することでエラーを API 回 避 ぐるなびでは 0 件 の 場 合 別 のデータ 構 造 で ぐるなびと Hotpepper にて 対 象 件 数 0 件 の API 仕 様 の エラーが 返 る Hotpper ではデータ 構 造 はその 扱 いが 異 なるため それぞれの 仕 様 にあわせ 違 い(1) ままで 件 数 が 0 件 となる た 対 応 が 必 要 ぐるなびでは あらかじめページ 番 号 要 素 が 戻 ページング 処 理 はそれぞれの API の 仕 様 に API 仕 様 の り 値 にて 用 意 されているが Hotpepper にはそ あわせた 対 応 が 必 要 違 い(2) の 要 素 がない
JavaScript によるマッシュアップサイトの 作 成 14 4. 考 察 マッシュアップサイト 構 築 を 通 して 感 じたことを 述 べたいと 思 います 1 意 外 と 情 報 を 結 合 することが 難 しい 今 回 ぐるなびと Hotpepper から 提 供 される 店 舗 情 報 をマージすることはしませんでした 単 純 に 両 者 か ら 検 索 した 情 報 を(いずれも 10 件 づつ 取 得 )を 地 図 にプロットすることはもちろん 可 能 です ですが 今 回 の キーワード 検 索 で 得 られた2つの 情 報 から 同 一 店 舗 のクーポン 比 較 をする ということは 現 状 各 社 から 提 供 されている API の 機 能 ではできません というのは それぞれが 管 理 する 情 報 から 先 頭 の 10 件 を 取 得 しているため そこに 同 じ 店 舗 が 含 まれて いるとは 限 らないためです また データベースでは 2 つのテーブルを 外 部 キーで JOIN することができます が Web サービス API は 単 独 の 情 報 検 索 ですので その 仕 組 みはありません ( 情 報 をローカルに 溜 め 込 むことも 運 用 規 約 で 禁 止 されています ) また 仮 に1つを 主 データとして もう1つの 情 報 検 索 をした 場 合 に 何 のメタ 情 報 をキーとするかという 問 題 もあります たとえば ぐるなびで 検 索 した 店 舗 情 報 を 元 に Hotpepper の 同 一 店 舗 情 報 を 検 索 する 場 合 は 緯 度 経 度 情 報 が 同 一 であれば( 誤 差 も 考 慮 ) 同 一 の 店 とするのか 電 話 番 号 が 同 一 であれば 同 じ 店 とするのかといった 同 じ 店 という 定 義 が 必 要 です 2 ビジネスとしてのマッシュアップ 今 回 使 用 した Web サービス API は いずれも 商 用 利 用 が 禁 止 されています マッシュアップをビジネスに つなげたいといった 場 合 に まだ 課 題 があるように 思 います これからは ビジネスを 視 点 としたマッシュアッ プについて 引 き 続 き 調 べていきたいと 思 います 3 マッシュアップをもっと 手 軽 に GooGulePepper で 作 成 した 基 盤 をベースに 他 の Web サービス API を 使 用 することは 可 能 ですが もっ と 手 軽 にマッシュアップができないかと 感 じています その 答 えの1つが Microsoft Popfly や Yahoo! Pipes などのツールではないかと 思 います 今 後 これらのツールの 動 向 についても 調 査 していきたいと 思 います
JavaScript によるマッシュアップサイトの 作 成 15 5. 参 考 文 献 資 料 マッシュアップかんたん AtoZ マッシュアップで 作 る Web 秘 密 基 地 本 田 正 純 ( 著 ) ISBN-13: 978-4903111605 標 準 Web デザイン 講 座 スタイルシート ( 標 準 Web デザイン 講 座 ) 大 藤 幹 ( 著 ) ISBN-13: 978-4798111414 DOM Scripting 古 籏 一 浩 ( 著 ) ISBN-13: 978-4774133263 Ajax 逆 引 きクイックリファレンス Web2.0 対 応 古 籏 一 浩 ( 著 ) ISBN-13: 978-4839920357 Ruby で 作 る Web アプリケーション 入 門 武 井 一 巳 ( 著 ) ISBN-13: 978-4896273533 つくるぶ http://www.tkrb.jp/ マッシュペディア http://www.mashupedia.jp/ リクルートメディアテクノロジーラボ http://mtl.recruit.co.jp/ 以 上