スライド 1

Size: px

Start display at page:

Download "スライド 1"

しょうりねごろ
7 years ago
Views:

1 実践! ワークショップ PHP で Web サービス API 勉強会 < 位置情報応用編 > 2009/09/06 Web サービス API 勉強会

2 目次事前準備宿題 common.php のアップグレード i-mode HTML Simulator II のインストールテスト地図ページ ( ストリートビュー ) の表示確認 1 時間目ストリートビューとマッシュアップストリートビューの表示基本ストリートビューで表示される方向 ( 左右 ) の指定ストリートビュー未対応の処理ストリートビューマッシュアップ事例復習 PHP と Javascript での API へアクセスされるタイミングの違いホテル旅館詳細ページに Google Maps API 通常地図の設置ホテル旅館詳細ページに Google Maps API ストビューの設置 2 時間目 GPS 位置情報の利用位置情報 GPS の概要キャリアや機種による位置情報取得方法の違い 3 キャリア対応しやすくするためのライブラリフレームワーク dms と degree の違い i-mode GPS 対応機種での実装 ( 位置情報の送信 ) i-mode GPS 対応機種での実装 ( 位置情報の受信 ) 位置情報利用例 :Google スタティックマップとの連携付近のホテルを表示する!( 楽天トラベルとマッシュアップ ) 課題演習自分オリジナルなマッシュアップサイトを作る! 3 時間目 ~4 時間目は実際に課題演習 & フリー Q&A+ 発表解説の予定 1

3 事前準備宿題当日飛ばします今回の勉強会で使用する API キーの取得やその設定情報の作成 Google Maps API 楽天トラべル携帯サイト動作確認用のシミュレーターのインストール 2

4 i-mode シミュレーター Ⅱ のインストール PC 上で簡易的に i-mode ブラウザとして携帯サイトを表示することができます 3

5 テスト地図ページ ( ストリートビュー ) の表示確認前ページまでの準備が終わったら下記フォルダ構成でファイルを設置してください htdocs loc_ouyou common.php 今回設定した common.php ファイル streetview.php.php 以下配布した loc_ouyou フォルダ内のその他勉強会用ファイルにアクセスして地図が表示されれば OKです! 4

6 1 時間目ストリートビューとマッシュアップストリートビューの基本的な使い方を覚えてほかの API とのマッシュアップのやり方までをワークを通して学びます Javascript 文を書いたり消したり修正したりしますが Javascript の文法はやりません基本的にコピペだけで操作しますレファレンス ( 使うと思われる優先度順 ) Google Maps API の例 ( 動作例とソースがわかる ) Google Maps API リファレンス ( それぞれのコードのレファレンス ) Code tml Google Maps API の概念 ( よくわからなくても大切なこと ) 5

7 ストリートビューの表示基本文法 Javascript 関数内 stpanorama = new GStreetviewPanorama(document.getElementById("streetvi ew"),{latlng:latlng}); HTML 内 <div id= streetview style= width: 400px; height: 400px;float:left; ></div> メモソース全体解説 (wackey) 指定した緯度経度ストリートビューを表示するただし最寄りのストリートビュー可能な場所を表示ワーク緯度経度の値を変えてみて違う場所での表示を確かめてください例 : 自宅付近勤務先付近等制限時間 3 分参考 Geocoding - 住所から緯度経度を検索 GoogleMaps の地図リンク URL から緯度経度を取得するほうもありただし最寄りのストリートビュー可能な場所を表示ストリートビューの地点がなければエラー Check! 作業ファイル : C: xampp htdocs loc_ouyou streetview.php 確認 URL: 参考 Google ストリートビュー API のノウハウをいくつか 6

ストリートビューで表示される方向 ( 左右 ) の指定左右の角度をつけることによって見せたい景色や建物シンボルを見せることが可能ワーク文法作業ファイル : C: xampp htdocs loc_ouyou streetview2.php 確認 URL: http://localhost/loc_ouyou/streetview2.

