スライド 1

実 践!ワークショップ PHPでWebサービスAPI 勉 強 会 < 位 置 情 報 基 本 編 > 2009/07/12 WebサービスAPI 勉 強 会 http://movable.biz/

目 次 事 前 準 備 宿 題 common.phpのアップグレード Google Maps APIの 登 録 において 注 意 事 項 Google Maps APIキー 取 得 (ローカルは 必 須 ) APIキーのローカルとサイト 上 の 切 り 替 え テスト 地 図 ページの 出 力 1 時 間 目 Google Maps APIの 基 本 動 作 Javascript 書 き 方 の 注 意 を 少 しだけ Google Maps APIではJavascriptを 使 う(とりあえずコピ ペでOK) PHPとJavascriptでのAPIへアクセスされるタイミングの 違 い 早 速 カスタマイズしてみよう! 地 図 の 中 央 にマーカー 表 示 情 報 ウィンドウ( 吹 き 出 し)の 表 示 タブ 付 き 情 報 ウィンドウの 表 示 複 数 地 点 にマーカーを 落 とす 住 所 から 地 図 を 表 示 させる(ジオコーディング 機 能 ) 道 案 内 を 作 る(APIの 新 機 能 でルート 案 内 を 使 おう!) クリックで@washiduアイコンを 地 図 に 貼 る(washidu じゃなくてもOK) 携 帯 での 表 示 やスタティックな 画 像 としてGoogleマッ プを 使 う HTML5の 時 代 がやってきた!~ 携 帯 以 外 の 自 宅 や ノートPCからの 位 置 情 報 利 用 2 時 間 目 プ Google Maps APIと 他 APIとのマッシュアッ 複 数 のサイト 開 発 環 境 を 作 るには? common.phpの 編 集 ホテル 詳 細 ページにそのホテルの 場 所 がわかる 地 図 を 表 示 する ( 日 本 測 地 系 だった 場 合 世 界 測 地 系 へ 変 換 する) 気 分 改 めて 普 通 に 世 界 測 地 系 緯 度 経 度 を 取 得 して 表 示 ここでオリジナル 宿 アイコンの 作 成 simpleapi 最 寄 り 駅 Webサービスで 最 寄 り 駅 を 表 示 (javascript) ホテル 一 覧 ページにそれぞれのホテルの 所 在 地 マー カーを 表 示 まとめ 参 考 資 料 緯 度 経 度 日 本 測 地 系 世 界 測 地 系 変 換 計 算 式 課 題 演 習 自 分 オリジナルなマッシュアップサイトを 作 る! 位 置 情 報 応 用 編 予 告 携 帯 GPSとの 連 動 ジオタグ 付 き 写 真 と 地 図 との 連 動 ストリートビューとの 連 動 3 時 間 目 ~4 時 間 目 は 実 際 に 課 題 演 習 &フリーQ&A+ 発 表 解 説 の 予 定 1

事 前 準 備 宿 題 当 日 飛 ばします 今 回 の 勉 強 会 で 使 用 するAPIキーの 取 得 やそ の 設 定 情 報 の 作 成 (common.phpのアップグ レード 含 む)を 行 っていただきます 2

common.phpのアップグレード 当 日 飛 ばします 今 回 の 勉 強 会 では 新 たにGoogle Maps API Keyが 必 要 となります( 次 ページで 解 説 ) ホットペッパーなどリクルートWebサービス じゃらん Webサービスを 追 加 できるための 設 定 項 目 を 増 やし ました(もう 少 し 後 のページで 解 説 ) なお キャッシュオプションや 関 数 なども 増 えているの で 新 しいcommon.phpに 過 去 のcommon.phpからAPI キーをコピペで 持 ってきてください 最 新 のcommon.phpは 下 記 からダウンロードしてくださ い http://musilog.net/webdesign/webservice/web_service_api_sample_config.php 3

