Part5テキスト.indd

part.5 テキスト WebサービスAPI 勉 強 会 Google Maps APIと 他 のWebサービスとのマッシュアップ

1 位 置 情 報 系 APIと 連 携 してGoogle Mapsを 表 示 する 全 体 像 今 回 位 置 情 報 系 APIとしてじゃらんWebサービスを 使 用 し PHP を 使 ってAPIへリクエストすることとします Google Maps APIは 前 回 と 同 じくJavascriptを 使 ってAPIへリクエストを 行 います 楽 天 トラベルでホテルの 情 報 をリクエストしたときに ホテル 名 や 住 所 電 話 番 号 などの 他 に 緯 度 経 度 情 報 が 含 まれます この 緯 度 経 度 情 報 を 元 にGoogle Maps APIへリクエストを 行 います この 流 れ 段 階 を 理 解 しておきましょう つまり 地 図 を 表 示 してか ら PHPでホテル 情 報 をリクエストしても 地 図 を 表 示 する 時 点 でそ の 情 報 が 無 いから 矛 盾 が 生 じます また PHPはサーバーで 処 理 されて その 結 果 をHTMLファイル の 形 で 返 すことが 出 来 ますが JavascriptはHTMLの 中 に 含 まれて おり ユーザーのブラウザの 中 で 初 めて 動 作 します これを 利 用 すれ ば PHPで 任 意 のJavascriptを 自 在 にサーバー 側 で 生 成 してHTML に 含 んでユーザーにダウンロードさせることも 出 来 ます 2

WebサービスAPI 勉 強 会 サーバー 2リクエスト 3レスポンス じゃらん Webサービス 1リクエスト 4レスポンス ブラウザ 5リクエスト 6レスポンス Google Maps 3

2 1 時 間 目 の 作 業 の 流 れ まず1 時 間 目 では 細 かく 区 切 り 少 しずつ 機 能 を 組 み 立 てて 行 きま す 連 携 させるまでは 仮 の 値 を 設 定 して 部 品 単 位 で 完 成 させていき ます 1. 仮 の 緯 度 経 度 での 地 図 表 示 < 復 習 > 2. 仮 のホテルIDでリクエストURLを 組 み 立 てる < 復 習 > 3. まずはホテル 情 報 を 表 示 させる < 復 習 > 4. ホテル 情 報 の 中 にある 緯 度 経 度 を 文 字 として 出 力 させる < 復 習 > 5. Google Mapsに 緯 度 経 度 を 反 映 させホテル 周 辺 の 地 図 を 表 示 6. ホテルの 場 所 にマーカーを 表 示 今 までの 復 習 がベースになっています これらを 積 み 上 げて 組 み 合 わせていくことによって 1 社 のAPIだけでは 出 来 なかったことが 実 現 します ひとつずつ 部 品 を 作 って 動 作 確 認 して 前 に 進 む この 流 れが 大 切 です 次 に 作 成 したこのホテル 詳 細 ページと Part3で 作 成 したホテル 検 索 と 組 み 合 わせてみます これで ユーザーが 選 択 したホテルの 地 図 が 自 動 的 にAPIからデータを 受 け 取 って 地 図 を 書 いていくことが 実 現 します 4

WebサービスAPI 勉 強 会 とりあえずここだけ という 部 品 を 作 って 石 橋 を 叩 いて 渡 るように 少 しずつ 組 み 立 てて 連 携 させていく 一 度 に 全 部 やろうとしないのが コツ 5

3 まずは 仮 の 緯 度 経 度 の 地 図 表 示 まずは 復 習 も 兼 ねて Google Maps APIを 使 って 地 図 を 表 示 させ てみましょう 緯 度 経 度 は 仮 の 位 置 を 決 めて 表 示 させます 地 図 が 表 示 出 来 れば 後 はPHPで 緯 度 と 経 度 を 指 定 出 来 るように するだけです もし 地 図 の 大 きさ( 広 さ)やをカスタマイズしておきたい 場 合 は 後 でも 出 来 ますが 完 成 イメージが 湧 くように 今 のうちに 調 整 しておきましょう なお いきなりPHPと 絡 ませてプログラムを 組 んでいくことも 出 来 ま す が 慣 れ な い うち は 少 しず つ 組 み 上 げ て い の が 懸 命 で す ひ と つ ず つ 仮 の 数 字 やパラメータを 入 れて 動 作 を 確 認 して 積 み 上 げていくこと が 大 切 です 一 度 にすべてをやろうとすると うまくいかなかったときにその 原 因 を 究 明 するのに 考 えられる 原 因 が 多 くなってしまい 余 計 と 時 間 をか けてしまうからです 特 にPHPやJavascriptに 不 慣 れな 方 は 少 しずつ 進 めて 頭 を 切 り 替 えながら 進 めたほうが 効 率 が 良 いでしょう 先 に 目 に 見 えて 結 果 が 出 る 見 通 しがつくところから 着 手 するのが コツです 6

