Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

HTML5 API

Slide 5

Slide 5 text

HTML5 Geolocation API • ユーザーの位置情報を扱うためのAPI • これ以前にも、位置情報を扱うことは出来たが、 各 携帯キャリア独自の規格であったためキャリアごと の仕様に合わせる必要があった。 • GPSだけでなく、無線LAN・WiFi・携帯電話基地局・IP アドレスなどから位置情報を取得する。 • GPS対応端末での位置情報の取得は精度が高いが、 非対応端末からの取得は精度が下がる。

Slide 6

Slide 6 text

API を活用するメソッド //ユーザーの現在の位置情報を取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback ); ・この JavaScript メソッドで、緯度・経度などの 詳細な位置情報が取得できる。 ・successCallback内の処理で、取得した緯度・ 経度を元にGoogle マップを表示するなど。。

Slide 7

Slide 7 text

「みせたん」に実装してみました。 • 1. 現在地を取得して表示

Slide 8

Slide 8 text

• 2. 現在地から、半径1km 以内のお店を検索。

Slide 9

Slide 9 text

位置を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); });

Slide 10

Slide 10 text

まとめ • HTML5 は、まだ対応していないブラウザも多 く、仕様も最終的な形にはまとまっていないが、 iOS、Android などのスマートデバイス環境に 置いてはほぼ標準である。 • 有効に使える機能も多いため、今後も注目し ていく必要がある。 • HTML5 の重要性が上がると同時に、 JavaScript の重要性もさらに向上するであろう。

Slide 11

Slide 11 text

[PR] 地域のタウン誌向け スマートフォン対応 O2O プラットフォームなら、 http://system.misetan.info/