HTML5の便利なTips100選 1

TIPS 002:位置取得に失敗した場合の処理を定義する

TIPS 002:位置取得に失敗した場合の処理を定義する

getCurrentPositionメソッドの第2引数に「失敗コールバック関数」を指定しておくことで、位置情報の取得に失敗した場合に、エラーメッセージの表示などのエラー処理を行えます。

失敗コールバック関数は省略可能ですが、位置取得はネットワーク接続の理由をはじめ、さまざまな原因で失敗することがあります。位置取得できなかった場合にそのままにするのではなく、ユーザーに通知できるようなしくみを設けておくのが望ましいでしょう。

[リスト]位置取得に失敗した場合にメッセージ表示するコード(current.html)

// 現在の位置情報を取得
navigator.geolocation.getCurrentPosition(
  // 位置情報の取得に成功した場合の処理
  function(pos) {
    ...中略...
  },
  // 位置情報の取得に失敗した場合の処理
    function(err) {
    // エラーコードに対応するメッセージを準備(1)
    var msgs = [
      err.message,
      '位置情報の取得を許可されていません。',
      '位置情報の取得に失敗しました。',
      '位置情報を取得中にタイムアウトしました。'
      ];
      // エラーコードに応じてメッセージをダイアログ表示(2)
      window.alert(msgs[err.code]);
  },
  ...中略...
);

エラーメッセージを確認したい場合には(例えばGoogle Chromeであれば)、

(Google Chromeの設定)-[設定]-[高度な設定]-[コンテンツの設定]ボタンをクリックし、表示された[コンテンツの設定]ウィンドウから[現在地]欄の[例外の設定...]ボタンをクリックしてください。

[現在地の例外]ウィンドウが表示されますので、そこから現在サンプルを配置しているホストを削除します。

 図2:[現在地の例外]ウィンドウ(クリックで拡大)

サンプルにアクセスすると、[●○が物理的な現在地を追跡する許可を求めています]のようなメッセージが表示されますので、[拒否]ボタンをクリックすると、以下のようなエラーメッセージを確認できます。

 図3:現在位置を取得できなかった時のエラーメッセージ(クリックで拡大)

失敗コールバック関数(サンプルの網掛け部分)の引数errには、エラー情報(PositionErrorオブジェクト)が渡されます。PositionErrorオブジェクトでアクセスできる情報は、以下の通りです。

表3:PositionErrorオブジェクトの主なプロパティ

プロパティ 概要
code エラーコード(戻り値は以下の通り)
意味
0 不明なエラー
1 位置情報の取得を拒否された
2 位置情報を取得できない
3 取得処理中にタイムアウトした
message 詳細なエラーメッセージ

サンプルでは、エラーコード0~3に対応するエラーメッセージを配列msgsにセットしておくことで(1)、codeプロパティの値に応じてメッセージを返しているわけです(2)。

この記事をシェアしてください

人気記事トップ10

人気記事ランキングをもっと見る