位置情報を取得する

最近の傾向を見ていると、PCとスマートフォンでOSやブラウザの規格を一致させる方向に進んでいるように思えます。

そのため、位置情報や通知を必要としないPC環境で、スマートフォンアプリのような確認画面が出てくるようになりました。例えば、それは、『通知を受けますか？』であったり、『現在地の情報を送信しますか？』であったりします。

持ち歩く事もないPCで位置情報を共有されても困るし、仕事するか電源落としているかでしかないPCで通知されても困ります。

でも、逆に考えると、PC環境向けにWebサイトを作る感覚で、スマートフォンアプリ感覚で使えるようなWebサイトが作れるという事です。

ここでは標準のHTML5と簡単なJavaScriptで、現在地を調べる事ができるAPIを紹介します。

Geolocation API

このAPIはブラウザを起動している地点の位置情報を、経度と緯度の座標で取得できます。Chrome、Safari、FireFOX、Microsoft Edgeなど主要ブラウザに対応していますが、以下の条件下でのみ扱う事ができます。

以上の条件から考えると、持ち歩けて、位置情報を取得する機能がついているスマートフォン用のWebサイト向けな機能と言えます。

位置情報の取得方法

使用方法は簡単です。
まずは、以下のようにして、実行環境がGeolocation APIに対応しているかどうか確認します。

if(navigator.geolocation) {
 //Geolocation APIは実行可能です。
}else{
 //この環境はGeolocation APIに対応していません
}

APIが対応している事が確認できたら、次のように実行して、位置情報を取得します。

navigator.geolocation.getCurrentPosition(geoSuccess, geoError);

function geoSuccess(pos) {
 var lat = pos.coords.latitude;//緯度
 var lon = pos.coords.longitude;//経度
 var alt = pos.coords.altitude;//高度
 var acc = pos.coords.accuracy;//緯度経度誤差
 var ala = pos.coords.altitudeAccuracy;//高度誤差
 var hed = pos.coords.heading;//方角
 var spd = pos.coords.speed;//速度
}

function geoError(err) {
 switch(err.code)
 {
  case 1://ユーザーが許可しませんでした
  case 2://位置が取得できませんでした
  case 3://タイムアウト
 }
}

getCurrentPositionを実行した時に、ブラウザからユーザーの現在地の認識というアラートが出され、許可かブロックかを選択して押せるようになります。

大半のユーザーはこの時点で本能的にブロックするそうです。

そして、慌ててリロードしても、二度ととアラートは出てこなくなり、大半のユーザーはそのサイトでは位置情報対応コンテンツを使う事を諦めるそうです。

このサイトを訪れてきたユーザーに対して、急に許可を求めるアラートを出す事は望ましくありません。

位置情報取得機能をつかうと、とても魅力的である事を十分に伝えてから、ユーザーの能動的なクリック(タップ)などによって、実行するような仕組みにしておき、最初の一回で許可してもらえるようにしたほうが良いでしょう。

位置情報の変化を監視

上の例ではgetCurrentPositionを実行するたびに、位置情報を取得できますが、機器のハード的な問題で位置情報が正しく取得できない場合があります。

そんな時は、何度か実行する事で、より正確な座標が取得できたりできなかったりします。

また、ユーザーの移動によって変化する座標を連続して監視したい時は、座標の変化を監視する処理を連続実行する必要があります。

そんな時に使える便利な機能があります。watchPositionを活用すれば、正確な座標が取得できたタイミングや、位置が変更されるたびに位置情報取得が実行されるので実用的です。

geo_options = {
 enableHighAccuracy: false,//より高い精度の位置を取得する
 timeout: 5000,//タイムアウトまでの時間
 maximumAge: 0//キャッシュ可能な位置の最大経過時間
};

geo_watchid = navigator.geolocation.watchPosition(geoSuccess, geoError, geo_options);

function geoSuccess(pos){
 var lon = pos.coords.longitude;
 var lat = pos.coords.latitude;
}

function geoError(err){
 switch(err.code)
 {
  case 1://ユーザーが許可しませんでした
  case 2://位置が取得できませんでした
  case 3://タイムアウト
 }
}

watchPositionを実行した時から、APIは座標の変化を監視し続けます。この間、端末のバッテリー消費量が増えて、システムに少し負担がかかります。

必要なくなったら、以下の命令を実行して処理を破棄します。

navigator.geolocation.clearWatch(geo_watchid);