2013/08/30

HTML5新機能Geolocation APIで位置情報を取得する方法

HTML5新機能Geolocation APIで位置情報を取得する方法

Geolocation APIは、GPSを使わなくても無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなどから位置情報を取得できるHTML5の新機能です。

今まではスマートフォンやタブレットに対して位置情報を取得する際は、その機種に合わせて記述をする必要がありました。

しかしGeolocation APIをサポートしているブラウザであればデバイスに関係なく同じ記述(javascript)で位置情報を取得できるようになります。

目次

■Geolocation APIの種類

Geolocation APIは、現在3種類のAPIが定義されています。

現在の位置情報を取得

navigator.geolocation.getCurrentPosition( successCallback , errorCallback , option)

このメソッドは現在の位置の緯度、経度、高度、誤差などを取得します。

Geolocation img1

現在の位置情報を監視して位置変更時に位置情報を取得

navigator.geolocation.watchPosition( successCallback , errorCallback , option)

このメソッドは非同期に位置情報の取得を繰り返し、常に位置情報を監視した状態になります。
位置情報に変更があった時に第一引数がコールバックされます。

Geolocation img1

watchPositionの位置情報の監視を中止

navigator.geolocation.clearWatch( watchId)

このメソッドwatchPositionの位置情報の監視を停止します。

Geolocation img1

■サンプルコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Geolocation Sample</title>
</head>
<body>
<script type="text/javascript">
    if (navigator.geolocation) {
        // 現在の位置情報取得を実施
        navigator.geolocation.getCurrentPosition(
		// 位置情報取得成功時
		function (pos) { 
		        var location ="<li>"+"緯度:" + pos.coords.latitude + "</li>";
		        location += "<li>"+"経度:" + pos.coords.longitude + "</li>";
		        document.getElementById("location").innerHTML = location;
		},
		// 位置情報取得失敗時
		function (pos) { 
		        var location ="<li>位置情報が取得できませんでした。</li>";
		        document.getElementById("location").innerHTML = location;
		});
	} else {
		window.alert("本ブラウザではGeolocationが使えません");
	}
</script>
    <ul id="location">
    </ul>
</body>
</html>

■サンプルコードの解説

9行目と23~25行目
ブラウザがgeolocationに対応しているかの確認をしています。
対応していればif内の処理がされ対応してなければelse内の処理がされます。
11行目
この行で現在の位置情報を取得する関数getCurrentPositionを実行しています。
成功した時の処理、失敗した時の処理、オプションを引数として指定できます。
13行目
getCurrentPositionの第一引数として位置情報の取得が成功した時の処理を記述します。
14行目
pos.coords.latitudeは取得した位置情報の緯度を出力します。
15行目
pos.coords.longitudeは取得した位置情報の経度を出力します。
他にも取得した位置情報から利用できるデータがあります。
属性名値の内容値の単位
Latitude 緯度(-180~180)
longitude 経度(-90~90)
altitude 高度 m
accuracy 緯度・経度の誤差 m
altitudeAccuracy 高度の誤差 m
heading 方角(0~360)
speed 速度 m/秒
19行目
getCurrentPositionの第二引数として位置情報の取得が失敗したエラー時の処理を記述します。
また、エラー時はエラーの種類も取得する事ができます。
エラーコード値(キーワード値)エラー内容
1(PERMISSION_DENIED) 位置情報の利用が許可されていない(ユーザーが位置情報の利用を許可しなかった場合など)
2(POSITION_UNAVAILABLE) デバイスの位置が判定できない(プロバイダが内部エラーとなっている場合など)
3(TIMEOUT) タイムアウト(timeout属性で指定された時間内にPositionオブジェクトを取得できなかった場合など)
20行目
このサンプルではエラーコードにかかわらず同じエラーを出力していますが、エラーメッセージを分ける場合は、この行を消して以下のように記述します。
switch(error.code)
  {
    case 1:
      var location = "位置情報の利用が許可されていません";
      break;
    case 2:
      var location = "デバイスの位置が判定できません";
      break;
    case 3:
      var location = "タイムアウトしました";
      break;
  }

*ブラウザがこのAPIに対応していても、PCの接続方法によって位置情報の取得ができない場合があります。
Geolocationは主にスマートフォンやタブレットに位置情報を提供するAPIです。

Geolocation img2

■まとめ

このAPIを使うと現在の位置を取得して利用するスマホ用のウェブアプリを作る事ができます。

記述もとても簡単なので覚えておいて損はないでしょう。