Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Koji Takeuchi
November 04, 2012

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

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

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

Koji Takeuchi

November 04, 2012
Tweet

More Decks by Koji Takeuchi

Other Decks in Business

Transcript

  1. 「ネイティブアプリ」と「Web アプリ」 • ネイティブ・アプリケーション デバイス(PC・スマホ)上で稼働するアプリ。 C, Java などで開発。インストール必須。 動作が高速。豊富な機能が使える。 •

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

    Webアプリケーション サーバ上で稼働するアプリ。 Web技術(HTML/CSS/JavaScript)で開発。 インストールせずブラウザで利用。 動作が遅い。機能が制限される。 HTML5で、Web アプリを ネイティブアプリのように 使いやすくする。
  3. HTML5 Geolocation API • ユーザーの位置情報を扱うためのAPI • これ以前にも、位置情報を扱うことは出来たが、 各 携帯キャリア独自の規格であったためキャリアごと の仕様に合わせる必要があった。

    • GPSだけでなく、無線LAN・WiFi・携帯電話基地局・IP アドレスなどから位置情報を取得する。 • GPS対応端末での位置情報の取得は精度が高いが、 非対応端末からの取得は精度が下がる。
  4. API を活用するメソッド //ユーザーの現在の位置情報を取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback ); ・この JavaScript メソッドで、緯度・経度などの

    詳細な位置情報が取得できる。 ・successCallback内の処理で、取得した緯度・ 経度を元にGoogle マップを表示するなど。。
  5. 位置を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); });