libro
www.tuyano.com
PhoneGapによるAndroid/iPhoneアプリ開発入門

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

作成:2012-04-02 08:29
更新:2012-04-02 08:29

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

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

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

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

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

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

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

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

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

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>
※関連コンテンツ

「PhoneGapによるAndroid/iPhoneアプリ開発入門」に戻る