HTML5のGeolocation APIで発生するエラーへの対処方法をわかりやすく解説

HTML5のGeolocation APIを使うと、ユーザーの位置情報をお気に入りのWebサイトと共有できます。JavaScriptで緯度と経度を取得し、そのデータをバックエンドのWebサーバーへ送信すれば、「近くのお店を検索する」「地図上に現在地を表示する」といった、位置情報を活用した便利な機能を実現できます。

なぜエラーハンドリングが必要なのか

ジオロケーションの処理は決して単純ではなく、何らかの理由でエラーが発生する可能性があります。たとえば、ユーザーが位置情報の利用を拒否した場合や、電波状態が悪く現在地を特定できない場合などです。こうしたエラーを適切に検出し、graceful（優雅）に処理することが、信頼性の高いアプリケーションを作るうえで非常に重要です。

PositionErrorオブジェクトとは

ジオロケーションの主要メソッドである getCurrentPosition() および watchPosition() は、第2引数としてエラーハンドラ用のコールバックメソッドを受け取ります。エラーが発生すると、このコールバックに PositionError オブジェクトが渡されます。このオブジェクトは、次の2つのプロパティを持っています。

PositionErrorで返されるエラーコードの一覧

PositionErrorオブジェクトに返される可能性のあるエラーコードは、以下の4種類です。それぞれ定数としても定義されているため、数値の代わりに定数名で判定するのが一般的です。

エラーハンドラの実装例

以下は、PositionErrorオブジェクトを実際に活用するサンプルコードです。errorHandler メソッドがエラーハンドラのコールバックとして機能し、エラーコードに応じて適切なメッセージを表示します。

function errorHandler(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      alert("位置情報の利用が許可されていません。");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("現在位置を特定できませんでした。");
      break;
    case error.TIMEOUT:
      alert("位置情報の取得がタイムアウトしました。");
      break;
    default:
      alert("不明なエラーが発生しました： " + error.message);
      break;
  }
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      console.log("緯度： " + position.coords.latitude);
      console.log("経度： " + position.coords.longitude);
    },
    errorHandler,
    { timeout: 5000 }
  );
} else {
  alert("お使いのブラウザはGeolocation APIに対応していません。");
}

まとめ

HTML5のGeolocation APIでは、getCurrentPosition() や watchPosition() の第2引数にエラーハンドラを渡すことで、PERMISSION_DENIED や TIMEOUT などのエラーを柔軟に処理できます。エラーコードごとにユーザーへ分かりやすいフィードバックを返すことで、より使いやすい位置情報対応アプリケーションを構築しましょう。