HTML5 Geolocation API で 実装する、 『みせたんGPS』 @ Space-i Lightning Talks 2012/10/31

地域のタウン誌向けスマートフォンO2O「みせたん」のGPS検索機能をHTML5 API を利用して実装してみました。

「みせたん」について詳しくは、、
http://system.misetan.info/

Transcript

1. HTML5 Geolocation API で 実装する、 『みせたんGPS』 株式会社みどり Space-i 事業部 竹内 康児 検索
2. 「ネイティブアプリ」と「Web アプリ」 • ネイティブ・アプリケーション デバイス（PC・スマホ）上で稼働するアプリ。 C, Java などで開発。インストール必須。 動作が高速。豊富な機能が使える。 • Webアプリケーション サーバ上で稼働するアプリ。 Web技術（HTML/CSS/JavaScript）で開発。 インストールせずブラウザで利用。 動作が遅い。機能が制限される。
3. 「ネイティブアプリ」と「Web アプリ」 • ネイティブ・アプリケーション デバイス（PC・スマホ）上で稼働するアプリ。 C, Java などで開発。インストール必須。 動作が高速。豊富な機能が使える。 • Webアプリケーション サーバ上で稼働するアプリ。 Web技術（HTML/CSS/JavaScript）で開発。 インストールせずブラウザで利用。 動作が遅い。機能が制限される。 HTML5で、Web アプリを ネイティブアプリのように 使いやすくする。
4. HTML5 API
5. HTML5 Geolocation API • ユーザーの位置情報を扱うためのAPI • これ以前にも、位置情報を扱うことは出来たが、 各 携帯キャリア独自の規格であったためキャリアごと の仕様に合わせる必要があった。 • GPSだけでなく、無線LAN・WiFi・携帯電話基地局・IP アドレスなどから位置情報を取得する。 • GPS対応端末での位置情報の取得は精度が高いが、 非対応端末からの取得は精度が下がる。
6. API を活用するメソッド //ユーザーの現在の位置情報を取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback ); ・この JavaScript メソッドで、緯度・経度などの 詳細な位置情報が取得できる。 ・successCallback内の処理で、取得した緯度・ 経度を元にGoogle マップを表示するなど。。
7. 「みせたん」に実装してみました。 • 1. 現在地を取得して表示
8. • 2. 現在地から、半径1km 以内のお店を検索。
9. 位置をGoogle マップに表示する JavaScript navigator.geolocation.getCurrentPosition(function(position){ cur_lat = position.coords.latitude; cur_lng = position.coords.longitude; var myLatlng = new google.maps.LatLng(cur_lat, cur_lng); var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); });
10. まとめ • HTML5 は、まだ対応していないブラウザも多 く、仕様も最終的な形にはまとまっていないが、 iOS、Android などのスマートデバイス環境に 置いてはほぼ標準である。 • 有効に使える機能も多いため、今後も注目し ていく必要がある。 • HTML5 の重要性が上がると同時に、 JavaScript の重要性もさらに向上するであろう。
11. [PR] 地域のタウン誌向け スマートフォン対応 O2O プラットフォームなら、 http://system.misetan.info/