CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Baba

私がスマートフォンを手にして一番思ったことが 位置情報サービスがとてつもなく便利だということです。
現在地から目的地までの道を検索したり、現在地から近くの施設を検索したり、自分が買いたいものを登録しておき、売っている店の近くに来ると教えてくれるアプリもあったりと 位置情報サービスは今では欠かせないサービスの1つだと個人的には思っています。

そんな位置情報の取得について フィーチャーフォンで取得しようとするとキャリアごとに対応が異なり 大変な思いをされた方もいらっしゃると思いますが みなさまご存知のとおり HTML5ではGeolocation APIで いとも簡単に取得することが可能です。

Geolocation APIの動作が確認できる ちょっと楽しげなサンプルをご用意しましたのでサンプルをご確認いただきつつ、Geolocation APIに触れてみてください。

サンプルについて

  • 下記のサンプルページにアクセスしている端末の位置情報がマップ上にマーカーで表示されます。(位置情報の取得に失敗した端末の情報は表示されません。)
  • 位置情報の取得に成功した場合 その位置にマーカーが立ち、マーカーの変更とコメントをつぶやくことができます。
  • コメントは60秒後に消えますが、コメントには気をつけましょう。
  • 位置情報は常に更新しているため、移動すると(取得した位置情報が変わると)マーカーの位置も移動します。
  • 自分のマーカーを見失った際は「移動」ボタンで表示することができます。
  • ひとりで試しても面白くないので お近くのご友人とご一緒にお試しください。
  • Geolocation APIが使用できない、位置情報が取得できない、位置情報の取得を許可していないなどさまざまな理由で位置情報が取得できなかった際は マップ上の他の端末の位置の確認のみ行うことができます。
サンプル コントロール部分のスクリーンショット

※サンプルの使用により生じた問題について一切責任を負いかねます。

サンプルページはこちら

サンプルへのアクセス状況確認

Geolocation APIについて

位置情報の取得には GPSやIPアドレス、RFID、WiFiやBluetooth MACアドレス、およびGSM / CDMAのセルIDだけでなく、ユーザ入力などのネットワーク信号から推定された場所を取得することができるようです。

使い手側は特に気にすることなく さまざまな情報より 自動で位置情報を取得できるということですね。

私のiPhone 4S(au)で確認したところ、3Gで取得するよりWiFiにつないだ方がより正確な位置を取得することができました。

どの程度の誤差があるのか確認するために同じ場所(ビル)より 複数の端末で接続してみましたところ、下記のような結果となりました。


iPhone 4 (iOS 5.1.1) 3台
iPhone 4S (iOS 6.0.1)
IS12SH (Android 2.3.3)
ISW11HT (Android 2.3.4)
Xperia arc SO-01C (Android 2.3.4)

また、Geolocation APIは セキュリティーとプライバシーにも配慮されていて ユーザーの許可が無いと 位置情報が取得可能な環境であっても位置情報を取得できない仕様となっているため安心です。

iPhone Safariのスクリーンショット
アプリの設定で位置情報サービスが無効になっている際は有効に
Google Chromeのスクリーンショット

対応状況

下記に「Geolocation API」への対応状況をまとめました。

スマートデバイス

デバイス 対応状況
iPad 対応
iPhone 対応
Android 2.2以降より対応

PC ブラウザ

ブラウザ 対応バージョン
Firefox 3.5以降
Safari 5以降
Chrome 5以降
Opera 10以降
Internet Explorer 9以降

Geolocation APIの使用方法

Geolocation APIが使用できるか確認

下記 JavaScriptのソースコードのように「navigator.geolocation」によりGeolocation APIを使用できるか否かを確認することができます。

			if (navigator.geolocation) {
				console.log("Geolocation APIが利用できます。");
			} else {
				console.log("Geolocation APIを利用できません。");
			}
		

Geolocation APIのメソッド

Geolocation APIで用意されているメソッドは下記の3つです。

getCurrentPosition

位置情報を一度だけ取得します。
第1引数には成功時のコールバック関数を 第2引数には失敗時のコールバック関数を第3引数にはオプションを設定します。

			if (navigator.geolocation) {
				console.log("Geolocation APIが利用できます。");
				navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

				function successCallback(position) {
					console.log("経度:" + position.coords.latitude);
					console.log("経度:" + position.coords.longitude);
				}
				function errorCallback(error) {
					switch(error.code) {
						case 1:
							console.log("位置情報の取得が許可されませんでした。");
							break;
						case 2:
							console.log("位置情報の取得に失敗しました。");
							break;
						case 3:
							console.log("タイムアウトしました。");
							break;
					}
				}
			} else {
				console.log("Geolocation APIを利用できません。");
			}
		

watchPosition

位置情報を定期的に取得します。
戻り値はclearWatchにて位置情報の取得を解除する際に使用します。
引数はgetCurrentPositionと同じです。

サンプルではこちらを使用。

			if (navigator.geolocation) {
				console.log("Geolocation APIが利用できます。");
				watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
				function successCallback(position) {
					console.log("経度:" + position.coords.latitude);
					console.log("緯度:" + position.coords.longitude);
				}
				function errorCallback(error) {
					switch(error.code) {
						case 1:
							console.log("位置情報の取得が許可されませんでした。");
							break;
						case 2:
							console.log("位置情報の取得に失敗しました。");
							break;
						case 3:
							console.log("タイムアウトしました。");
							break;
					}
				}
			} else {
				console.log("Geolocation APIを利用できません。");
			}
		

clearWatch

watchPositionによる位置情報の取得を解除します。

			navigator.geolocation.watchPosition(watchId);
		

オプションについて

getCurrentPosition、watchPositionの第3引数には下記が設定可能です。

enableHighAccuracy

可能な限り正確な位置情報を取得できるようにする際はtrueを設定します。
ただし、位置情報の取得により時間が必要となります。
デフォルトはfalse。

timeout

タイムアウトまでの時間をミリ秒で指定します。
デフォルトは無制限。

maximumAge

位置情報をキャッシュする時間をミリ秒で指定します。
指定時間内であれば 位置情報を再利用できます。
デフォルトは0。

			var options = {
				enableHighAccuracy: true,
				timeout: 6000,
				maximumAge: 60000;
			};
			navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
		

取得項目について

上記のサンプルコードで 成功時のコールバック関数 successCallbackでは経度と緯度を取得していますが、他にも下記の値が取得可能です。

latitude 緯度
longitude 経度
altitude 高度
accuracy 緯度・経度の正確性
altitudeAccuracy 高度の正確性
heading 方位
speed 速度

エラーについて

上記のサンプルコードで 失敗時のコールバック関数 errorCallbackで取得しているように エラーコードは下記の3種類があります。

エラーコード 1 位置情報の取得が許可されなかった際のエラー
エラーコード 2 位置情報の取得に失敗した際のエラー
エラーコード 3 タイムアウト

まとめ

今では生活に欠かせない(個人的意見です)位置情報サービス。それを簡単なソースコードで実現することができるGeolocation API。
検索アプリだけではなく、例えばコーポレートサイトに現在地から会社までの道のりを表示させる機能を追加するなど さまざまな使い方が想定されます。

使う機会はそう遠くない未来に訪れるはずですので 試したことが無い方はぜひ一度試してみてください。

Subscribe:
pagetop