back

Compassによるコンパス機能 (3/4)

■連続して値を取得するwatchHeading

getCurrentHeadingはコンパスの値を取り出してそれでおしまいですが、コンパスというのはリアルタイムに常に値が更新され結果が反映されるような使い方をすることのほうが多いでしょう。

こうした場合には、常にコンパスの値をチェックし続ける「watchHeading」というメソッドを利用します。

変数 = navigator.compass.watchHeading
    ( 成功時処理 , 失敗時処理 [, オプション ] );

基本的な使い方はgetCurrentHeadingと似ていますが、第３引数にオプション設定を用意することができます。これは設定の名前と値を連想配列にまとめたもので、とりあえずは「frequency」という項目だけ覚えておけばよいでしょう。これは呼び出し間隔をミリ秒単位で設定するためのものです。

また、watchHeadingには返り値がありますが、これはこの監視処理のIDとなる値です。このIDは、watchHeadingでのコンパスの監視をやめるときに用います。
navigator.compass.clearWatch( 監視処理のID );

このように「cleaWatch」というメソッドで取りやめるIDを指定することで、コンパスの値のチェックを停止できます。では、簡単なサンプルを以下に挙げておきましょう。

ここでは500ミリ秒（0.5秒）間隔でコンパスの値を取得し表示しています。そして取得回数が100回になったら処理を終了するようにしています。連続してコンパスをとり出すことができると、リアルタイムな表示などが簡単に作れるようになりますね。


(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※index.html

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
	src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
var counter = 0;
var watchID = null;

function onLoad(){
	document.addEventListener("deviceready", onReady, false);
}

function onReady() {
	var opt = { frequency: 500 };
	var watchID = navigator.compass.watchHeading(onSuccess, onError, opt);
}

function onSuccess(heading) {
	var heading = heading.trueHeading;
	document.getElementById('msg').innerHTML = "HEAD: " + heading;
	if (counter++ > 100) {
		navigator.compass.clearWatch(watchID);
		document.getElementById('msg').innerHTML = "END...";
	}
}

function onError(compassError) {
	alert('Compass Error: ' + compassError.code);
}
</script>

</head>
<body onload="onLoad();">
	<!-- home page -->
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Sample</h1>
		</div>
		<div data-role="content">
			<h2>Sample Page</h2>
			<div id="msg"></div>
		</div>
	</div>
</body>
</html>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.