HTML5 Geolocation API で      実装する、   『みせたんGPS』                   検索 株式会社みどり Space-i 事業部      竹内 康児
「ネイティブアプリ」と「Web アプリ」• ネイティブ・アプリケーション デバイス(PC・スマホ)上で稼働するアプリ。 C, Java などで開発。インストール必須。 動作が高速。豊富な機能が使える。• Webアプリケーション サーバ上で稼働す...
「ネイティブアプリ」と「Web アプリ」• ネイティブ・アプリケーション  デバイス(PC・スマホ)上で稼働するアプリ。  C, Java などで開発。インストール必須。  動作が高速。豊富な機能が使える。             HTML5で...
HTML5 API
HTML5 Geolocation API• ユーザーの位置情報を扱うためのAPI• これ以前にも、位置情報を扱うことは出来たが、 各  携帯キャリア独自の規格であったためキャリアごと  の仕様に合わせる必要があった。• GPSだけでなく、無線...
API を活用するメソッド//ユーザーの現在の位置情報を取得  navigator.geolocation.getCurrentPosition(  successCallback, errorCallback );・この JavaScript...
「みせたん」に実装してみました。• 1. 現在地を取得して表示
• 2. 現在地から、半径1km 以内のお店を検索。
位置をGoogle マップに表示する JavaScriptnavigator.geolocation.getCurrentPosition(function(position){   cur_lat = position.coords.lati...
まとめ• HTML5 は、まだ対応していないブラウザも多  く、仕様も最終的な形にはまとまっていないが、  iOS、Android などのスマートデバイス環境に  置いてはほぼ標準である。• 有効に使える機能も多いため、今後も注目し  ていく必...
[PR] 地域のタウン誌向けスマートフォン対応 O2O プラットフォームなら、http://system.misetan.info/
Upcoming SlideShare
Loading in …5
×

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

1,943
-1

Published on

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

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,943
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×