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

2011-07-20 [HTML5] HTML5の位置情報取得機能の使い方のまとめ

こんにちは、@yoheiMuneです。

HTML5の関連機能であるGeoLocation APIを使いました。何個かオブジェクトがあるようですが、まとまった情報があまり無かったので、自分なりに纏めてみました。指定するオプションの内容など、知りたかった情報を集めることが出来ました。

f:id:yoheiM:20110720120612j:image




位置情報取得のためのGeoLocationオブジェクト

navigatorのgeolocationプロパティについてです。geolocationが位置情報取得機能の中心的存在となります。

interface Geolocation {
   void getCurrentPosition(in PositionCallback successCallback,
                           in optional PositionErrorCallback errorCallback,
                           in optional PositionOptions options);

   long watchPosition(in PositionCallback successCallback,
                      in optional PositionErrorCallback errorCallback,
                      in optional PositionOptions options);

   void clearWatch(in long watchId);
 };

 [Callback=FunctionOnly, NoInterfaceObject]
 interface PositionCallback {
   void handleEvent(in Position position);
 };

 [Callback=FunctionOnly, NoInterfaceObject]
 interface PositionErrorCallback {
   void handleEvent(in PositionError error);
 };

Geolocationには、3つのメソッドが定義されています。

メソッド引数1引数2引数3メソッドの振る舞い
getCurrentPosition処理成功時のコールバック関数処理失敗時のコールバック関数メソッドの振る舞いを指定するオプション位置情報を1回取得する
watchPosition処理成功時のコールバック関数処理失敗時のコールバック関数メソッドの振る舞いを指定するオプション位置情報を継続的に取得する
clearWatchwatchPositionの戻り値のIDwatchPositionを終了する

getCurrentPosition, watchPositionの第2第3引数はoptionalということで、指定しなくても良いようですね。

getCurrentPositionのサンプルは、HTML5で位置情報を取得するを参照ください。

watchPosition, clearWatchのサンプルは、HTML5で位置情報を継続的に取得するを参照ください。

処理成功時のコールバック関数には、positionというオブジェクト引数で受け取ることが出来るようです。

処理失敗時のコールバック関数には、errorというオブジェクト引数で受け取ることが出来るようです。




PositionOptionsについて

getCurrentPosition, watchPositionメソッドの第3引数に指定する内容です。

interface PositionOptions {
    attribute boolean enableHighAccuracy;
    attribute long timeout;
    attribute long maximumAge;
  };

3種類のオプションを設定出来るようですね。使い方などは、以下のようです。

オプション意味設定値備考
enableHighAccuracyより高い精度を求めるtrue / falseGPSなどを用いてより精度の高い位置情報を取得出来る。位置情報取得に時間やバッテリーがかかるので注意
timeoutタイムアウト時間ミリ秒例:3000(=3秒)
maximumAge位置情報をキャッシュする時間ミリ秒ミリ秒0を設定すると、毎回新しい位置情報を得る



Positionについて

処理成功時のコールバック関数で受け取れる内容です。

interface Position {
    readonly attribute Coordinates coords;
    readonly attribute DOMTimeStamp timestamp;
  };

2つのプロパティを保持しているようです。

プロパティ内容
coords様々な位置情報を保持するオブジェクト
timestamp位置情報を取得したタイムスタンプ(=時間)



Coordinatesについて

ひとつ上のPositionのプロパティであるcoordsに様々な位置情報が格納されています。その位置情報を格納しているのが、Coordinatesインターフェース

interface Coordinates {
    readonly attribute double latitude;
    readonly attribute double longitude;
    readonly attribute double? altitude;
    readonly attribute double accuracy;
    readonly attribute double? altitudeAccuracy;
    readonly attribute double? heading;
    readonly attribute double? speed;
  };

保持しているプロパティは、以下の通りです。

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

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




PositionErrorについて

これは、位置情報取得に失敗した際に呼ばれるコールバック関数引数に渡される内容です。

interface PositionError {
    const unsigned short PERMISSION_DENIED = 1;
    const unsigned short POSITION_UNAVAILABLE = 2;
    const unsigned short TIMEOUT = 3;
    readonly attribute unsigned short code;
    readonly attribute DOMString message;
  };

エラーコードとエラーメッセージを保持しています。また保持している定数は、エラーコードの値の意味を保持しているようです。

具体的な利用方法は、HTML5で位置情報を取得するを参考にしてみて下さい。





参考にしたサイト

以下のサイトを参考にしてみました。良き情報をありがとうございます。

W3C - Geolocation API Specification

位置情報を連続して取得してみる Waste Of Time

位置情報サービスの始め方:第3回(後編)





最後に

色々と調べてみて、すっきりした。これでようやく色々と出来そう(*゚▽゚)ノ良かったヨカッタ。

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

Facebook

HTML5LearnersHTML5を学び合うFacebookPage

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

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

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