位置情報サービスのはじめ方

第3回 位置情報を取得してみよう(後編)

この記事を読むのに必要な時間:およそ 5 分

連載第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オブジェクトを受け取ります。

position.coords緯度経度などを保持するCordinatesオブジェクト。
position.timestamp位置情報を取得した時刻。

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

coords.latitude緯度
coords.longitude経度
coords.altitude高度
coords.accuracy正確性(値が小さいほど正確)
coords.altitudeAccuracy高度の正確性
coords.heading方位
coords.speed速度

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

error.code エラーコード
1.位置情報の取得が許可されていない
2.位置情報の取得が利用できない
3.タイムアウト
error.messageエラーメッセージ

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

option.enableHighAccuracyより高い正確性を求める(ただし,取得時間が長くなる)
スマートフォンでこのオプションを指定するとGPSを利用する
option.timeout処理のタイムアウト
option.maximumAgeキャッシュされている位置情報オブジェクトを許容するキャシュ時間

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をプラグインとしてインストールする必要があるので,利用者としては少々敷居が高くなってしまいます。

サンプルコード

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

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

サンプルコード解説

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

13~24行目

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にすることで,キャッシュされている位置情報は利用しないようにしています。

50~54行目

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

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

56~59行目

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

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

61~64行目

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

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

66行目

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

著者プロフィール

栗栖義臣(くりすよしおみ)

株式会社はてな。Java, JavaScript, ActionScript, Perlなどをたしなむ。

優秀な若手エンジニアたちに囲まれながら奮闘する毎日。

URL : http://d.hatena.ne.jp/chris4403/

技術ネタ : http://d.hatena.ne.jp/chris4403+tech/

コメント

コメントの記入