libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

Geolocation APIを利用する (3/4)

作成:2011-10-17 09:38
更新:2011-10-17 09:38

■より細かくGPSを制御する

getCurrentPositionwatchPositionは、どちらもほぼ同じような使い方で、非常に単純です。が、より使いこなす上で覚えておきたい機能も幾つか用意されています。それらについて整理して行きましょう。


■オプションの設定
これらのメソッドでは、第3引数にオプション設定を用意することができます。これは連想配列の形でオプションの値をまとめて渡します。用意できる値には以下のようなものがあります。

enableHighAccuracy――高精度のGPS値を取得するかどうか。真偽値で指定し、trueならばこれを利用します。ただしGPS値の取得により時間がかかります。
timeout――GPS取得のタイムアウトするまでのミリ秒数。これを過ぎると取得できないと判断しエラーになります。
maximumAge――キャッシュしたGPS情報の保管期間(ミリ秒数)。これが経過するとキャッシュが破棄され再度取得することになります。watchPositionで利用されます。

■Positionオブジェクトの情報
GPS取得が成功した時のコールバック関数では、Positionオブジェクトが引数に渡されます。このPositionオブジェクトには、以下のプロパティがあります。

coordsプロパティ――GPSの値をまとめたCoordinatesオブジェクトが保管されています。
timestampプロパティ――タイムスタンプの値を示すDOMTimeStampが保管されます。

このうち、coordsプロパティは、更にそのCoordinatesオブジェクトの中にプロパティが用意されています。以下のものです。

latitude――緯度の値
longitude――経度の値
altitude――高度の値
accuracy――位置の精度(何メートルほど誤差があるか)
altitudeAccuracy――高度の精度(何メートルほど誤差があるか)
heading――デバイスの向き。北をゼロとした角度で表したもの
speed――デバイスの速度。毎秒何メートルで移動しているか

GPSのみならず、その機器の無機や移動速度まで保管できるようになっていることがわかります。ただし、パソコンのWebブラウザで利用しても、これらの値はnullundefinedとなるはずです。「対応すれば表示される」ということであり、常にこれらの値が得られるわけではありません。

■PositionErrorのプロパティ
第2引数に設定されるエラー発生時のコールバック関数では、発生したエラーに関する情報が引数で渡されます。これは、PositionErrorというオブジェクトで、以下のようなプロパティが用意されています。

codeプロパティ――エラーの内容を示すコード番号
messageプロパティ――エラーメッセージのテキスト

わかりにくいのは、codeでしょう。これは、エラーのコード番号を示す整数値です。この値がどういうエラーかを調べるには、PositionErrorに用意されている以下の値のいずれかを確認すればよいでしょう。
PERMISSION_DENIED = 1; // GPS機能の利用が許可されていない
POSITION_UNAVAILABLE = 2; // 何らかの内部エラーが発生した
TIMEOUT = 3; // タイムアウト

――では、これらの機能を使って、先ほどのサンプルを更に細かく設定してます(下のリスト参照)。ここではPositionオブジェクトの内容を更に詳しく表示するようにしてあります。が、実際にやってみると、nullやundefined続出なのがわかるでしょう。これらがすべて機能するためには、ブラウザもさることながらパソコンのアップデートが必要でしょう(普通のパソコンには、GPSや地磁気センサーなどついてませんから)。

※プログラムリストが表示されない場合

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">
	<!--
	var counter = 0;
	var gps_id = 0;
	
	function doAction(){
		var opt = { 
			enableHighAccuracy:true, 
			timeout: 3000, 
			maximumAge: 15000 
		};
		gps_id = navigator.geolocation.watchPosition(getPosition,error,opt);
	}

	function getPosition(p){
		var lat = p.coords.latitude;
		var lng = p.coords.longitude;
		var alt = p.coords.enableHighAccuracy;
		var head = p.coords.heading;
		var spd = p.coords.speed;
		var time = p.coords.timestamp;
		document.getElementById("msg").innerHTML = ++counter + 
				": " + lat+"," + lng + ":" + alt + ":" + head +
				":" + spd + ":" + time; 
	}
	
	function error(err){
		alert("ERROR(" + err.code + ")\n" + err.message);
	}
	
	function doCheck(){
		clearWatch(gps_id);
	}
	// -->
	</script>
	</head>
	<body onload="doAction();">
		<h1>GPS Sample</h1>
		<div id="msg"></div>
		<button onclick="doCheck();">Click</button>
	</body>
</html>

※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る