モダンブラウザで使う「Geolocation API」前編 このエントリをはてなブックマークに登録

2010年07月16日

もりもりもりもり / , , , , , , ,

(2011/04/15 追記)
広義の HTML5、狭義の HTML5 について追記しました

もりやまです。
最近比較的余裕があるので色々調べたりしているのですが、今回はブラウザの位置情報取得機能(Geolocation API)について調べてみました。
携帯端末では昔から結構使われていましたが、今回調べてみたところ、ほとんどのモダンブラウザが対応していることがわかりました。
というわけで、ここにまとめてみます。

Geolocation API とは

ホストデバイスに関連する地理的な位置情報へのスクリプトによるアクセスを提供する API です。
ザックリ言ってしまうと、ブラウザ上で動く JavaScript から現在の位置情報を取得するためのAPI の仕様、ということです。
W3C で策定中の規格で、現在は最終草案(Last Call Working Draft)の段階です。
よく「HTML5 の Geolocation API」と書かれていますが、狭義の HTML5 の仕様には含まれていません

http://isgeolocationpartofhtml5.com/

(2011/04/15 追記)

「狭義の HTML5」については以下のページが参考になるかと思います。

「広義の HTML5」については以下のページが参考になるかと思います。

対応状況

2010/6/25 時点で、PC 用のブラウザでは以下のものが対応しているようです。

  • Firefox 3.5〜
  • Google Chrome 5.0.375.70〜
  • Safari 5.0〜
  • Opera 10.60〜

Internet Explorer は 9 の developer preview 1 から使えるようですが、こちらは実際に動作する環境が手元にないため未確認です。

一方、モバイル用のブラウザでは Mobile Safari は iPhone OS 3.0 から、Chrome Lite は Android OS 1.0 から使えるようです。

使ってみる

Geolocation API の仕様で規定されている API は、現在のところ 3 つしかありません。

navigator.geolocation.getCurrentPosition
現在の位置情報を取得する
navigator.geolocation.watchPosition
定期的に位置情報を取得する
navigator.geolocation.clearWatch
watchPosition で定期的に取得しているのを止める

ただ現在位置の座標データを取得して表示するだけではつまらないので、Google Maps API と組み合わせてデモを作ってみました。
まずは getCurrentPosition を使ったものから。

http://hawk.kray.jp/glapi_demo/

ページを表示すると、対応ブラウザであれば現在位置を中央にマッピングして、その住所が表示されると思います。
(住所は複数取得した中から最も詳細なデータを含むものを選択しているだけなので、それが実際に正しい住所かどうかはわかりません)

getCurrentPositionデモ

次に watchPosition / clearWatch を使ったものを。

http://hawk.kray.jp/glapi_demo/watch.html

マップの下の追跡開始をクリックすると、移動したルートをトレースして行きます。
こちらは移動できないとわかりにくいので、iPhone や Android で上記のページをブラウザで表示して、追跡開始した状態で歩き回ってみてください。
移動したルートに線が引かれていくと思います。
以下は吉祥寺から井の頭線に乗って、iPhone でトレースしてみた結果です。

watchPositionデモ1

吉祥寺を出た直後になぜか北東へ向かって進んでしまっていますが、しばらくすると正しい位置に戻りました。
三鷹台以降はほぼ線路に沿ってトレースされています。

以下は浜田山でトレースをしている状態で iPhone をロックして、明大前で復帰した時の状態です。

watchPositionデモ2

浜田山から一度西へ進んで、そこから明大前まで一直線です。
iOS4 になってマルチタスクに対応したとはいえ、Safari でもバックグランドで動作し続けることはできないようです。

どちらのページも HTML にすべてのコードが書いてあるので、興味がわいたら覗いてみてください。

Google Maps API V3

ここのところ新しく Google Maps API を使う機会がなかったので全然知らなかったのですが、今回デモを作成するために Google Maps API のキーを取得しようと思ってアクセスしたところ、(1 年も前に!)API のバージョンが 3 になっていて、API キー無しで使えるようになっていました
他にも API がすべて google.maps オブジェクトのメソッドになっていたりと、大分大きな改修になっているようです。
キーが不要になったのは、開発環境・ステージング・本番のそれぞれでキーを切り替えたりする必要がなくなるので、作る側からしたらとても楽になったと思います。


正直、位置情報の取得がこんなに簡単にできるものだとは思っていませんでした。
誤差は結構あるので、重要なデータとしては使えなさそうですが、多少の誤差が許されるのであれば、いろいろとウェブアプリケーションの幅が広がりそうです。
後編では、各 API の説明と、もう一つデモを紹介したいと思います。

Geolocation API Specification

http://www.w3.org/TR/geolocation-API/

関連記事

クレイについてもっと知りたい方は…

  1. クレイの3つの強みを見てみる。
  2. WEBシステムのことなら何でもご相談ください。

「いいね!」で応援よろしくお願いします!

このエントリーに対するコメント

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


トラックバック
  1. モダンブラウザで使う「Geolocation API」前編 | KRAY Inc | とっても! ちゅどん(雑記帳)2010/07/16, 4:25 PM

    […] モダンブラウザで使う「Geolocation API」前編 | KRAY Inc […]

  2. links for 2010-07-16 « 個人的な雑記2010/07/17, 7:04 AM

    […] モダンブラウザで使う「Geolocation API」前編 | KRAY Inc (tags: geolocation apis browsers) […]

  3. モダンブラウザで使う「Geolocation API」後編 | KRAY Inc2010/07/26, 12:08 PM

    […] もりやまです。 前回は「Geolocation API」の概要と、実際に使ってみたデモを紹介しました。 今回はもう少し突っ込んで、各 API の説明と、住所入力フォームへ現在の位置情報から参照し […]

  4. スマートフォンとHTML5~Geolocation API~ | togura-Test2012/07/26, 4:43 PM

    […] ~ 引用:モダンブラウザで使う「Geolocation API」前編 […]

we use!!Ruby on RailsAmazon Web Services

このページの先頭へ