HTML5の新機能「Geolocation API」を使用して位置情報を取得する

HTML5の新機能「Geolocation API」を使用して位置情報を取得します。

HTML5が公開され、いくつかの新機能が策定されましたが、中でもその有効性が期待されているのが「Geolocation API」です。

これまでの位置情報取得技術

一昔前までは、Webブラウザで現在地を取得する方法としては、例えばマシンのIPアドレスから位置を特定する方法がありました。しくみはとても単純で、IPと位置情報の紐づけはデータベース化されており、その精度はデータ量によるというものでした。
そのため、IPがプロキシサーバで偽装しているなどの場合に、正確な位置情報を決定できないという問題などがありました。

その他理由からも、ブラウザから正確な位置情報を取得するということは、当時は困難であり、サービスコストのかかる技術だったといえます。

HTML5「Geolocation API」について

HTML5の「Geolocation API」の登場により、この分野の技術が劇的に改善します。

GeolocationはW3Cにより策定されているAPI規格であり、JavaScriptで位置情報を取得することができるAPIです。
しくみとしては、先ほどのIP情報に加えて、Wi-Fi、モバイル基地局、GPSなどあらゆる情報から位置情報を取得するため、精度のよい情報を得られます。

一見、そう聞くと複雑なコードをかかなければいけないように思えますが、少ないコードを書くだけで、さまざまな情報から自動的に位置を特定するため、実装コストも少なくて済みます。

実際にJavascriptで位置情報を取得してみる

以下、Geolocationを実装するための最小限のコードサンプルです。

navigator.geolocation.getCurrentPosition(
    function(position){
        alert(position.coords.latitude);
        alert(position.coords.longitude);
    }
);

これだけです。これだけで、現在にと緯度、経度を取得できます。

もう少し詳しく書くと以下のようになります。

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(position){
			// success
			alert(position.coords.latitude);
			alert(position.coords.longitude);
		},
		function(){
			// error
		},
		{
			enableHighAccuracy: true;
			timeout: 6000;
			maximumAge: 600000;
		}
	);
}else{
	// can't use your browser
}

はじめに、Geolocationに対応したブラウザかどうか判定します。
次に、getCurrentPositionを実行して、成功した場合の処理、失敗した場合の処理を記述します。
また、実行には精度を高めるオプションenableHighAccuracyや、タイムアウトを設定することができます。
enableHighAccuracyを有効にすると、位置情報の精度は高まりますが、レスポンスが遅くなったり、端末の消費電力も大きくなるので、注意が必要です。

その他にも、位置情報をリアルタイムでトレースするなど、複雑なしくみを実装することも可能です。

セキュリティについて

ユーザの位置情報は個人情報です。
現在、GeolocationはPC、スマートフォンの各モダンブラウザで実行可能ですが、実行する前に必ず
「あなたの位置情報を求めています。許可しますか？」
などのメッセージが表示されます。

今のところ、悪意のあるサイトで勝手に取得されるということはないようなので、安全な技術と言えそうですが、扱いには十分注意したいところです。