地域のタウン誌向けスマートフォンO2O「みせたん」のGPS検索機能をHTML5 API を利用して実装してみました。 「みせたん」について詳しくは、、 http://system.misetan.info/

1. HTML5 Geolocation API で
実装する、
『みせたんGPS』
検索
株式会社みどり Space-i 事業部
竹内 康児

2. 「ネイティブアプリ」と「Web アプリ」
• ネイティブ・アプリケーション
デバイス（PC・スマホ）上で稼働するアプリ。
C, Java などで開発。インストール必須。
動作が高速。豊富な機能が使える。
• Webアプリケーション
サーバ上で稼働するアプリ。
Web技術（HTML/CSS/JavaScript）で開発。
インストールせずブラウザで利用。
動作が遅い。機能が制限される。

3. 「ネイティブアプリ」と「Web アプリ」
• ネイティブ・アプリケーション
デバイス（PC・スマホ）上で稼働するアプリ。
C, Java などで開発。インストール必須。
動作が高速。豊富な機能が使える。
HTML5で、Web アプリを
ネイティブアプリのように
• Webアプリケーション 使いやすくする。
サーバ上で稼働するアプリ。
Web技術（HTML/CSS/JavaScript）で開発。
インストールせずブラウザで利用。
動作が遅い。機能が制限される。

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/