連載第3回目の今回は，JavaScriptを利用した位置情報の取得方法を解説します。

Geolocation APIを利用する

Geolocation APIとは，JavaScriptで位置情報を取得するAPIのことで，現在W3Cで仕様を策定中ではありますが，Firefox 3.5やGoogle Chrome 5，Safari 5など，いくつかのモダンなブラウザではすでに利用できます。

ただし，プラグインや設定などによって利用できるかどうかは変わってくるため，コードの中で利用可否の判定を行う場合は，ブラウザ名とバージョンで判定するのではなく，geolocationオブジェクトが利用可能かどうかで判定するのが一般的です。

位置情報を取り扱うgeolocationオブジェクトは，window.navigatorから取得することができます。window.navigator.geolocationについて，仕様では現在のところ以下の3つのメソッドが提供されています。

navigator.geolocation.getCurrentPosition( successCallback , errorCallback , option)

現在の位置を取得する

navigator.geolocation.watchPosition( successCallback , errorCallback , option)

位置を定期的に取得する

navigator.geolocation.clearWatch( watchId)

watchPositionの定期的な位置情報取得を止める

getCurrentPositionとwatchPositionの第一引数には，位置情報取得が成功したときのコールバック関数を指定します。コールバック関数は，以下のpositionオブジェクトを受け取ります。

緯度経度を保持するCordinatesオブジェクトは，以下のプロパティを保持しています。緯度経度に加えて，高度や方位，速度が定義されていますが，デバイスが対応していない場合は取得することはできません。

getCurrentPositionとwatchPositionの第二引数には，位置情報取得が失敗したときのコールバック関数を指定します。コールバック関数は，以下のerrorオブジェクトを受け取ります。

getCurrentPositionとwatchPositionの第三引数には，関数実行時のオプションを指定します。

watchPositionはlong値のidを返します。clearWatch 関数にこのidを渡すと，位置情報の監視を停止します。

Gearsを利用する

Gearsとは，元々GoogleがGoogle Gearsという名称で提供していたブラウザのプラグインのことです。Gearsを利用すると，ブラウザでローカルDatabaseや，スレッド処理を利用できるようになります。そのGearsの機能のひとつに，Geolocation APIがあります。

名前が，W3Cで定義されているGeolocation APIと同じですが，微妙に機能が拡張されています。

GearsのGeolocation APIを利用するには，以下のようにGeolocation オブジェクトを生成します。

var geolocation = google.gears.factory.create(‘beta.geolocation’);

使い方は，基本的にJavaScriptのGeolocation APIと同じなので，geolocationオブジェクトを生成した後のコードは，そのまま利用できます。

W3Cの定義から拡張されている内容の一つに，Addressクラスがあります。Addressクラスは，watchPositionなどで位置情報を取得した際に，Positionクラスのプロパティの一つとして取得することができ，国名や県名，市町村名など住所のテキストが構造化された形で格納されています。

Gearsを利用すると，JavaScriptのGeolocation APIに対応していないブラウザでも，位置情報を取得できます。ただし，Gearsをプラグインとしてインストールする必要があるので，利用者としては少々敷居が高くなってしまいます。

サンプルコード

ブラウザで位置情報を取得して，ページ内に表示するサンプルを以下に作成してみました。

• http://ggchop.appspot.com/static/geolocation-api.html

ページ内のstartをクリックすると，位置情報を取得してページ内に緯度経度を表示します。パソコンのブラウザだけでなく，スマートフォンのブラウザでも試してみてください。 コードは以下のURLで公開しています。

• http://github.com/chris4403/geolocation/blob/master/geolocation-api.html

サンプルコード解説

13～24行目では，navigator.gelocationがない場合はGearsが利用できるか試してみて，geolocationオブジェクトが取得できなかった場合は，アラートを表示して処理を終了します。

try {
   if(typeof(navigator.geolocation) == 'undefined'){
     geolocation = google.gears.factory.create('beta.geolocation');
   } else {
     geolocation = navigator.geolocation;
   }
 } catch(e) {}
 if (!geolocation) {
   alert('位置情報は利用できません');
   return;
 }

28～40行目では，位置情報取得が成功した場合に実行される関数を，42～48行目では，取得が失敗した場合に実行される関数を定義しています。それぞれ，取得したオブジェクトの内容をページ中に表示する内容になっています。

50～54行目では，位置情報を取得する際のオプションを指定しています。高精度な位置情報を利用するようにし，タイムアウトの時間は10秒，maximumAgeを0にすることで，キャッシュされている位置情報は利用しないようにしています。

 var option = {
   enableHighAccuracy: true,
   timeout : 10000,
   maximumAge: 0
 };  

56～59行目は，位置情報取得処理を開始する関数です。ボタンのラベルを「stop」に変更します。

 function start() {
   watchId = geolocation.watchPosition(success, error, option);
   $('#controler').attr('value','stop');
 }

61～64行目は，位置情報取得処理を停止する関数です。ボタンのラベルを「start」に変更します。

 function stop() {
   geolocation.clearWatch(watchId);
   $('#controler').attr('value','start');
 }

66行目では，ボタンにクリックしたときの処理を紐付けます。

 $('#controler').toggle(start, stop);