モダンブラウザで使う「Geolocation API」前編

（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」については以下のページが参考になるかと思います。

• 1.1 Is this HTML5? — 1 Introduction — HTML Standard
• keypoints html5

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

• W3C HTML5 Logo
  8 つの技術クラスの中の DEVICE ACCESS CLASS に Geolocation API が含まれていますが、仕様としてそういったクラスが定義されている部分は見当たりませんでした。
• NEWT＝HTML5＋CSS3＋SVG＋XHR2＋Web Sockets＋etc… — Publickey

対応状況

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/

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

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

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

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

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

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

浜田山から一度西へ進んで、そこから明大前まで一直線です。
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/