Geolocation APIを利用する (1/4)
作成:2011-10-17 09:34
更新:2011-10-17 09:34
更新:2011-10-17 09:34
■Geolocation APIの基本
GPS機能を利用するための「Geolocation API」は、比較的シンプルなAPIです。単純に、GPS情報を取得するための機能しか持っていません。基本さえわかれば、誰でも簡単に利用することができるようになります。
GPS利用のための機能は「navigator.geolocation」というオブジェクトにまとめられています。この中に用意されている機能の中で、もっともシンプルなのは「getCurrentPosition」メソッドでしょう。これは引数を３つ持っており、GPSデータの取得のための設定を行います。
onSuccess――GPSデータの取得に成功したとき呼び出す処理（関数）
onError――GPSデータの取得に失敗した時呼び出す処理（関数）
options――GPSデータ取得時に渡す設定情報（連想配列）
とりあえず、もっとも簡単な使い方は、第１引数の「成功した時に呼び出す関数（いわゆるコールバック関数）」だけを指定しておく、というものです。第２・３引数は用意しなくともメソッド自体はちゃんと実行することができます。
なぜ、直接GPSを利用するのでなく、「成功したときに処理する関数を設定する」などとまどろっこしいやり方をするのか？ それは、GPSデータの取得に時間がかかるからでしょう。JavaScriptで処理が停止してしまうと、Webページが止まってしまうため、これは避けなければいけません。このため、JavaScriptでは、処理に時間がかかる機能はすべてコールバック関数を設定し、処理が終わったら関数を呼び出し後処理をする、という仕組みになっているのですね。
呼び出す関数は、必ず引数を１つ用意する必要があります。得られたGPSデータがPositionオブジェクトとしてまとめられ、引数で渡されるようになっているのです。引数で渡されたオブジェクトには「coords」プロパティがあり、そこにデータをまとめたオブジェクトが保管されます。更にその中に「latitude」「longitude」プロパティとして緯度・経度の値が得られます。
下に簡単な利用例を挙げておきました。ページにアクセスすると、現在の緯度経度を表示します。ここでは、コールバック関数側でこのようにして位置情報をとり出しています。
GPS利用のための機能は「navigator.geolocation」というオブジェクトにまとめられています。この中に用意されている機能の中で、もっともシンプルなのは「getCurrentPosition」メソッドでしょう。これは引数を３つ持っており、GPSデータの取得のための設定を行います。
getCurrentPosition(onSuccess, onError, options);勘違いしてはいけないんですが、このメソッドで、GPSデータが得られるわけではありません。これは、GPSのデータが取得できたときに呼び出す関数を設定するものなのです。３つの引数は、それぞれ以下のような役割を果たします。
onSuccess――GPSデータの取得に成功したとき呼び出す処理（関数）
onError――GPSデータの取得に失敗した時呼び出す処理（関数）
options――GPSデータ取得時に渡す設定情報（連想配列）
とりあえず、もっとも簡単な使い方は、第１引数の「成功した時に呼び出す関数（いわゆるコールバック関数）」だけを指定しておく、というものです。第２・３引数は用意しなくともメソッド自体はちゃんと実行することができます。
なぜ、直接GPSを利用するのでなく、「成功したときに処理する関数を設定する」などとまどろっこしいやり方をするのか？ それは、GPSデータの取得に時間がかかるからでしょう。JavaScriptで処理が停止してしまうと、Webページが止まってしまうため、これは避けなければいけません。このため、JavaScriptでは、処理に時間がかかる機能はすべてコールバック関数を設定し、処理が終わったら関数を呼び出し後処理をする、という仕組みになっているのですね。
呼び出す関数は、必ず引数を１つ用意する必要があります。得られたGPSデータがPositionオブジェクトとしてまとめられ、引数で渡されるようになっているのです。引数で渡されたオブジェクトには「coords」プロパティがあり、そこにデータをまとめたオブジェクトが保管されます。更にその中に「latitude」「longitude」プロパティとして緯度・経度の値が得られます。
下に簡単な利用例を挙げておきました。ページにアクセスすると、現在の緯度経度を表示します。ここでは、コールバック関数側でこのようにして位置情報をとり出しています。
var lat = p.coords.latitude;引数のpにあるcoordsのプロパティを指定して取り出します。やり方さえわかれば、さほど難しいものでもありません。
var lng = p.coords.longitude;
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Test</title>
<style>
body { padding:5px; }
h1 { font-size:18pt; background-color:#EEEEFF; }
</style>
<script type="text/javascript">
<!--
function doAction(){
navigator.geolocation.getCurrentPosition(getPosition);
}
function getPosition(p){
var lat = p.coords.latitude;
var lng = p.coords.longitude;
document.getElementById("msg").innerHTML = lat+"," + lng;
}
// -->
</script>
</head>
<body onload="doAction();">
<h1>GPS Sample</h1>
<div id="msg"></div>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る