HTML 速習チュートリアル

HTML5 Geolocation API

1. ユーザーの位置情報を特定する

HTML Geolocation API は、ユーザーの地理的な位置を特定するために使用されます。

プライバシー保護の観点から、ユーザーが承認しない限り、位置情報は利用できないようになっています。

       注意: 地理位置情報の特定は、ユーザーのプライバシーに深刻な影響を与える可能性があります。そのため、ユーザーの同意なしに位置情報を取得することはできません。

2. HTML Geolocation の使用方法

ユーザーの現在地を取得するには、getCurrentPosition() メソッドを使用します。

以下の例は、ユーザーの現在地の緯度（Latitude）と経度（Longitude）を返すシンプルなサンプルです。

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    // ブラウザが Geolocation をサポートしている場合
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    // サポートしていない場合
    x.innerHTML = "このブラウザは Geolocation をサポートしていません。";
  }
}

function showPosition(position) {
  x.innerHTML = "緯度: " + position.coords.latitude + 
  "<br>経度: " + position.coords.longitude;
}
</script>

2.1 コードの解説

  1. navigator.geolocation がサポートされているかチェックします。
  2. サポートされている場合、getCurrentPosition() メソッドを実行します。サポートされていない場合は、ユーザーにメッセージを表示します。
  3. getCurrentPosition() が成功すると、引数で指定したコールバック関数（この例では showPosition）に coordinates オブジェクトが渡されます。
  4. showPosition() 関数が緯度と経度を出力します。

3. エラーと拒否のハンドリング

getCurrentPosition() メソッドの第2引数は、エラーを処理するために使用されます。ユーザーが位置情報の共有を拒否した場合や、何らかの理由で取得に失敗した場合に実行される関数を指定します。

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "ユーザーが位置情報の共有を拒否しました。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "位置情報が利用できません。"
      break;
    case error.TIMEOUT:
      x.innerHTML = "タイムアウトによりリクエストが完了しませんでした。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "不明なエラーが発生しました。"
      break;
  }
}

4. マップ上での結果表示

位置情報をマップ（地図）上に表示するには、Google Maps などの地図サービスを利用するのが一般的です。取得した緯度と経度を地図サービスに渡すことで、特定の地点にマーカーを表示したり、周囲の状況を可視化したりできます。

5. 場所固有の情報

このページでは、ユーザーの位置を地図上に表示する方法を紹介していますが、Geolocation は以下のような「場所固有の情報」を提供するためにも非常に有用です。

  • ユーザーに関連するローカル情報の提供
  • 目的地までのナビゲーション（ルート案内）
  • ユーザーが作成したコンテンツ（写真など）への位置タグ付け

6. getCurrentPosition() メソッド - 返却されるデータ

getCurrentPosition() メソッドは、成功時にオブジェクトを返します。緯度（latitude）、経度（longitude）、精度（accuracy）などのプロパティは常に返されますが、デバイスによっては他のプロパティも利用可能です。

プロパティ内容
coords.latitude緯度（十進数）
coords.longitude経度（十進数）
coords.accuracy緯度・経度の精度
coords.altitude海抜（高度）（利用可能な場合のみ）
coords.altitudeAccuracy高度の精度（利用可能な場合のみ）
coords.heading方位（北からの時計回りの角度）（利用可能な場合のみ）
coords.speed速度（メートル毎秒）（利用可能な場合のみ）
timestampデータの取得時刻

7. Geolocation オブジェクト - その他のメソッド

Geolocation オブジェクトには、他にも便利なメソッドが存在します。

  • watchPosition(): ユーザーの現在地を監視し、位置が変わるたびに最新の座標を返します（GPS 搭載のモバイルデバイスが移動している場合など）。
  • clearWatch(): 実行中の watchPosition() メソッドを停止します。

以下の例は watchPosition() メソッドを使用したサンプルです。テストするには、GPS デバイス（スマートフォンなど）を持って移動する必要があります。

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "このブラウザは Geolocation をサポートしていません。";
  }
}

function showPosition(position) {
  x.innerHTML = "緯度: " + position.coords.latitude + 
  "<br>経度: " + position.coords.longitude;
}
</script>