Accelerometerによるモーションセンサーの利用(3/3):PhoneGapによるAndroid/iPhoneアプリ開発入門

Accelerometerによるモーションセンサーの利用 (3/3)

作成:2012-03-26 09:25
更新:2012-03-26 09:31

■watchAccelerationで連続してセンサーを読み取る

getCurrentAccelerationは、センサーの値をただ読み取るだけです。が、例えばゲームなどで機器の動きを読み取りながらプレイするようなものでは、常時センサーの値を読み取り続ける必要があります。

まぁ、setIntervalでタイマーを設定して繰り返しgetCurrentAccelerationを呼び出してもいいのですが、もっと便利なメソッドがちゃんと用意されています。「watchAcceleration」というもので、以下のように利用します。

変数 = navigator.accelerometer.
    watchAcceleration( 成功時処理 , 例外時処理 , 設定 );

第1、２引数に成功時と例外時のコールバック関数を指定するのは同じですが、第３引数に設定情報を用意することができます。これは設定内容を連想配列にまとめたものです。とりあえず、これは以下のような値を用意すると考えておいてください。

{ frequency:呼び出し間隔 }

frequencyは、Sensorを呼び出す間隔を示すもので、ミリ秒換算の整数値を指定します。例えば、{frequency:100}とすれば、0.1秒ごとに呼び出すわけです。また、watchAccelerationを呼び出すと、返り値としてIDが返されます。これは、後で呼び出しを中止するときに必要となります。

navigator.accelerometer.clearWatch( 停止するID );

watchAccelerationで渡されたIDを引数に指定して「clearWatch」メソッドを呼び出すことで、そのSensor呼出を停止させることができます。

では、利用例を挙げておきましょう。ここではチェックボックスを１つ用意し、チェックをONにするとセンサーの値を0.1秒間隔で表示し続けます。チェックをOFFにするとセンサーの更新は停止します。チェックボックスのonchangeで実行しているdoAction関数での処理を見てみると、watchAccelerationの基本的な使い方がよくわかりますね。

(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 sensorID = null;

function doAction() {
	var flg = document.getElementById('chk').checked;
	if(flg){
		var opt = {frequency:100};
		sensorID = navigator.accelerometer.
			watchAcceleration(onSuccess, onError, opt);
	} else {
		navigator.accelerometer.clearWatch(sensorID);
	}
}

function onSuccess(acceleration) {
	var x = acceleration.x;
	var y = acceleration.y;
	var z = acceleration.z;
	var t = acceleration.timestamp;
	var str = "x: " + x + "<br>" +
		"y: " + y + "<br>" +
		"z: " + z + "<br>" +
		"<" + t + ">";
	document.getElementById('msg').innerHTML = str;
}

function onError() {
	alert('Error!');
}
</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>
			<input type="checkbox" id="chk" onchange="doAction();">
			<label for="chk">Acceleration</label>
		</div>
	</div>
</body>
</html>

※関連コンテンツ

<< prev next >>

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