HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / HTML5のAPI、および、関連仕様  > Geolocation API

★Geolocation API

| ​​Geolocation APIとは
Geolocation APIは、ユーザーの位置情報を扱うためのAPIです。 Geolocation APIの登場以前にも携帯端末などで位置情報を扱うことは出来ましたが、 各携帯キャリア独自の規格であったためキャリアごとの仕様に合わせて開発する必要がありました。
Geolocation APIは、ウェブの標準化団体であるW3Cが仕様策定を進める規格であり、JavaScriptで位置情報を取得できるように標準化されています。 すでに、Firefox・Google Chrome・Safariなどの一般的なブラウザでサポートされており、 スマートフォンのようなGPS対応の携帯端末向けのウェブサイトだけではなく、 一般的なブラウザで閲覧するいわゆるPCサイトでもユーザーの位置情報を利用したコンテンツを提供することが可能になっています。
とにかくサンプルを見てみる

| どんなしくみ？
Geolocation APIでは、無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなどから位置情報を取得します。 そのため、ユーザーのインターネット接続環境次第で、取得できる位置情報の精度や取得に掛かる時間が異なります。
例えば、GPS対応の携帯端末から接続しているユーザーの位置情報は比較的正確に取得できるでしょうが、 一般的なインターネットサービスプロバイダから接続しているユーザーの位置情報は大まかにしか取得できないかもしれません。

| セキュリティとプライバシー
Geolocation APIは、ユーザーのセキュリティーとプライバシーに配慮した仕様となっています。 位置情報をリクエストすれば必ず取得できるわけではなく、ユーザーの許可が必要となります。 ユーザーはブラウザの確認ウィンドウで、位置情報の利用を許可するかどうかを選択できるようになっています。
iPhoneの場合
Firefoxの場合
※メモ：上の画面で[常に許可しない]を選択した場合、それを解除するには、 ウェブページ上で右クリック → [ページの情報を表示] → [サイト別設定] → [位置情報の送信] の [毎回確認する] にチェックします。（Firefoxの場合）
クリーンショットを確認

| ユーザー環境でGeolocation APIが利用できるかどうかチェック
ユーザー環境でGeolocation APIが利用できるかどうかは、navigator.geolocationを参照することでチェックすることができます。 Geolocation APIを利用できる環境と利用できない環境で処理を振り分けても良いでしょう。

JavaScriptソース