WebサービスAPI 勉 強 会 ワーク 1まず 前 回 の 勉 強 会 と 同 じmap.phpをコピーして 再 利 用 することを 考 えます 2サンプルファイルの/part5/templateフォルダの 中 に 今 回 のワー ク 用 に 少 しだけアレンジしたmap.phpを 用 意 しているので それを workフォルダに 入 れて 使 ってください 3 http://localhost/part5/work/map.phpと 入 力 して 地 図 が 表 示 されるか 確 認 します 7

4 仮 のホテルIDでリクエストURLを 組 み 立 てる 次 は 仮 のホテルIDを 指 定 してホテル 紹 介 ページを 作 成 します 緯 度 経 度 を 得 て Google Maps APIで 地 図 を 描 きます じゃらんWebサービスの 中 では じゃらん 宿 表 示 APIアドバンス が 詳 細 情 報 (どのクレジットカードが 使 えるか 等 )も 取 得 出 来 て ホテル 紹 介 ページの 詳 しさに 役 立 つでしょう 今 回 はその じゃらん 宿 表 示 APIアドバンス で 作 業 を 進 めて 行 きま す 扱 える 情 報 を 知 るという 意 味 でもチャレンジしてみましょう じゃらんWebサービス 宿 表 示 API アドバンス http://www.jalan.net/jw/jwp0100/jww0102.do リクエストURLの 組 み 立 ては 過 去 に 作 業 したファイルを 流 用 すると 手 早 く 進 めることが 出 来 ます リクエストURLのパラメータなど 違 う 部 分 だけを 変 えて 行 きます 今 回 はシンプルにリクエストURL 組 み 立 ての 流 れを 復 習 出 来 るよう にキャッシュロジック 無 しの 形 でサンプルソースを 組 み 立 てています 8

WebサービスAPI 勉 強 会 ワーク 仮 のホテルID,つまりじゃらん 宿 番 号 h_id に 特 定 のホテルを 指 定 しましょう 勉 強 会 会 場 近 所 のホテル ヴィラフォンテーヌ 大 手 町 の 365524( ) を 指 定 してみましょう じゃらんで 検 索 すると 小 さく 宿 ページの 右 上 に 表 示 されています 1PHPでAPIへリクエストをするプログラムを 作 るので Part1 Part3でやってきたのと 同 じように 自 分 の 設 定 が 書 かれたapiconfig. phpとapifunc.phpをworkフォルダに 入 れてください map.phpと 同 じ 階 層 に 置 くような 形 になります 2PHPの 開 始 と 終 了 をまず 記 入 します <?php?> 3apifunc.phpとapiconfig.phpを 読 み 込 みます 4リクエストURLを 組 み 立 てます 5echoで 一 度 XMLの 構 造 を 確 認 します(リクエストURLが 正 しいか の 確 認 置 換 する 対 象 を 調 べる 構 造 の 理 解 ) 6 必 要 であれば 置 換 処 理 7simple XMLで 処 理 9

5 まずはホテル 情 報 を 表 示 させる ホテル 情 報 を 取 り 出 して 表 示 することは Part.1 Part..3の 勉 強 会 でやってきたことと 同 じです 今 までと 同 じように 情 報 を 一 つずつ 取 り 出 していきます レファレンスを 読 むと 意 外 と 多 くの 情 報 が 取 り 出 せることがわかり ます 可 能 な 限 り ホテル 情 報 を 取 り 出 して 画 面 上 に 表 示 させてみまし ょう なお ここでは デザインは 気 にせず まずは 情 報 を 取 り 出 すとい うことに 専 念 してみましょう じゃらんWebサービス 宿 表 示 API アドバンス http://www.jalan.net/jw/jwp0100/jww0102.do 10

WebサービスAPI 勉 強 会 ワーク ショッピング 系 と 同 じように 情 報 がある 階 層 までのデータをXML から 抜 き 出 して 変 数 に 格 納 し foreach 文 でアイテムの 個 数 分 繰 り 返 してそれぞれの 情 報 を 表 示 させます 今 回 の 場 合 は 特 定 のホテル 指 定 のため 実 際 には1 回 だけの 処 理 になるので 繰 り 返 して 取 り 出 すわけではありません 1 繰 り 返 し 開 始 と 終 了 のPHPタグを 情 報 を 表 示 させる 場 所 の 前 後 に 挿 入 する 挿 入 する <?php foreach ($hits as $hit) {?> <?php }?> 2 情 報 を 表 示 する 場 所 に 次 のPHPタグを 挿 入 する ホテル 名 : <?php echo h($hit->hotelname);?> ホテル 施 設 コピー: <?php echo h($hit->hotelcatchcopy);?><br /> 3 好 みに 応 じて 表 示 させる 情 報 を 増 やす(クチコミ 件 数 評 点 等 ) 11

