藪下@@2課のガジェオタです。
環境光センサ、近接センサと解説してきましたが、今回はGeolocation APIについての記事です。
アプリを作る人の観点ではこれまでのセンサ類と比べてよく使うものではないでしょうか。よく使われるだけに使ったことがある人も多いかもしれませんね。
地理位置情報
地理位置情報APIは位置情報の取得を行うAPIです。現在位置の取得、位置情報の監視を行えます。
位置情報APIはリクエストメソッドにコールバック関数を渡してレスポンスを待つような使い方になっています。
また位置情報はプライベートな情報であるためAPIの使用時に許可を求めるプロンプトが表示されます。
地理位置情報APIはnavigator.geolocation
に属します。
パーミッションの設定
Firefox OSで地理位置情報APIを使用するにはマニフェストへのパーミッションの設定が必要です。
”permissions” プロパティに “geolocation” を記述します。
"permissions": {
"geolocation": {}
},
現在位置情報の取得
現在位置の取得にはgetCurrentを使用します。
geolocation.getCurrentPosition
は2つの引数と1つのオプション引数を取ります。
返り値はありません。
第3引数のPositionOptionに高精度の位置情報を要求するフラグを立てない場合、高速なレスポンスのために低精度の位置情報を返します。
navigator.geolocation.getCurrentPosition(successHandler, errorHandler, [PositionOption])
引数 |
概要 |
successHandler |
現在位置取得成功コールバック |
errorHandler |
現在位置取得失敗コールバック |
PositionOption |
高精度位置情報を取得するか、最大試行回数、待ち時間を表すオブジェクト |
現在位置の監視
現在位置の監視にはgeolocation.watchPosition
を使用します。
geolocation.getCurrentPosition
は2つの引数と1つのオプション引数を取ります。引数の意味はgeolocation.getCurrentPosition
と同じです。
geolocation.watchPosition
は位置に変化があると第1引数のコールバック関数を呼び出します。
返り値として監視を区別するための値を返却します(@
{aoitan_watchposition_geoloc})。
navigator.geolocation.watchPosition(successHandler, errorHandler, [PositionOption])
引数 |
概要 |
successHandler |
現在位置取得成功コールバック。callback void (Position) |
errorHandler |
現在位置取得失敗コールバック。callback void (ErrorPosition) |
PositionOptions |
高精度位置情報の取得や最大試行回数、待ち時間を指定 |
変数名 |
概要 |
enableHighAccuracy |
true:高精度位置情報を取得する、false:取得しない |
timeout |
タイムアウトまでのミリ秒数 |
maximumAge |
最大試行回数 |
監視を終了するにはgeolocation.watchPosition
が返却した値を引数としてgeolocation.clearWatch
を呼び出します。
navigator.geolocation.clearWatch(watchId)
引数 |
概要 |
watchId |
watchPositionから返却された監視ID |
位置情報
geolocation.getCurrentPosition
やgeolocation.watchPosition
での測位が成功すると、成功コールバックで位置情報が取得できます。
位置情報には座標情報と時刻が含まれます。
変数名 |
概要 |
coords |
座標情報を表すCoordinates型の値 |
timestamp |
coordを取得した時刻を表すDOMTimeStamp型の値 |
変数名 |
概要 |
latitude |
地理座標系の緯度 |
longitude |
地理座標系の経度 |
altitude |
高さ。高さが測位できない場合はnull |
accuracy |
緯度経度についての精度。非負実数 |
altitudeAccuracy |
高さの精度。非負実数。高さが測位できない場合はnull |
heading |
北に対するデバイスの向き。時計回りに0~360度を取る |
speed |
水平移動速度 |
altitude、altitudeAccuracy変数の単位はメートルです。またspeedは秒速メートル単位で取得できます。
heading変数は、向きが提供できない場合にnull、静止状態の時NaNをとります。
サンプル
function startPositioning() {
var geo = navigator.geolocation;
// まず現在地を取る
return this.getCurrentPosition().then((pos) => {
positionPrint(pos);
// 精度を上げるために監視を始める
watchId = geo.watchPosition((position) => {
positionPrint(pos);
}, (error) => {
errorPrint(error);
}, {enableHighAccuracy: true});
return watchId;
}).catch((error) => {
errorPrint(error);
});
}
function getCurrentPosition() {
var geo = navigator.geolocation;
var getLocation = new Promise((resolve, reject) => {
geo.getCurrentPosition((position) => {
resolve(position);
}, (error) => {
reject(error);
});
});
return getLocation;
}
サンプルでは低精度な代わりに素早く位置情報を取得してから高精度で位置情報監視を開始して精度を上げる動作を端的に表しています。
実際のアプリでは上記サンプルのように文字列を表示するだけでなく、マップAPIを併用して地図上で位置と範囲を表示するような形になるでしょう。
リファレンス
今回の内容は以下のURLが一時リソースになります。W3Cの仕様なので各ブラウザもこの仕様に則ります。
まとめ
地理位置情報APIの典型的な使用例は地図との連携でしょう。Firefox OSでもv1.0のころはNokiaのhere mapを搭載していたり、今でも開発ビルドではOpen Street Mapと組み合わせたテストアプリなど、地図との連携の例があります。
昨今では地図以外での利用も増えていますね。SMSなどの投稿時や写真にジオタグをつける、スタブラやIngressのような位置に基づいたゲームなどですね。
位置情報はいろいろ使えるところがあるので面白いアプリを作っていきましょう!