if (navigator.geolocation) { //Geolocation APIを利用できる環境向けの処理 } else { //Geolocation APIを利用できない環境向けの処理 }​

| 位置情報の取得に関する3つのメソッド
Geolocation APIでユーザーの位置情報の取得をする場合、現在のところ使用できるのは以下の3つのメソッドです。 このページで紹介するサンプルでは、 getCurrentPosition()メソッドでユーザーの現在の位置情報を一回だけ取得していますが、 制作するアプリケーションの内容に応じて必要なメソッド・属性を使用します。
getCurrentPosition() …… ユーザーの現在の位置情報を一回だけ取得する
watchPosition() …… ユーザーの位置情報を定期的に監視する
clearWatch() …… watchPosition()による位置情報の監視をクリアする
Geolocation APIのメソッド・属性の一覧
getCurrentPosition()メソッドには。3つの引数を指定することができます。 最初の引数は位置情報の取得に成功した場合のコールバック関数、 2番目の引数は位置情報の取得ができなかった場合のコールバック関数、 3番目の引数は位置情報の取得の詳細を指定する追加オプションです。
最初の引数は必須ですが、2番目と3番目の引数は省略することができます。

JavaScriptソース

//ユーザーの現在の位置情報を取得
navigator.geolocation.getCurrentPosition(
successCallback, errorCallback
​);

| 位置情報の取得の詳細を指定する追加オプション
上のJavaScriptソースでは3番目の引数を省略していますが、 指定すればより詳細に位置情報を制御することができます。 指定可能な追加オプションは、現在のところ以下の3つです。
enableHighAccuracy …… より精度の高い位置情報を取得する（true, false）
timeout …… タイムアウトまでの時間（単位：ミリ秒）
maximumAge …… 位置情報の有効期限（単位：ミリ秒）
Geolocation APIのメソッド・属性の一覧

JavaScriptソース

//ユーザーの現在の位置情報を取得（位置情報の精度を高くする・6秒でタイムアウト・有効期限10分） navigator.geolocation.getCurrentPosition( successCallback, errorCallback, {enableHighAccuracy:true; timeout:6000; maximumAge:600000;} );

| 位置情報の取得に成功した場合の処理
getCurrentPosition()メソッドで位置情報を取得すると、コールバック関数にPositionというオブジェクトが渡されます。 位置情報の取得に成功した場合のコールバック関数内では、 Positionオブジェクトのcoords属性から緯度・経度・高度などの値を取得します。
尚、現在のところ、Positionオブジェクトのcoords属性から取得できるのは以下の位置情報ですが、 Geolocation APIの将来のバージョンでは、coords属性だけではなく、例えば、通りの番号などを取得できるような新しい属性が追加されるかもしれません。
属性名値の内容値の単位
latitude緯度（-180～180）度
longitude経度（-90～90）度
altitude高度m
accuracy緯度・経度の誤差m
altitudeAccuracy高度の誤差m
heading方角（0～360）度
speed速度m/秒
以下のサンプルでは、Positionオブジェクトのcoords属性から取得した緯度・経度・高度などの値を、 ウェブページ上に表示するテキスト（HTMLソース）に置き換えています。

JavaScriptソース

/***** ユーザーの現在の位置情報を取得 *****/
function successCallback(position) {
  var gl_text = "緯度：" + position.coords.latitude + "<br>";
    gl_text += "経度：" + position.coords.longitude + "<br>";
    gl_text += "高度：" + position.coords.altitude + "<br>";
    gl_text += "緯度・経度の誤差：" + position.coords.accuracy + "<br>";
    gl_text += "高度の誤差：" + position.coords.altitudeAccuracy + "<br>";
    gl_text += "方角：" + position.coords.heading + "<br>";
    gl_text += "速度：" + position.coords.speed + "<br>";
  document.getElementById("show_result").innerHTML = gl_text;
}

| 位置情報の取得ができなかった場合の処理
Geolocation APIでユーザーの位置情報をリクエストしても、 ユーザー側の許可設定・接続環境・電波状況などによって位置情報が取得できない場合があります。 このような場合に備えて、あらかじめエラー処理をしておくほうが良いでしょう。
位置情報の取得時のエラーコードは、code属性で取得することができます。 code属性では1, 2, 3のいずれかの数値が返ります。 それぞれの意味は以下の通りです。
エラーコード値キーワード値エラー内容
1PERMISSION_DENIED位置情報の利用が許可されていない（ユーザーが位置情報の利用を許可しなかった場合など）
2POSITION_UNAVAILABLEデバイスの位置が判定できない（プロバイダが内部エラーとなっている場合など）
3TIMEOUTタイムアウト（timeout属性で指定された時間内にPositionオブジェクトを取得できなかった場合など）
エラー内容の詳細は、message属性で取得することができます。 もし、不明なエラーが発生した場合には、 message属性でエラーメッセージを取得することでその詳細が分かるかもしれません。 ただし、message属性は主にデバッグ用であり、 アプリケーションのユーザーインターフェイスには直接使用するべきではないとされています。

JavaScriptソース

/***** 位置情報が取得できない場合 *****/
function errorCallback(error) {
  var err_msg = "";
  switch(error.code)
  {
    case 1:
      err_msg = "位置情報の利用が許可されていません";
      break;
    case 2:
      err_msg = "デバイスの位置が判定できません";
      break;
    case 3:
      err_msg = "タイムアウトしました";
      break;
  }
  document.getElementById("show_result").innerHTML = err_msg;
  //デバッグ用→　document.getElementById("show_result").innerHTML = error.message;
}

| Geolocationのサンプル　ソース全文

HTML + JavaScriptソース

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset=utf-8>
<script>
//ユーザーの現在の位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

/***** ユーザーの現在の位置情報を取得 *****/
function successCallback(position) {
  var gl_text = "緯度：" + position.coords.latitude + "<br>";
    gl_text += "経度：" + position.coords.longitude + "<br>";
    gl_text += "高度：" + position.coords.altitude + "<br>";
    gl_text += "緯度・経度の誤差：" + position.coords.accuracy + "<br>";
    gl_text += "高度の誤差：" + position.coords.altitudeAccuracy + "<br>";
    gl_text += "方角：" + position.coords.heading + "<br>";
    gl_text += "速度：" + position.coords.speed + "<br>";
  document.getElementById("show_result").innerHTML = gl_text;
}

/***** 位置情報が取得できない場合 *****/
function errorCallback(error) {
  var err_msg = "";
  switch(error.code)
  {
    case 1:
      err_msg = "位置情報の利用が許可されていません";
      break;
    case 2:
      err_msg = "デバイスの位置が判定できません";
      break;
    case 3:
      err_msg = "タイムアウトしました";
      break;
  }
  document.getElementById("show_result").innerHTML = err_msg;
  //デバッグ用→　document.getElementById("show_result").innerHTML = error.message;
}
</script>
<title>Geolocation API　サンプル</title>
</head>
<body>
<p>あなたの現在位置</p>
<div id="show_result"></div>
</body> 
</html>
サンプルを別画面で開く
anchor: ma

| ドラッグ＆ドロップのメソッド・属性
HTML5のドラッグ＆ドロップには、以下のメソッド・属性が用意されています。
anchor: geolocation

位置情報の取得　Geolocation interface​

getCurrentPosition() …… ユーザーの現在の位置情報を一回だけ取得する
watchPosition() …… ユーザーの位置情報を定期的に監視する
clearWatch() …… watchPosition()による位置情報の監視をクリアする
http://www.w3.org/TR/geolocation-API/#geolocation_interface
anchor: options

位置情報取得の詳細オプション　PositionOptions interface

enableHighAccuracy …… より精度の高い位置情報を取得する（true, false）
timeout …… タイムアウトまでの時間（単位：ミリ秒）
maximumAge …… 位置情報の有効期限（単位：ミリ秒）
http://www.w3.org/TR/html5/dnd.html#the-datatransferitems-interface
anchor: Coordinates

位置情報の取得項目　Coordinates interface

item . kind …… ドラッグデータ・アイテムの種類を返す（"string", "file"）
item . type …… ドラッグデータ・アイテムの型を返す
item . getAsString(callback) …… コールバックを呼び出して文字列データを取得する
file = item . getAsFile() …… Fileオブジェクトを取得する
http://www.w3.org/TR/html5/dnd.html#the-datatransferitem-interface
anchor: dragevent

エラー内容　PositionError interface

code …… エラーコードを返す（1＝Geolocation APIの利用が許可されない, 2＝デバイスの位置が判定できない, 3＝タイムアウト）
message …… エラー内容の詳細を返す
http://www.w3.org/TR/geolocation-API/#position_error_interface