6 ホテル 情 報 の 中 にある 緯 度 経 度 を 文 字 として 出 力 させる レファレンスを 読 み 進 めていくと 緯 度 経 度 の 情 報 が 取 り 出 せること がわかります しかし じゃらんWebサービスではGoogl Maps API にそのままでは 使 えない 日 本 測 地 系 の 値 しか 取 り 出 せません その 場 合 は 日 本 測 地 系 から 世 界 測 地 系 へ 変 換 する 計 算 式 を 用 い ます しかし その 前 に 単 位 が 揃 っているかも 確 認 せねばなりません 度 分 秒 秒 ミリ 秒 これらの 単 位 や 測 地 系 の 変 換 に 対 する 計 算 が 正 しく 出 来 ないと Goog;le Mpas APIで 地 図 が 表 示 出 来 ません まずは 計 算 が 正 しく 出 来 ているか を 確 認 するために 計 算 を 行 い PHPでその 結 果 をブラウザに 表 示 してみましょう 計 算 式 参 考 : じゃらんWebサービス/チュートリアル ある 地 点 ( 緯 度 経 度 )の 近 くの 宿 泊 施 設 を 検 索 するには http://www.jalan.net/jw/jwp0200/jww0203.do 目 に 見 える 形 でおかしな 数 字 でないことを 確 認 出 来 たら それでよ うやく 地 図 と 連 携 させてみます なお この 変 換 式 はあくまでも 近 似 値 を 出 すまでであり 誤 差 が 出 ることがあります 12

WebサービスAPI 勉 強 会 ワーク 1じゃらんWebサービスから 取 得 できる 日 本 測 地 系 (ミリ 秒 )をまず 変 数 に 格 納 します この 時 ミリ 秒 を 度 に 変 換 しています 後 のことも 考 えて 冒 頭 のPHP 群 に 記 述 すると 良 いでしょう foreach ($hits as $hit) { $jx = $hit->x/3600/1000; $jy = $hit->y/3600/1000; } 2 計 算 式 に 当 てはめ 世 界 測 地 系 に 変 換 します $wy = $jy - $jy * 0.00010695 + $jx * 0.000017464 + 0.0046017; $wx = $jx - $jy * 0.000046038 - $jx * 0.000083043 + 0.010040; 3 最 後 にブラウザでHTML 文 中 にechoで 表 示 内 容 を 確 認 します 13

7 Google Mapsに 緯 度 経 度 を 反 映 させホテル 周 辺 の 地 図 を 表 示 Google Mapsと 楽 天 トラベルで 得 られた 緯 度 経 度 を 連 携 させる のはそれほど 難 しいことでは 有 りません Google Mapsを 操 作 する HTMLファイル 自 体 はサーバ 上 から 送 られてきます PHPはサーバ 上 で 動 作 してHTMLファイルを 吐 き 出 す 形 でユーザーのブラウザに 送 り 出 すことが 多 いです その 流 れを 理 解 した 上 で 手 順 ( 流 れ)を 組 み 立 てて 行 きます 緯 度 経 度 の 出 力 部 分 はサーバーで 行 い Javascriptの 中 にその 緯 度 経 度 を 埋 め 込 んでユーザーのブラウザで 表 示 させます するとブラ ウザが 書 かれているJavascriptを 解 釈 してその 緯 度 経 度 での 地 図 を 表 示 するようになります 14

WebサービスAPI 勉 強 会 ワーク Google Maps API 部 分 の 緯 度 経 度 を 指 定 している 部 分 に 楽 天 トラ ベルから 得 られた 緯 度 経 度 の 値 を 出 力 させることにより 制 御 するこ とができます 具 体 的 には // 地 図 を 表 示 する 緯 度 経 度 を 指 定 する var pos = new GLatLng( 35.69109, 139.764887 ); の 部 分 の 数 値 の 部 分 に 先 程 の 楽 天 トラベルで 得 られた 値 をPHPの echoで 出 力 させます 1 上 記 の 前 後 に 世 界 測 地 系 に 変 換 された 緯 度 経 度 の 値 が 格 納 され ている 変 数 $wy,$wxをechoで 表 示 させます 解 答 : var pos = new GLatLng( <?php echo $wy;?>, <?php echo $wx;?> ); <?php echo $wy;?> 緯 度 を 表 示 する <?php echo $wx;?> 経 度 を 表 示 する 15

