PR

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

2012年5月18日(金)
山田 祥寛(YAMADA, Yoshihiro)

HTML5は、Webページを作成するための基本的なマークアップ言語HTMLの最新版です。もっとも、HTML5では、単なるマークアップ言語としての機能だけではなく、JavaScriptで利用できるAPIが大幅に拡充され、アプリケーション開発がより簡単になっているのが特徴です(HTML5について、より詳しくは別連載「今さら聞けないHTML5総おさらい」も参照してください)。

本連載では、このHTML5の基本的なテクニックをTIPS形式でまとめていくものです。

まず、第1回となる今回は、HTML5の新機能の中でも人気の高いGeolocation APIについて紹介します。サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

[第1回目次]
  • TIPS 001:現在の位置情報を取得する
  • TIPS 002:位置取得に失敗した場合の処理を定義する
  • TIPS 003:位置情報の動作パラメータを設定する
  • TIPS 004:現在の位置情報を定期的に取得する
  • TIPS 005:位置情報の定期取得を中止する
  • TIPS 006:Googleマップ連携で現在位置を地図表示する

Geolocation APIの概要とブラウザの対応状況

Geolocation APIはユーザーの現在の位置情報を取得するための命令群です。従来は、デバイスや携帯電話キャリアごとに独自のしくみを提供しており、アプリ開発にもそれぞれの仕様に従ったコードを記述する必要がありました。しかし、Geolocation APIの登場によって、ブラウザの機能のみで、しかも統一した方法で位置情報の取得が可能となります。

Geolocation APIのブラウザごとの対応バージョンは、以下の通りです。

表1:Geolocation APIの対応状況

ブラウザ 対応バージョン
Internet Explorer 9以降
Firefox 3.5以降
Google Chrome 5以降
Safari 5以降
Opera 10以降

TIPS 001:現在の位置情報を取得する

現在の位置情報を取得するには、navigator.geolocationオブジェクトのgetCurrentPositionメソッドを利用します。以下は、Geolocation API経由でユーザーの現在位置を取得し、経度/緯度/方角を表示する例です。

[リスト]現在の位置情報を取得するコード(current.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');
    // Geolocation APIが利用できるかを判定(1)
    if (navigator.geolocation) {
      // 現在の位置情報を取得(2)
      navigator.geolocation.getCurrentPosition(
        function(pos) {
          // 取得した位置情報をページに反映(3)
          latitude.innerHTML = pos.coords.latitude;
          longitude.innerHTML = pos.coords.longitude;
          heading.innerHTML = pos.coords.heading;
        },
        ...中略...
      );
    } 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>

実行結果は、以下の通りです。[●○が物理的な現在地を追跡する許可を求めています]のようなメッセージが表示されたら、[許可]ボタンをクリックしてください。ユーザーが明示的に許可しないかぎり、Geolocation APIが勝手に位置情報を取得することはありません(ただし、一度許可したら、次回以降、許可は求められません)。

 図1:現在の位置情報をブラウザに表示(クリックで拡大)

Geolocation APIは新しい命令なので、利用する前にまず、ブラウザが対応しているかをチェックしなければなりません。これを行っているのが(1)です。

Geolocation APIには、navigator.geolocationプロパティでアクセスできます。(1)では、プロパティに実際にアクセスしてみて、アクセスできたらGeolocation APIに対応していると判断し、以降の処理を行っているわけです(「機能テスト」と言います)。

Geolocation APIが未サポートである場合、サンプルではエラーメッセージをダイアログ表示しています。

現在位置は、getCurrentPositionメソッドで取得できます(2)。引数には、位置取得に成功した場合に実行する「成功コールバック関数」(コールバック)を指定します。

コールバックの引数posには、取得した位置情報(Positionオブジェクト)が自動的にセットされます。コールバックの中では、一般的に、このPositionオブジェクトを利用して、以降の処理を行うことになるでしょう。サンプルでは、取得した位置情報を表示しています(3)。

Positionオブジェクトでアクセスできる情報には、以下のようなものがあります。環境によっては取得できない情報もありますが、その場合、プロパティはnull、NaN、undefinedのいずれかを返します(上の図でも、[方角]の欄が空になっていることが確認できるでしょう)。

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

プロパティ 概要
coords 位置情報(Coordinatesオブジェクト)。主なプロパティは以下
プロパティ 概要
latitude 緯度
longitude 経度
altitude 高度
accuracy 緯度/経度の誤差(m)
altitudeAccuracy 高度の誤差(m)
heading 方角(度)
speed 速度(m/秒)
timestamp 取得日時(1970年からの経過ミリ秒)
Think IT会員限定特典
  • Geolocation APIサンプル

著者
山田 祥寛(YAMADA, Yoshihiro)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。

連載記事一覧

Think IT会員サービスのご案内

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスのご案内

関連記事