8 ストリートビューで表示される方向 ( 左右 ) の指定左右の角度をつけることによって見せたい景色や建物シンボルを見せることが可能ワーク文法作業ファイル : C: xampp htdocs loc_ouyou streetview2.php 確認 URL: 前ページではルノアールの前の道路を表示させたがルノアールの向かい側の建物が映っているこれをルノアールの方向 ( 洋服の青山 ) へ向けて表示させる回転角度を指定して表示するには new GStreetviewPanorama() の 2 番目のパラメータに pov:{ yaw : 回転角度 } として回転角度を指定しますこれは縦軸に体を回転させるような具合になります正数を指定すると時計回りに負数を指定すると反時計回りとなります stpanorama = new GStreetviewPanorama(document.getElementById("streetview"),{latlng:latlng,pov:{yaw:140}}) ; 好きな場所を表示し角度をつけて表示してみる制限時間 3 分ホテル前の通りを表示するならデフォルト表示をホテル全景にしておいても良いかも参考回転角度を指定して表示するいろいろな例文が充実 c/0004/index.html 7 Check!

9 ストリートビュー未対応の処理文法ストリートビュー未対応ではエラーが返され表示されないその処理を行うストリートビューのデータがない場合 Flash が入ってないブラウザの場合ストリートビュー未対応対策コピペテキスト.txt をコピペするワーク他 API などから住所を取得する場合表示できない場合にどうするかを考える表示内容を変えてみるメッセージの変更バナー広告を代替として表示する等 <script というのは Firefox でしか動かないらしい制限時間 1 分作業ファイル : C: xampp htdocs loc_ouyou streetview3.php 確認 URL: 参考 Google ストリートビュー API のノウハウをいくつか 8

10 ストリートビューマッシュアップ事例後日サイト追加真夜中ナビアイデアとして Google 公式ストリートビュー活用例 howtouse.html partners/index.html 9

ストリートビューでマッシュアップしよう! 以前の箱根温泉のサンプルをベースにより正確なホテル検索 ( 駅の最寄りホテル検索 ) そして GoogleMapsAPI を使った詳細ページ表示を行いますストリートビューももちろんやります ( そのためエリアを都心に変更します ) Google Maps http://www.google.co.

11 ストリートビューでマッシュアップしよう! 以前の箱根温泉のサンプルをベースにより正確なホテル検索 ( 駅の最寄りホテル検索 ) そして GoogleMapsAPI を使った詳細ページ表示を行いますストリートビューももちろんやります ( そのためエリアを都心に変更します ) Google Maps 楽天トラベル施設検索 API (version: ) 緯度経度検索を行うため東京駅の緯度経度は従来 : ホテルキーワードサーチ東京駅で検索したのに立川のホテルってこれから : 緯度経度でサーチ物理的に近いところをピックアップ! 10

エリアページ作成作業手順 ( 楽天トラベル API 復習を兼ねて ) 1. 改めてファイル構成の確認 2. 緯度経度を何らかの方法で取得 3. 緯度経度をあらかじめ変数に格納 4. 緯度経度検索を使用するので従来の楽天トラベルキーワード検索 API ではなく楽天トラベル施設検索 API を使用 5.

12 エリアページ作成作業手順 ( 楽天トラベル API 復習を兼ねて ) 1. 改めてファイル構成の確認 2. 緯度経度を何らかの方法で取得 3. 緯度経度をあらかじめ変数に格納 4. 緯度経度検索を使用するので従来の楽天トラベルキーワード検索 API ではなく楽天トラベル施設検索 API を使用 5. その変数をパラメータとして含んだリクエスト URL 組み立て ( 世界測地系でできるようにパラメータを指定 ) 例 : 半径 1km 以内など条件付加 6. 使用する API が変わったのでそれに応じてほかの部分調整 (str_replace XML 階層を掘る部分等 ) 7. 使用する API が変わったので表示項目の調整ワーク同時進行で作業をしながら進めていきます 11

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

