HTML5 ジオロケーションの使い方

HTML5 では Geolocation API (ジオロケーション API) が定義されています。

geolocation は "地理位置情報" の意味。

要はそのページを見ているブラウザの場所を取得するための API です。

場所が分かると何が良いかというと、例えばスマートフォンなどのモバイル端末のブラウザの地理的な場所を認識することで、自動的にユーザーの地理的な周辺情報を表示する等のアプリケーションが実装できるようになります。

尚、Android の WebView 上の HTML5 で Geolocation を使う方法については、「WebView 上の HTML5 で geolocation を利用する設定」をみてください。

HTML5 ジオロケーションの使い方

まずは出来上がりから見てください。私の Android 端末でテストしたスクリーンショットは次のようになりました。

ページにボタンを一つ配置。それをクリックすると・・・

HTML5 Geolocation

このように地理情報を取得してよいか確認するダイアログが表示されます。これはブラウザがプライバシー保護として自動的に表示しています。

"Share location" (場所を共有) を選択すると、Geolocation API で取得できた緯度経度情報を表示します。

HTML5 Geolocation

一方、"Decline" (拒否) を選択すると、処理が失敗した理由を表示します。

HTML5 Geolocation

このようなプログラムをどのように実装するか見ていきます。

HTMLは特に何もありません。単にボタンを一つ置いています。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 ジオロケーションテスト</title>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="test.js"></script>
</head>
<body>
<div><button id="testButton">Test</button></div>
</body>
</html>

ここでは jQuery を利用しています。

JavaScript test.js は次の通りです。

$(document).ready(function(){
  $('#testButton').click(function(){
    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(
        successCallback,
        errorCallback,
        {}
      );
    }
    else{
      alert("このブラウザは Geolocation をサポートしていません。");
    }
  });

  function successCallback(pos){
    var 
      lat = pos.coords.latitude,
      lon = pos.coords.longitude,
      acc = pos.coords.accuracy;

    alert('Latitude = ' + lat + ', ' 
      + 'Longitude = ' + lon 
      + ' (' + acc + ')');
  }

  function errorCallback(err){
    alert( err.message + ' (' + err.code + ')' );
  }
});

処理の流れは次のようになっています。

ユーザーがボタンをクリックする
Geolocation API のインターフェイスである navigator.geolocation.getCurrentPosition メソッドを呼び出すこの時に、成功した場合のコールバック関数 (ここでは successCallback) と失敗した場合のコールバック関数 (ここでは errorCallback) を渡す。
成功時には successCallback が Position オブジェクトを引数にして呼び出される
失敗時には errorCallback が PositionError オブジェクトを引数にして呼び出される

緯度経度の情報は Position オブジェクトから取得できます。getCurrentPosition を呼び出すときに maximumAge を非負の値で指定すると、 Position オブジェクトの有効期間が指定できます。

処理が失敗した場合には PositionError オブジェクトからエラーメッセージやエラーコードが取得できます。

尚、getCurrentPosition メソッドはそれを呼び出したタイミングでのジオロケーション情報を取得するのに対して、 watchPosition メソッドでは位置情報の変化を追跡します。

位置情報 - プライバシーの保護

Android 端末での実行例は上の通りですが、そこでもアプリケーションから場所を取得してよいか確認するダイアログが表示されました。

勝手に場所の情報を取得されるとプライバシーの観点で都合が悪いからです。

これは PC 上のブラウザでも同様で、Firefox や Chrome でテストすると次のような確認ポップアップが表示されます。

HTML5 Geolocation