Google Maps APIの 登 録 において 注 意 事 項 今 までのAPIと 異 なり 開 発 環 境 用 (ローカルPCの XAMPP 上 )で 動 かすものと 実 際 のサイト 用 の 二 種 類 のAPIキーを 取 得 する 必 要 があります サイトと 違 うAPIキーを 使 った 場 合 は 動 かないので 注 意 が 必 要 です 1. XAMPP 用 (http://localhost/) 2. サイトで 実 際 に 使 う 場 合 (http://movable.biz/) 3. 必 要 であればそのほかのサイト 用 にもAPIキーを 取 得 サイトにアップして 動 かなかった 場 合 ローカル 環 境 のAPIキーをそのまま 使 っている 可 能 性 もあります 参 照 Google Maps API について http://code.google.com/intl/ja/apis/maps/ 4

Google Maps APIキー 取 得 (ローカルは 必 須 ) 当 日 飛 ばします http://code.google.com/intl/ja/apis/maps/ へアクセス 登 録 して Google Maps API キーを 取 得 します をクリックして 取 得 します まずはXAMPPを 動 かすローカル 用 のキーを 取 得 します ローカルのドメイン 名 はhttp://localhost/なのでそれを 入 力 してAPIキーを 取 得 します 利 用 規 約 とAPIを 使 用 するサイトのURLを 入 れます 少 なくともhttp://localhost/の 分 は 取 得 してください ボタンを 押 すとKeyが 表 示 されますので これをコピーしてcommon.phpに 記 入 します 同 じドメインでもサブドメインが 違 えば その 都 度 申 請 をしてください ( 例 :テストサーバーにも 使 っているhttp://wackey.musilog.net/なども 同 様 ) 5

APIキーのローカルとサイト 上 の 切 り 替 え ローカルとサーバーアップの 時 にいちいちAPIキーを 書 き 換 えるのは 面 倒 なので あらかじめ 二 種 類 書 いておきます ローカルが 有 効 な 状 態 //$google_maps_apikey = とコメントアウト(その 行 を 無 効 にする)し もう 一 方 のコメント // を 外 すと そのAPIキーが 有 効 になる 切 り 替 えるときはコメントアウト 用 の // をもう 一 方 の 行 のアタマに 移 動 させれば 良 い (HTMLのコメントアウトと 同 じような 感 じ) サイト 公 開 前 の 勉 強 会 の 時 はローカル 用 のKeyが 有 効 になるようにサイト 公 開 用 はコメントアウトしておいてください 6

テスト 地 図 ページの 出 力 前 ページまでの 準 備 が 終 わったら 下 記 フォル ダ 構 成 でファイルを 設 置 してください htdocs loc_basic common.php 今 回 設 定 したcommon.phpファイル testmap.php.php 以 下 配 布 したloc_basicフォルダ 内 のその 他 勉 強 会 用 ファイル http://localhost/loc_basic/testmap.php にアクセスして 地 図 が 表 示 されれば OKです! 7

1 時 間 目 Google Maps APIの 基 本 動 作 位 置 情 報 の 基 本 的 なことやGoogle Maps APIの 初 歩 から 応 用 までを1 時 間 で 詰 め 込 みます Javascript 文 を 書 いたり 消 したり 修 正 したりしますが Javascriptの 文 法 は やりません 基 本 的 にコピペだけで 操 作 します レファレンス( 使 うと 思 われる 優 先 度 順 ) Google Maps API の 例 ( 動 作 例 とソースがわかる) http://code.google.com/intl/ja/apis/maps/documentation/examples/ Google Maps API リファレンス(それぞれのコードのレファレンス) Code http://code.google.com/intl/ja/apis/maps/documentation/reference.html Google Maps API の 概 念 (よくわからなくても 大 切 なこと) Codehttp://code.google.com/intl/ja/apis/maps/documentation/index.html もし 本 を 買 うとしたら(ただし 古 い) Google Maps Hacks 第 2 版 http://www.amazon.co.jp/exec/obidos/asin/4873113415/musilog04-22/ 8

PHPとJavascriptでのAPIへアクセスされるタイミングの 違 い 例 :Google Maps 例 : 楽 天 トラベル API 他 のサーバーやAPIなど(インターネット) API 6APIからレスポンス 5APIへリクエスト 3APIからレスポンス 2APIへリクエスト 1サーバーへリクエスト PCブラウザ 実 行 4HTML(Javascript 等 含 む) サーバ 実 行 Javascript HTML PHP クライアントサイドプログラム Javascript CSS サーバーサイドプログラム マッシュアップ 時 にPHPで 処 理 してからJavascriptで 地 図 データを 表 示 するという 流 れを 理 解 しておく 9

Javascript 書 き 方 の 注 意 を 少 しだけ PHPと 同 じ 部 分 // 同 じ 行 内 にこれがついた 後 はすべてコメ ントとして 扱 われる 行 ( 命 令 文 )の 最 後 に ;( 半 角 ) をつける ただし if 文 function 文 など { や } に 囲 まれる 部 分 を 持 っているものは ; つけない 半 角 英 数 字 スペース タブが 基 本 ( 文 字 出 力 コ メント 以 外 ) 全 角 スペースに 注 意 今 回 の 勉 強 会 では 基 本 的 にコピペで 行 うの で Javascriptの 文 法 は 特 にやりません とほほのJavaScriptリファレンス http://www.tohoho-web.com/js/ 10

Google Maps APIではJavascriptを 使 う(とりあえずコピペでOK) 外 部 ファイルにしているAPIキーが 含 まれた 設 定 ファイルを 読 み 込 む JavascriptでAPIへリクエストする APIキーを 指 定 する 部 分 は 設 定 ファイルより 該 当 変 数 を 表 示 させるように 書 く 地 図 を 書 く 場 所 を 指 定 地 図 を 緯 度 経 度 とズームレベルを 指 定 コメントアウト PHPと 同 じく 行 の 頭 に // でその 行 は コメントとなり たとえ 命 令 文 が 書 いて あっても 無 視 される ここでJavasriptの 関 数 を 実 行 Initialize()が 実 行 される ご 注 意 : 最 新 版 のソースではありません PHPを 使 わなくてもJavascriptだけで 地 図 を 表 示 し 操 作 することができる! 作 業 ファイル: C: xampp htdocs loc_basic testmap.php 確 認 URL: http://localhost/loc_basic/testmap.php 参 考 Google Maps API の 例 http://code.google.com/intl/ja/apis/maps/documentation/examples/ Javascriptなので ソースを 見 れば 使 い 方 がわかる 11

早 速 カスタマイズしてみよう! ワーク 地 図 で 使 いたい 部 品 パーツはJavascriptで 1 行 追 記 するだけ APIの 例 ページを 参 考 に 作 業 ファイル: C: xampp htdocs loc_basic testmap.php 確 認 URL: http://localhost/loc_basic/testmap.php 文 法 現 在 何 もコントロール 要 素 の 無 いテストマップです 上 記 のような 拡 大 縮 小 などのコントローラーをつけてください 1テストマップにはすでにコメントアウトしているコードが 書 いてあるので コメントを 外 して 表 示 させてみる(とりあえず 全 部 表 示 等 ) 2ユーザーに 使 わせたくない 機 能 は 外 してみる 3divタグのスタイルシートを 修 正 して 地 図 の 大 きさを 変 える 自 分 で 表 示 項 目 をコントロールできるということを 覚 えておく 拡 大 縮 小 のコントローラーを 追 加 map.addcontrol(new GSmallMapControl()); 拡 大 縮 小 のコントローラーを 追 加 (ズームつまみ 付 き) map.addcontrol(new GLargeMapControl()); 地 図 種 類 コントロールボタンを 追 加 map.addcontrol(new GMapTypeControl()); 尺 度 定 規 の 表 示 map.addcontrol(new GScaleControl()); 制 限 時 間 3 分 Google Maps APIの 例 のページを 参 考 にして 何 を 一 行 足 したら 機 能 追 加 できるか 確 認 してみる 参 考 Google Maps API の 例 http://code.google.com/intl/ja/apis/maps/documentation/examples/ Javascriptなので ソースを 見 れば 使 い 方 がわかる 12 Check!

地 図 の 中 央 にマーカー 表 示 文 法 マーカーの 表 示 var marker = new GMarker(latlng); map.addoverlay(marker); var lating = new GLatLng(35.672742, 139.767669);と 変 数 latingに 緯 度 経 度 の 数 値 latlngがあらかじめセットされている ワーク マーカーは 地 図 の 上 にオーバーレイで 表 示 させる 前 ページと 同 様 に 文 法 にある2 行 分 のコメントを 外 して マーカーを 表 示 させてください 制 限 時 間 1 分 この2 行 だけで 動 くのではなく Javascriptの 変 数 で データを 受 け 渡 している 点 を 理 解 しておこう Check! 作 業 ファイル: C: xampp htdocs loc_basic testmap.php 確 認 URL: http://localhost/loc_basic/testmap.php 13

情 報 ウィンドウ( 吹 き 出 し)の 表 示 文 法 情 報 ウィンドウの 表 示 map.openinfowindowhtml(map.getcenter(), 文 字 列 ); ここの 文 字 列 にHTMLタグが 入 れられる リンク 画 像 etc ワーク 情 報 ウィンドウもJavascript1 行 で 実 現 吹 き 出 し 内 はHTMLで 表 示 させることもできる 吹 き 出 しの 中 にHTMLタグで 情 報 を 入 れてみて 表 示 させて みよう( 上 記 サンプル 修 正 ワーク) 適 当 なところで<br />タグを 入 れないと 吹 き 出 しが 横 に 長 くなりすぎます Imgタグなんかもアリ! 制 限 時 間 3 分 地 図 上 の 吹 き 出 しにリンクを 仕 込 むことも 可 能 つまり Check! 作 業 ファイル: C: xampp htdocs loc_basic johowindows.php p 確 認 URL: http://localhost/loc_basic/johowindows.php 14

タブ 付 き 情 報 ウィンドウの 表 示 文 法 タブ 付 き 情 報 ウィンドウの 表 示 それぞれのタブの 名 前 と 中 身 を 変 数 に 入 れておく var infotabs = [ new GInfoWindowTab("タブA","タブAの 中 身 "), new GInfoWindowTab("タブB","タブBの 中 身 ") ]; map.openinfowindowhtml(map.getcenter(),infotabs); タブ 切 り 替 えができれば 限 られた 地 図 スペース 内 に 多 くの 情 報 を 表 示 させることができる! ここは 解 説 と 動 作 デモのみ 地 図 上 の 吹 き 出 しにリンクを 仕 込 むことも 可 能 つまり Check! 作 業 ファイル: C: xampp htdocs loc_basic tabwindows.php 確 認 URL: http://localhost/loc_basic/tabwindows.php 15

複 数 地 点 にマーカーを 落 とす 方 法 1. Geocodingでマーカー 表 示 させたい 場 所 の 緯 度 経 度 を 調 べる 2.Javascript 中 にその 緯 度 経 度 でマーカーを 表 示 する 記 述 を 追 記 する(2 行 ) var marker = new GMarker(new GLatLng(35.67224, 139.766671)); map.addoverlay(marker); 複 数 地 点 を 示 すことによって 地 図 上 で 位 置 関 係 を 示 すことが 可 能 (APIで 近 くの 店 10 件 検 索 するなど) ワーク 3か 所 ぐらい 追 加 でマーカーを 表 示 させてみよう 緯 度 経 度 を 知 るには 右 記 サイトで 作 業 ファイル: C: xampp htdocs loc_basic marker.php 確 認 URL: http://localhost/loc_basic/marker.php 参 考 Geocoding - 住 所 から 緯 度 経 度 を 検 索 http://www.geocoding.jp/ 参 考 サルでも 出 来 るGoogleMaps(グーグルマップ)API 複 数 のマーカーを 表 示 させる http://sarugooglemaps.blog99.fc2.com/blog-entry-12.html 16

住 所 から 地 図 を 表 示 させる(ジオコーディング 機 能 ) 東 京 都 中 央 区 日 本 橋 2-3-6 方 法 1.PHPで 住 所 文 字 列 を 変 数 に 代 入 ( 将 来 的 にはGETで 受 け 取 るとかAPIで 住 所 を 受 け 取 るなど の 処 理 をここで 行 う) 2.Javascript 中 にPHPでその 住 所 を 出 力 緯 度 経 度 がわからなくても 住 所 駅 名 施 設 名 などで 地 図 を 表 示 させることができる ワーク 1 自 宅 や 勤 務 先 の 住 所 をPHPソース 内 に 書 いて 表 示 させてみよ う 2 駅 の 名 前 を 入 れて 表 示 させてみよう 銀 座 駅 3 東 京 ドーム と 固 有 の 名 前 で 入 力 して 表 示 させてみよう Google Maps APIのジオコーディング 機 能 に 登 録 されていない ものは 当 然 出 てきません 作 業 ファイル: C: xampp htdocs loc_basic geocode.php 確 認 URL: http://localhost/loc_basic/geocode.php 制 限 時 間 3 分 参 考 ジオコーディングサンプル http://www.marlin-arms.com/support/gmh2/hack22-geocoding.html 住 所 だけでなく 駅 名 や 施 設 名 などでも 地 図 を 表 示 できる 参 考 ジオコーディング 事 例 http://code.google.com/intl/ja/apis/maps/documentation/examples/ 17

道 案 内 を 作 る(APIの 新 機 能 でルート 案 内 を 使 おう!) 方 法 1. script 呼 び 出 しの "v=2" の 部 分 を "v=2.x" に 変 更 2. 中 心 地 ズームレベルを 調 整 3. 下 記 をJavascript 部 分 に 追 記 directionspanel = document.getelementbyid("route"); directions = new GDirections(map, directionspanel); directions.load("from: 銀 座 to: 東 京 ディズニーランド", { locale: "ja_jp" } ); 4. 下 記 をHTMK 部 分 に 追 記 < div id="route" style="overflow: scroll; width: 400px;height: 250px;"></div> 徒 歩 & 公 共 交 通 機 関 モードは 用 意 されているが 現 時 点 では 動 かない 模 様 ルート 案 内 を 使 えばお 店 やホテルまでの 経 路 も たった4 行 で 表 示 することができる!(2009/6/19~) ワーク 出 発 地 行 先 を 書 き 変 えてみて 表 示 を 確 認 してみる 制 限 時 間 3 分 作 業 ファイル: C: xampp htdocs loc_basic route.php 確 認 URL: http://localhost/loc_basic/route.php 参 考 Google Japan Blog: ルート 案 内 API が 日 本 でも 使 えるようになりました http://googlejapan.blogspot.com/2009/06/api.html GoogleMapsAPIの 新 機 能 ルート 検 索 機 能 を 試 してみる http://blog.asial.co.jp/582/ Google Maps APIが 国 内 のルート 案 内 に 対 応! わずかなコードでルート 案 内 が http://journal.mycom.co.jp/articles/2009/06/24/googlemaps/index.html 18

携 帯 での 表 示 やスタティックな 画 像 としてGoogleマップを 使 う 方 法 書 式 として 下 記 のようにimgタグを 書 く <img src="http://maps.google.com/staticmap?center=35.65641,139.699477& markers=35.65660,139.699477,red&zoom=16&size=500x300&key=[ここ に Key を 記 述 ]"> Javascript 不 要 &imgタグのみで 表 示 Imgタグの 画 像 URLでAPIキーや 緯 度 経 度 を 指 定 ワーク マーカーの 数 を 増 やしたり 緯 度 経 度 を 変 えて 表 示 させてみる 制 限 時 間 3 分 参 考 Google Japan Blog: Google マップが 携 帯 でも 表 示 できるようになりました http://googlejapan.blogspot.com/2008/03/google_1433.html Google Static Maps API - Google Code http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/ 19

クリックで@washiduアイコンを 地 図 に 貼 る(washiduじゃなくてもOK) 作 業 ファイル: C: xampp htdocs loc_basic washiduicon.php 確 認 URL: http://localhost/loc_basic/washiduicon.php 方 法 1まず 画 像 取 得 @washidu のアイコンダウンロード http://s3.amazonaws.com/twitter_production/profile_ima ges/261050866/washidu1.jpg 2シャドウメーカーを 使 いアイコンの 影 を 生 成 しておく(via idea*idea) http://www.cycloloco.com/shadowmaker/shadowmaker.ht m 3シャドウメーカーにjavascriptコードが 表 示 されるので それをGoogle Maps を 呼 び 出 すJavascript 内 にコピペ (1 行 目 の var mapはすでに 地 図 を 描 画 しているので 不 要 ) シャドウおよびアイコン 画 像 はimages 以 下 に 置 けば 良 い が シャドウ 画 像 をダウンロードしたあと ファイル 名 がプ ログラムと 一 致 しているか 確 認 使 い 道 1 企 業 買 収 マップの 作 成 2トラベルレビューマップなどで 行 きたい 場 所 をユー ザーにオリジナルアイコンでマーキングさせてプリントアウ トできるようにする(サイトを 覚 えてもらう) 20

HTML5の 時 代 がやってくる!( 紹 介 ) IE8 以 外 のブラウザはHTML5に 対 応 し 始 めた 2010 年 頃 ~ 普 及? Firefox3.5の 位 置 情 報 送 信 デモと 情 報 http://mozilla.jp/firefox/features/geolocation/ 自 宅 PC ノートPCを 問 わず 使 っているインターネット 回 線 の IPアドレスから 現 在 地 を 取 得 して 位 置 情 報 を 使 用 することが 出 来 る すべてのプロバイダで 対 応 しているわけではない 参 考 グーグルが 賭 けるHTML 5の 未 来 http://www.atmarkit.co.jp/news/200905/28/html5.html 位 置 情 報 はJavaScriptで 取 得 可 能 に 21

2 時 間 目 Google Maps APIと 楽 天 トラベルAPIとのマッシュアップ 2 時 間 目 はいつもと 違 い 変 態 ( 顔 出 しNG)に よるライブコーディングによる 勉 強 会 を 行 いま す ライブコーディングによる 勉 強 会 とは その 場 で マッシュアップアプリケーションをどうやっ て 作 っていくかを 独 り 言 をしゃべりながら 行 う 勉 強 会 です 細 かいテクニックや 考 え 方 などを 吸 収 するの に 都 合 が 良 い 場 合 があります 22

開 発 環 境 の 紹 介 Firefox3.5+Firebug+colorzilla+IE View EmEditor Professional 8.05 XAMPP Fireworks CS4, Photoshop CS4 (Dreamweaver CS4+Virtual SVN) 23

複 数 のサイト 開 発 環 境 を 作 るには? http://localhost/hakoneonsen/ http://hakoneonsen/ 初 心 者 向 け 説 明 htdocsの 下 にサイトごとのフォルダを 作 成 し それぞれのフォルダに 短 いURLでアクセスできるようになる 上 級 者 向 け 説 明 ドキュメントルートより 上 にキャッシュフォルダを 置 くなど 複 数 のサイト 開 発 環 境 を 作 る 時 にぶつからないようにする (2 階 層 ぐらい 深 い 階 層 をドキュメントルートにすることもでき る) ローカル 環 境 で 動 かしていてもURLだけ その 気 分 が 味 わえる(?)w C: Windows System32 drive rs etc hosts C: xampp apache conf extr a httpd-vhosts.conf http://hakoneonsen/でローカル 環 境 を 見 に 行 くように 追 記 http://hakoneonsen/でアクセスしたときにその ファイルが 格 納 されている 場 所 を 指 定 する 24

common.phpの 編 集 方 法 1API 用 外 部 Javascript 読 み 込 み 部 分 をコピペ 2 指 定 された 緯 度 経 度 を 中 心 に 地 図 を 描 画 し マーカーを 表 示 するJavascriptをコピぺ 3 楽 天 トラベルAPIから 緯 度 経 度 情 報 を 取 り 出 し Javaswcript 中 に 緯 度 経 度 を 埋 め 込 む 4common.phpを 設 置 する 5common.phpが 正 しく 書 き 込 めているか 確 認 のために1 時 間 目 で 使 ったtestmap.phpを 設 置 し て 動 作 確 認 してみる ( 当 然 もともとの 箱 根 温 泉 サイトの 動 作 も 確 認 する) Google Maps API keyはほかのapiと 異 なり URLごとにkeyを 取 得 する 必 要 がある 25

ホテル 詳 細 ページにそのホテルの 場 所 がわかる 地 図 を 表 示 する ( 日 本 測 地 系 だった 場 合 世 界 測 地 系 へ 変 換 する) 手 順 一 気 にやってしまってもいいが ひとつずつ 着 実 に 確 認 しながら 積 み 上 げていく 方 が 後 でバグったときに 困 らなくて 良 い あくまでも 近 似 値 を 表 示 する 計 算 なので 誤 差 があり 日 本 を 基 準 としているので 海 外 ではまったく 使 えないレベル また 誤 差 がある 日 本 測 地 系 しか 取 得 できないAPIでは 世 界 測 地 系 の 緯 度 経 度 に 変 換 して 表 示 する 楽 天 トラベルで 緯 度 経 度 情 報 をまず 文 字 として 出 力 地 図 画 像 表 示 部 分 に 楽 天 トラベルAPIで 緯 度 経 度 の 数 値 をまず は 文 字 として 表 示 させる 1 地 図 を 表 示 したい 詳 細 ページをブラウザで 表 示 2syosai.phpを 編 集 して 一 度 リクエストURLをPHPのechoで 表 示 さ せる 3XMLの 階 層 構 造 を 見 て 緯 度 経 度 部 分 を 取 り 出 しecho 表 示 ここで 楽 天 トラベルは 日 本 測 地 系 であり Google Mapsとは 測 地 系 ( 規 格 )が 違 うことが 判 明 現 在 は 楽 天 APIで 世 界 測 地 系 で 出 力 できるようになってます 4 変 換 のための 計 算 式 を 入 れて 計 算 させてecho 表 示 確 認 5さっき 使 ったechoを 削 除 Google Maps API 使 用 1API 用 外 部 Javascript 読 み 込 み 部 分 をコピペで 追 加 2 指 定 された 緯 度 経 度 を 中 心 に 地 図 を 描 画 し マーカーを 表 示 するJavascriptをコピぺで 追 加 (1 時 間 目 のtestmap.phpのソースをコピー) 3 楽 天 トラベルAPIから 緯 度 経 度 情 報 を 取 り 出 しPHPの 変 数 に 格 納 されたものをjavascript 中 にPHPのechoで 出 力 4bodyにonloadアクションをコピペで 追 加 5マップを 表 示 するdivタグをコピペで 追 加 26

気 分 改 めて 普 通 に 世 界 測 地 系 緯 度 経 度 を 取 得 して 表 示 方 法 楽 天 トラベルのリクエストURLに 世 界 測 地 系 でレスポンスを 返 すように 指 定 する $rwsurl = "http://api.rakuten.co.jp/rws/2.0/rest?developerid=$rwsdevid&affiliateid=$rwsaffid&operation =HotelDetailSearch&version=2009-03-26&hotelNo=$num &datumtype=1"; 世 界 測 地 系 日 本 測 地 系 から 世 界 測 地 系 に 変 換 ( 誤 差 が 出 る) 2009/3/26から 楽 天 トラベルも 世 界 測 地 系 で データを 取 り 出 せるようになった 最 新 情 報 を 確 認! 27 楽 天 トラベルでは 今 はランキングなんてのもある

ここでオリジナル 宿 アイコンの 作 成 方 法 1 画 像 ソフト( 未 定 )を 使 い50 50ぐらいで アイコン 作 成 2シャドウメーカーで 影 の 画 像 を 作 成 3 先 ほどのJavascriptに 組 み 込 み アイコン 情 報 を 追 記 する + 透 過 指 定 できる 画 像 加 工 ソフトがあると 影 も 面 白 く 表 現 できる! var icon = new GIcon(); icon.image = "iyasare.gif"; icon.shadow = "shadow-iyasare.png"; icon.iconsize = new GSize(50.0, 50.0); icon.shadowsize = new GSize(76.0, 50.0); icon.iconanchor = new GPoint(25.0, 25.0); icon.infowindowanchor = new GPoint(25.0, 25.0); var marker = new GMarker(latlng,icon); map.addoverlay(marker); 28

simpleapi 最 寄 り 駅 Webサービスで 最 寄 り 駅 を 表 示 (javascript) 方 法 1 下 記 javascriptタグを 最 寄 り 駅 表 示 させたい 場 所 にコピペする 2 楽 天 トラベルAPIで 取 り 出 した 経 度 と 緯 度 をPHP のechoで 出 力 させる 例 : x=<?php echo $lng;?>&y=<?php echo $lat;?> Javascriptタグ <script language= javascript charset= UTF-8 type= text/javascript src= http://map.simpleapi.net/stationapi?x=< 経 度 >&y=< 緯 度 > &output=javascript"></script> PHP 版 のAPIもある 参 考 SimpleAPI vol.2 - 最 寄 り 駅 Webサービス & 最 寄 り 駅 モバイル 地 図 http://map.simpleapi.net/ 緯 度 経 度 から 最 寄 り 駅 路 線 や 距 離 などを 表 示 する ことが 可 能 ( 旅 館 の 表 記 と 異 なる 場 合 がある) 29

ホテル 一 覧 ページにそれぞれのホテルの 所 在 地 マーカーを 表 示 方 法 1リクエストURLにパラメータを 追 記 して 世 界 測 地 系 で 緯 度 経 度 情 報 を 取 り 出 すようにする (APIバージョンにも 注 意 最 新 は2009-04-23) 2 箱 根 湯 本 の 緯 度 経 度 を 調 べてメモしておく 3 地 図 表 示 のJavascript(testmap.php)をコピペして 箱 根 湯 本 周 辺 地 図 を 表 示 する(ズームレベルを 広 めにしておく) オプション 等 も 表 示 させたり 横 幅 540pxに 調 整 したり 4マーカーを 表 示 するJavascript 文 を 書 き phpの foreach で 宿 一 覧 を 取 り 出 して 表 示 するように それぞれの 緯 度 経 度 をマーカーに 指 定 する 5 宿 アイコンに 切 り 替 える 楽 天 トラベル( 世 界 測 地 系 )リクエストURL: http://api.rakuten.co.jp/rws/2.0/rest?developerid=$rwsdevid&affiliateid=$rwsaffid&operation=keywordhotelsearch&version=200 9-04-23&hits=30&sumDisplayFlag=1&keyword=$rwsquery4url&datumType=1 周 辺 の 旅 館 などの 分 布 を 地 図 上 で 表 現 することができる! 参 考 Geocoding - 住 所 から 緯 度 経 度 を 検 索 http://www.geocoding.jp/ 30

まとめ 基 本 的 なことはある 程 度 やる 応 用 はコピペで 使 いまわして 使 いまわしまくって 使 っ て 覚 える コピペで 使 いまわす 元 は 1ネット 上 書 籍 等 に 転 がっているもの 2 自 分 が 作 ってきたもの があるが 意 外 と2の 自 分 が 作 ってきたものが 役 に 立 つ 作 れば 作 るほど 役 に 立 つソースが 貯 金 のように 蓄 積 されていく Javascriptはソースがブラウザで 見 えるので 他 のサイ トのすごいところを 参 考 にできる( 理 解 できれば の 話 ですが) 31

課 題 演 習 : 自 分 オリジナルなマッシュアップサイトを 作 る! 楽 天 トラベル http://webservice.rakuten.co.jp/ じゃらんWebサービス http://jws.jalan.net/ws/viw/u00001 価 格.com yoyaq.com(ホテルプラン) http://apiblog.kakaku.com/yoyaqhotelplansearchv1.0.html ホットペッパーWebサービス(リクルート) http://api.hotpepper.jp/ 食 べログ http://r.tabelog.com/help/api ホットペーパーBeauty( 美 容 室 検 索 )(リクルート) http://webservice.recruit.co.jp/beauty/ スマッチ!( 物 件 情 報 検 索 ) (リクルート) http://webservice.recruit.co.jp/smatch/ カーセンサーnet (リクルート) http://webservice.recruit.co.jp/carsensor/ その 他 各 種 アフィリエイトASPのAPIで 位 置 情 報 提 供 しているもの 32

参 考 資 料 緯 度 経 度 日 本 測 地 系 世 界 測 地 系 変 換 計 算 式 世 界 測 地 系 緯 度 = 日 本 測 地 系 緯 度 - 0.00010695 * 日 本 測 地 系 緯 度 + 0.000017464 * 日 本 測 地 系 経 度 + 0.0046017 世 界 測 地 系 経 度 = 日 本 測 地 系 経 度 - 0.000046038 * 日 本 測 地 系 緯 度 - 0.000083043 * 日 本 測 地 系 経 度 + 0.010040 < 楽 天 トラベルの 日 本 測 地 系 の 場 合 > 日 本 測 地 系 緯 度 がxml 内 のlatitude 日 本 測 地 系 経 度 がxml 内 のlongitude 単 位 を 変 えるために3600で 割 った 数 値 を 上 記 公 式 に 入 れる 世 界 測 地 系 緯 度 を$lat 世 界 測 地 系 経 度 を$lngとしてPHPで 計 算 して 受 け 取 る 場 合 は 次 のような 計 算 式 となる // 楽 天 トラベルから 緯 度 経 度 情 報 を 取 り 出 し( 楽 天 の 単 位 は 秒 )3600で 割 る $latj = $item->latitude / 3600; $lngj = $item->longitude / 3600; // 世 界 測 地 系 の 緯 度 経 度 に 変 換 する $lat = $latj - 0.00010695 * $latj + 0.000017464 * $lngj + 0.0046017; $lng = $lngj - 0.000046038 * $latj - 0.000083043 * $lngj + 0.010040; 現 在 は 楽 天 トラベルは 世 界 測 地 系 でデータが 取 得 できるのでそちらを 利 用 すること 参 考 測 量 法 の 改 正 平 成 14 年 4 月 1 日 参 考 Kazuhiro's Weblog: 楽 天 トラベル 情 報 API + Google Maps API http://kazuhiro.ty.land.to/blog/2007/03/api_google_maps_api.html / 世 界 測 地 系 移 行 の 概 要 国 土 地 理 院 http://www.gsi.go.jp/law/g2000-g2000.htm 33