YoheiM技術やらずに終われまテン

2011-07-19 [HTML5] HTML5で位置情報を継続的に取得する

こんにちは、@yoheiMuneです。

今日はHTML5のGeoLocationAPIを利用した位置情報取得、第2弾。

継続的に位置情報を取得する方法を試してみたので、それをブログに残しておきたいと思います。

f:id:yoheiM:20110719194945j:image




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位置情報失敗時に呼ばれるコールバック関数オプション(=指定しなくても良い)。一度この関数が呼ばれたら、その後は正しい位置情報は取得出来ない。
optionswatchPositionメソッドに対する振る舞いを規定するオプションオプション(=指定しなくても良い)。精度向上、タイムアウト時間、キャッシュ時間を設定出来る

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の周辺機能として、今後の使い方が楽しみな機能の一つです(*゚▽゚)ノ


運営しているサイトです。どうぞよろしくお願いします(*´∇`*)

HTML5LearnersHTML5を学び合うFacebookPage

HTML5サンプルページ:作成したサンプルを載せているサイト

YoheiM.NET:技術情報を中心に情報発信サイト

cooking_bot:料理情報をつぶやくTwitterアカウント