スマホアプリ開発にも便利な位置情報API - Geolocation API -

Web開発

技術解説

連載 :

HTML5の便利なTips100選

2012年5月18日(金)

山田祥寛（YAMADA, Yoshihiro）

TIPS 003：位置情報の動作パラメータを設定する

getCurrentPositionメソッドの第3引数では、位置取得の動作オプションをハッシュの形式で設定できます。

［リスト］位置取得の動作オプションを設定するコード（current.html）

// 現在の位置情報を取得
navigator.geolocation.getCurrentPosition(
  // 位置情報の取得に成功した場合の処理
  function(pos) {
    ...中略...
  },
  // 位置情報の取得に失敗した場合の処理
  function(err) {
    ...中略...
  },
  // 位置取得の動作オプションを設定
  {
    timeout : 10000,
    maximumAge : 0,
    enableHighAccuracy: true
  }
);

getCurrentPositionメソッドに設定できる動作オプションには、以下のようなものがあります。

表4：Geolocation APIの動作オプション

オプション名	概要
timeout	取得タイムアウトまでの時間（ミリ秒）
maximumAge	位置情報の有効期限（ミリ秒）
enableHighAccuracy	より精度の高い位置情報を取得するか（true／false）

例えば位置情報の取得でタイムアウトエラーが頻発する場合には、まずtimeoutオプションを長めに設定すると良いでしょう。

maximumAgeオプションは、取得済みの位置情報（Positionオブジェクト）を維持する期間を表します。この値を0にした場合、常に新しい情報に更新しようとします。

スマホ環境では、enableHighAccuracyプロパティをtrueにすることで、GPS機能を利用するようになります。これによって、より精度の高い位置情報を取得できますが、反面、取得時間が長くなる、バッテリーの消耗が激しくなるなどのデメリットもありますので、注意してください。

TIPS 004：現在の位置情報を定期的に取得する

getCurrentPositionメソッドがワンポイントで位置情報を取得するのに対し、位置情報の変化を監視し、変化を定期的に取得するのがwatchCurrentPositionメソッドです。主に、移動しながら利用するスマホアプリなどで利用します。

［リスト］位置情報を定期的に取得するコード（watch.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 TIPS</title>
<script>
window.addEventListener('DOMContentLoaded',
  function() {
    // 結果の表示先（<div>要素）を取得
    var latitude = document.querySelector('#latitude');
    var longitude = document.querySelector('#longitude');
    var heading = document.querySelector('#heading');
    var stop = document.querySelector('#stop');
    // Geolocation APIが利用できるかを判定
    if (navigator.geolocation) {
      // 現在の位置情報を定期的に取得
      var id = navigator.geolocation.watchPosition(
        // 位置情報の取得に成功した場合の処理
        function(pos) {
          latitude.innerHTML = pos.coords.latitude;
          longitude.innerHTML = pos.coords.longitude;
          heading.innerHTML = pos.coords.heading;
        },
        // 位置情報の取得に失敗した場合の処理
        function(err) {
          var msgs = [
            err.message,
            '位置情報の取得を許可されていません。',
            '位置情報の取得に失敗しました。',
            '位置情報を取得中にタイムアウトしました。'
          ];
          window.alert(msgs[err.code]);
        },
        // 位置取得の動作オプションを設定
        {
          timeout : 10000,
          maximumAge : 0,
          enableHighAccuracy: true
        }
      );
      ...中略...
    } else {
      window.alert('Geolocation API対応ブラウザでアクセスしてください。');
    }
  }, false
);
</script>
</head>
<body>
<!--Geolocation APIで取得した位置情報を表示-->
<ul>
  <li>経度：<span id="latitude"></span></li>
  <li>緯度：<span id="longitude"></span></li>
  <li>方角：<span id="heading"></span></li>
</ul>
...中略...
</body>
</html>

watchPositionメソッドの動作は、スマホ環境などでアクセスして確認してみましょう。ページにアクセスした状態で移動してみると、以下のように、位置情報の変化を確認できるはずです。