8 ホテルの 場 所 にマーカーを 表 示 地 図 を 表 示 する 際 ホテルの 緯 度 と 経 度 で 指 定 して 表 示 させまし た すなわち 地 図 の 中 心 地 点 がホテルの 緯 度 経 度 と 同 一 です 前 回 の 勉 強 会 と 同 様 変 数 posに 緯 度 経 度 情 報 が 含 まれているの で それを 利 用 してマーカーを 表 示 します 16

WebサービスAPI 勉 強 会 ワーク 1コメントアウトしてある 下 記 のコメントを 外 す( 下 2 行 赤 字 のみ) // マーカーを 表 示 する( 地 図 の 中 央 に) //var marker = new GMarker(pos); //g_map.addoverlay(marker); これはマーカーを 表 示 する 手 続 きであり 変 数 posに 緯 度 経 度 の 情 報 がすでに 入 れられている 17

9 2 時 間 目 の 流 れ 2 時 間 目 ではひとつずつ お 題 を 出 しながら それをどうやって 解 決 していくかをやっていきます お 題 は 下 記 3 点 です 1ホテル 検 索 フォームから 検 索 させて その 検 索 結 果 から 詳 細 ページ を 表 示 させる 2 半 径 1km 以 内 のホテルを 位 置 関 係 がわかるようにマーカー 表 示 3 最 寄 り 駅 を 調 べてみる 単 純 なホテル 図 鑑 的 なサイトを 作 るのではなく ユーザに 役 に 立 つ という 視 点 で 機 能 を 考 えます 18

WebサービスAPI 勉 強 会 19

10 ホテル 検 索 結 果 から 各 ホテル 情 報 の 詳 細 ページにリンクする 詳 細 ページのリンクURLにホテルIDをパラメータとして 付 加 すれば ホテルIDを 受 け 取 ってリクエストURLを 組 み 立 てていくことが 出 来 ま す 例 えば Part.3でホテル 検 索 を 行 いましたが そのホテル 情 報 の xmlの 中 にホテルIDが 含 まれています そのホテルIDを 含 むリンクを 作 って 詳 細 画 面 側 で$_GET 関 数 を 使 って 受 け 取 り それを 元 にリク スとURLを 組 み 立 てれば ユーザーがクリックしたホテルの 詳 細 情 報 を 表 示 させることが 出 来 ます ID 20

WebサービスAPI 勉 強 会 ワーク 1Part.3で 取 り 組 んだホテル 空 室 検 索 サイトをベースとしても 良 い し ゼロからでも 良 いので なんらかの 方 法 でホテルを 検 索 して 検 索 結 果 一 覧 からホテルを 選 んでクリックしたら ホテル 詳 細 情 報 ページ( 地 図 住 所 電 話 番 号 レビュー 等 )が 表 示 できるサイトを 作 ってくだ さい 21

11 半 径 1km 以 内 のホテルを 位 置 関 係 がわかるようにマーカー 表 示 特 定 の 地 点 から 半 径 1km 以 内 のホテルを 地 図 で 表 示 してみましょ う じゃらんWebサービス 宿 表 示 APIでは 緯 度 経 度 と 半 径 を 指 定 す れば それに 該 当 するホテルを 抽 出 してその 情 報 を 返 してくれるので その 情 報 を 使 って 地 図 に 表 示 します ご 近 所 ホテル 旅 館 としてリコメンドする 時 にも 良 いでしょう まず 緯 度 経 度 を 仮 に 決 めて( 観 光 スポット 会 議 場 など) そこから 半 径 1km 以 内 のホテルを 検 索 して 表 示 するロジックを 作 ります それ をワークで 取 り 組 んでみましょう 今 回 は1 時 間 目 で 緯 度 経 度 を 取 り 出 したホテルから 半 径 1km 以 内 のホテルを 抽 出 してみます 緯 度 経 度 は 変 換 前 のじゃらんで 使 用 して いる 日 本 測 地 系 (ミリ 秒 )でリクエストします 22