14 ホテル旅館詳細ページに Google Maps API 通常地図の設置 <script src=" echo $google_maps_apikey;?>" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { // <div id="map_canvas"> と結びつけてその領域に地図を描く var map = new GMap2(document.getElementById("map_canvas")); // 指定した緯度と経度を中心ににして地図のズームレベルは 17 で描画する var latlng = new GLatLng(<?php echo $lat;?>,<?php echo $lng;?>); // 緯度経度を変数に格納 map.setcenter(latlng, 17); // 緯度経度情報とズームレベルを指定 // 彡拡大縮小のコントローラーを追加する彡 //map.addcontrol(new GSmallMapControl()); map.addcontrol(new GLargeMapControl()); // ズームのつまみ付きバージョン // 彡地図種類コントロールボタン追加彡 map.addcontrol(new GMapTypeControl()); // 彡スケールコントローラ ( 尺度定規 ) を付ける彡 map.addcontrol(new GScaleControl()); // 彡中央にマーカーを表示する彡 var marker = new GMarker(latlng); map.addoverlay(marker); // ストリートビューが可能な道を表示 //map.addoverlay(new GStreetviewOverlay()); } } </script> 表示部分 <div id="map_canvas" style="width: 500px; height: 400px"></div> 赤い部分に数値がセットされた状態でブラウザ上で Javascript が実行される必要な情報を書き込んだ ( もしくは PHP で出力させるように )Javascipt や HTML を記述 13

15 ホテル旅館詳細ページに Google Maps API ストビューの設置ワークストリートビューを設置してみましょう (2 行追加するだけですが大きさレイアウトを工夫してみてください ) 制限時間 3 分 14

16 2 時間目 GPS 位置情報の利用 2 時間目では携帯電話による GPS 位置情報を利用します 15

17 位置情報 GPS の概要位置情報簡易位置情報 GPS 基地局速い精度低いほぼすべての機種が対応人工衛星遅い精度高い対応機種少ない (au は多い ) キャリアの違いだけでなく簡易位置情報か GPS でも動作させる方法が異なる 16

18 キャリアや機種による位置情報取得方法の違いキャリアによって違うだけでなく GPS か簡易位置情報か FOMA か mova か (2G か 3G か ) といった差異でも取得方法が異なる i-mode オープン i エリア ( 簡易位置情報 ) i-mode FOMA 機種向け GPS 位置情報 au 技術情報簡易位置情報 au 技術情報 GPS 公開されてませんソフトバンク WEB&NETWORK 位置情報 ( 簡易位置情報 GPS ともに ) キャリアや機種によって自動的に位置情報取得リンクを書き換えるプログラムを作成するのが望ましい 17

php API キーキャッシュ設定 htmlspecialchars Amazon 用関数キャリア判別 DOCTYPE

19 3 キャリア対応しやすくするためのライブラリフレームワーク各 PHP ファイル最小限のコードシンプルにする common.php Mobile_Common.php API キーキャッシュ設定 htmlspecialchars Amazon 用関数キャリア判別 DOCTYPE 宣言キャリアに応じて表示文字エンコーディングやバッファ出力の処理 ( 勉強会用にオリジナルに手を加えています ) PHP 携帯サイト実践アプリケーション集 18

20 dms と degree の違い degree( 度単位 10 進法 ) 東経度 dms( 度分秒単位 60 進法 ) 東経 139 度 46 分秒携帯電話の位置情報のレスポンスは dms degree を使っている API 等を使う場合は単位を変換する必要がある変換関数を作成しそれを利用するのがラクテスト用に経度緯度の数字を用意する場合経度緯度の表示形式変換 19

i-mode GPS 対応機種での実装 ( 位置情報の送信 ) ここではシンプルに位置情報取得することを体験するためにi-mode します文法 GPS 対応機種に絞って練習 <a href="i-mode-gps2.php" lcs> 位置情報を送信 </a> i-mode シミュレーターに入力しておく ( 注 dms 単位 ) 東経 139

21 i-mode GPS 対応機種での実装 ( 位置情報の送信 ) ここではシンプルに位置情報取得することを体験するためにi-mode します文法 GPS 対応機種に絞って練習 <a href="i-mode-gps2.php" lcs> 位置情報を送信 </a> i-mode シミュレーターに入力しておく ( 注 dms 単位 ) 東経北緯 : 送信後の URL パラメータの形で PHP で値を受け取ることができる ( キャリア機種により POST だったりパラメータが異なる ) 20

22 i-mode GPS 対応機種での実装 ( 位置情報の受信 ) 文法 PHP でパラメータを受け取る処理を行い Google マップやほかの API で利用しやすい degree 単位に変換を行う $lat = $_GET['lat']; $lon = $_GET['lon']; $lat = convertdmstodegree($lat); $lon = convertdmstodegree($lon); Mobile_Common.php 内で定義していてその変数を degree 単位に変換した値を返す Degree 単位に変換すると他の API との連携が出来る楽天トラベルホットペッパー等緯度経度でリクエスト出来る API と連携可能 21

位置情報利用例 :Google スタティックマップとの連携文法書式として下記のように img タグを書く ( 位置情報基本編より ) <img src="http://maps.google.com/staticmap?center=35.65641,139.699477& markers=35.65660,139.

23 位置情報利用例 :Google スタティックマップとの連携文法書式として下記のように img タグを書く ( 位置情報基本編より ) <img src=" markers= , ,red&zoom=16&size=500x300&key=[ ここに Key を記述 ]"> モバイルの場合は &maptype=mobile をパラメータに追加することにより携帯向けに最適化される &maptype=mobile 無し &maptype=mobile ありコントラストが強くなる地下鉄の路線マークが消えるモバイル用に最適化された地図を利用 22

付近のホテルを表示する!( 楽天トラベルとマッシュアップ ) ワーク位置情報を送信して付近のホテル 5 件を一覧表示してくださいまた現在地とそのホテルの位置を表した Google マップを表示してください作業ファイル : C: xampp htdocs loc_ouyou rakuten-gps.

24 付近のホテルを表示する!( 楽天トラベルとマッシュアップ ) ワーク位置情報を送信して付近のホテル 5 件を一覧表示してくださいまた現在地とそのホテルの位置を表した Google マップを表示してください作業ファイル : C: xampp htdocs loc_ouyou rakuten-gps.php ( 送信 ) 修正不要完成品 C: xampp htdocs loc_ouyou rakuten-gps2.php ( 受信 ) 確認 URL: ( 送信 ) ( 送信 ) ヒント制限時間 15 分解説 10 分 11 時間目のホテル検索の API と同じものを使う ( ものすごく流用できる ) ただしパラメータにモバイル用の情報を返すための carrier=1 というパラメータを追加また件数は 5 件で 2 マーカーはこのような形で追記したり色を指定したり記号を指定できる markers= , ,blues , ,tinygreen , ,midyellowc とりあえず中心点は赤色で表示しそれ以外を青色などで色をつけてみる 3 余裕があればアフィリエイトリンクまで API から取り出して貼ってください 4 ブラウザ判別していないのでパラメータがついた URL であれば PC のブラウザで動作確認可能ですソースを見て img タグ内の URL が正しく生成されているか確認できます 5 余裕があれば 1,2,3,4,5 と地図とホテル情報を対応させてみてください Static Maps API デベロッパーガイド 23

25 3 キャリア対応の考え方当日の時間と相談します 24

Delphi/400開発ノウハウお教えします　Googleマップ連携によるリッチなGUIアプリ開発

Delphi/400開発ノウハウお教えします　Googleマップ連携によるリッチなGUIアプリ開発セッション No.4 Delphi/400 開発ノウハウお教えします Google マップ連携によるリッチな GUI アプリ開発株式会社ミガロ. システム事業部プロジェクト推進室小杉智昭アジェンダ Web サービス概要 Web サービスを利用するには Google マップを使ったアプリケーション例はじめに 2000 年代初めごろに登場した Web サービスは着々と利用が広がりさまざまなサービスが提供されるようになりました