HTML5で位置情報を継続的に取得する

こんにちは、@yoheiMuneです。
今日はHTML5のGeoLocationAPIを利用した位置情報取得、第2弾。
継続的に位置情報を取得する方法を試してみたので、それをブログに残しておきたいと思います。

HTML5の位置情報を取得する機能とは

GeoLocation APIという機能を使う事で、Web画面でJavaScriptを利用する事で、位置情報（経度や緯度など）を取得出来るようになります。"HTML5で位置情報を取得する"をご参照ください。

継続的に位置情報を取得するには

HTML5で位置情報を継続的に取得するには、navigator.geolocation.watchPositionメソッドを利用して位置情報を取得します。

// watch Position.
var watchId = null;
var watchButton = document.querySelector("#watchButton");
watchButton.addEventListener("click", function(){
  alert("位置情報取得を開始します");
  var options = {enableHighAccuracy:true, maximumAge:0}
  watchId = navigator.geolocation.watchPosition(wSuccessFunc,wFailureFunc);//,options);
}, false);

watchPositionメソッドの引数には、以下を指定します。

引数名	意味	備考
successFunc	位置情報取得成功時に呼ばれるコールバック関数	位置情報取得の度に呼び出される
failureFunc	位置情報失敗時に呼ばれるコールバック関数	オプション(=指定しなくても良い)。一度この関数が呼ばれたら、その後は正しい位置情報は取得出来ない。
options	watchPositionメソッドに対する振る舞いを規定するオプション	オプション(=指定しなくても良い)。精度向上、タイムアウト時間、キャッシュ時間を設定出来る

watchPositionメソッドは、IDを戻り値として返却します。このIDは、watchPositionを中止する際に（clearPositionメソッドコール時に）利用します。

位置情報成功時のコールバック関数

例えば以下のように実装します。

function wSuccessFunc(position){
  var status = "";
  for(var prop in position.coords){
    status += prop + ": " + position.coords[prop] + "<br>";
  }
  status += "<br>";
  var str = document.querySelector("#statusArea2").innerHTML;
  document.querySelector("#statusArea2").innerHTML = str + status;
}

引数のoption.coordsに位置情報が格納されており、ここではその情報をページへ出力しています。options.coordsから取得出来る位置情報は以下のようなものです。

プロパティ名	内容	備考
latitude	緯度
longitude	経度
altitude	高度
accuracy	位置精度	どれだけ正確な位置情報かを表す。単位はMeter
altitudeAccuracy	高度精度	高度の正確性を表す。単位はMeter。高度が提供されていない場合にはnull
heading	方角	北から時計回りで0<=heading<360の値で示される。動いていない場合には、NaN
speed	移動速度	1秒間あたりの水平方向への移動距離。単位はMeter

hading,speedについては、実装されていないブラウザーもあり、その場合には、nullが返されるようです|

位置情報失敗時のコールバック関数

例えば以下のように実装します。

var failureFunc = function(err){
  var errCause = "";
  switch(err.code) {
    case err.TIMEOUT:
      errCause = 'Timeout';
      break;
    case err.POSITION_UNAVAILABLE:
      errCause = 'Position unavailable';
      break;
    case err.PERMISSION_DENIED:
      errCause = 'Permission denied';
      break;
    case err.UNKNOWN_ERROR:
      errCause = 'Unknown error';
      break;
  }
  alert("位置情報取得に失敗しました。原因: " + errCause + " " + err.message);
}

引数のerrには、エラーコード(err.code)とエラーメッセージ(err.message)が格納されており、それを利用してエラー原因をユーザーへ通知しています。エラーメッセージは、さらに、ユーザーに「だからどうしろ」という情報も与えると、より親切ですね〜。

watchPositionを停止するclearPositionメソッド

watchPositionメソッドで継続的に位置情報を取得する必要がなくなれば、clearPostionメソッドを呼んで、位置情報取得を終了します。例えば以下のように実装します。

// clear watch.
if (watchId !== null){ // watchId is a global variable.
  navigator.geolocation.clearWatch(watchId);
  watchId = null;
  alert("位置情報取得を終了しました");
}

navigator.geolocation.clearWatchメソッドに、watchPositionメソッドの戻り値であるwatchIdを渡し、位置情報取得を終了します。

最後に

継続的に位置情報を取得する事で、ランニングコースの計測など色々と楽しいことが出来そうです。自分の手元のスマートフォンで試したところ、watchPositionで位置情報を計測中に端末が待機状態になっても、位置情報を継続して取得しているようでした。
HTML5の周辺機能として、今後の使い方が楽しみな機能の一つです(*ﾟ▽ﾟ)ﾉ

運営しているサイトです。どうぞよろしくお願いします(*´∇｀*)
HTML5Learners：HTML5を学び合うFacebookPage
HTML5サンプルページ：作成したサンプルを載せているサイト
YoheiM.NET：技術情報を中心に情報発信サイト
cooking_bot：料理情報をつぶやくTwitterアカウント