WebサービスAPI 勉 強 会 ワーク 11 時 間 目 の 緯 度 経 度 を 取 得 したロジックの 後 でリクエストURLを 組 み 立 てます $url= http://jws.jalan.net/apiadvance/hotelsearch/ V1/?key=$jalan_apikey&x=$hit->X&y=$hit->Y&range=1 ; $xml = @simplexml_load_file($url); $hitsother = $xml->hotel; $hitsはファイルの 後 半 でメインホテルの 表 示 に 使 うので 違 う 変 数 名 $hitsotherに 半 径 1km 以 内 の 複 数 ホテルの 情 報 を 格 納 します 2 追 加 のマーカーを 表 示 させます // マーカーの 追 加 部 分 を 再 利 用 します また 日 本 測 地 系 から 世 界 測 地 系 へ 変 換 する 式 もコピペで 使 いまわし ます( 本 日 は 触 れませんが 関 数 化 するほうが 望 ましい) 3ホテル 情 報 一 覧 を 表 示 させます デフォルトのレスポンス 件 数 が10 件 なので10 件 以 上 あるときはす べて 表 示 されない 表 示 件 数 を 多 めにリクエストすると 良 いでしょう 23

12 最 寄 り 駅 を 調 べてみる 最 寄 り 駅 検 索 するのに 便 利 な SimpleAPI vol.2 最 寄 り 駅 Webサ ービスを 利 用 します SimpleAPI 最 寄 り 駅 Webサービス http://map.simpleapi.net/ このAPIを 使 えば 緯 度 経 度 から 最 寄 り 駅 を 調 べるだけでなく そ の 路 線 や 方 角 なども 分 かります 最 寄 り 駅 がわかれば そこからのル ートもなんとなくわかりそうです なお 最 寄 り 駅 検 索 APIは 世 界 測 地 系 日 本 測 地 系 ともに 対 応 して いますが 地 図 と 親 和 性 の 高 い 世 界 測 地 系 をなるべく 使 っていた 方 が 良 いでしょう 24

WebサービスAPI 勉 強 会 ワーク 1リクエストURLを 組 み 立 てます 2simpleXMLで 駅 名 を 取 得 し 表 示 します 必 要 に 応 じて 都 道 府 県 名 や 路 線 方 角 なども 取 り 出 してみてください ホテル 情 報 を 提 供 しているAPIでは 最 寄 り 駅 情 報 やアクセス 情 報 を 提 供 していることが 多 いのでホテルの 交 通 案 内 でこのAPIを 使 うこと はあまり 無 いでしょう 逆 に 観 光 施 設 と 最 寄 り 駅 ホテルの 場 所 の 位 置 関 係 がわかるコンテンツを 作 るのには 適 しているかもしれません 25

13 位 置 情 報 から 近 所 のホテル 表 示 HTML5では 位 置 情 報 をブラウザで 送 信 する 機 能 が 実 装 されます 正 確 には HTML5 の Geolocation APIで 現 在 地 の 緯 度 経 度 を 取 得 してその 情 報 を 元 に 何 らかのアクションを 起 こすことが 出 来 ます ( 現 時 点 ではFirefox,Google Chrome,iPhone Safariなどが 対 応 している) 携 帯 のGPSや 簡 易 位 置 情 報 送 信 機 能 で 現 在 地 を 送 り 何 らかの 結 果 を 得 ることと 同 じようなことがノートパソコンやスマートフォンなど でも 出 来 るようになります 参 考 : HTML5 Geolocation API で 緯 度 経 度 を 取 得 地 図 を 表 示 してみ た http://mtl.recruit.co.jp/blog/2010/05/html5_geolocation_ api.html デモ http://www.kawa.net/works/geo/html5geomap.html 26

WebサービスAPI 勉 強 会 ワーク 1 位 置 情 報 を 送 信 するJavascriptロジックを 組 み 込 みます 2 位 置 情 報 を 送 信 するリンクを 設 定 します 例 : <a href= javascript:showlocationtomap() style= fontweight: bold; > 現 在 いる 場 所 を 送 信!</a> <br/> <div id= msg style= font-size: 10px;font-weight: bold;margin-left:10px; ></div> 27

14 3 時 間 目 ワークのネタ 3 時 間 目 のワークは 今 までやってきたことを 応 用 して 下 記 項 目 にチャ レンジしてみてください < 案 > 地 図 だけでなくストリートビューとも 連 携 させて 表 示 させる お 目 当 てのホテル(レビュー 対 象 ホテル)が 満 室 だったら 近 所 の 空 室 ホテルをリコメンドするブログパーツ 最 寄 り 駅 とホテルを 表 示 し その 経 路 をGoogle Maps APIの 機 能 を 使 って 表 示 させてみる ホテルではなく 飲 食 店 や 美 容 室 などで 同 じようなことを 実 現 して みる 今 日 この 時 間 で 自 分 のサイトに 反 映 出 来 そうな 企 画 機 能 その 他 チャレンジしてみたいものなんでも 28

WebサービスAPI 勉 強 会 ワーク 29