back
Accelerometerによるモーションセンサーの利用 (3/3)
■watchAccelerationで連続してセンサーを読み取る
getCurrentAccelerationは、センサーの値をただ読み取るだけです。が、例えばゲームなどで機器の動きを読み取りながらプレイするようなものでは、常時センサーの値を読み取り続ける必要があります。
まぁ、setIntervalでタイマーを設定して繰り返しgetCurrentAccelerationを呼び出してもいいのですが、もっと便利なメソッドがちゃんと用意されています。「watchAcceleration」というもので、以下のように利用します。
では、利用例を挙げておきましょう。ここではチェックボックスを１つ用意し、チェックをONにするとセンサーの値を0.1秒間隔で表示し続けます。チェックをOFFにするとセンサーの更新は停止します。チェックボックスのonchangeで実行しているdoAction関数での処理を見てみると、watchAccelerationの基本的な使い方がよくわかりますね。
まぁ、setIntervalでタイマーを設定して繰り返しgetCurrentAccelerationを呼び出してもいいのですが、もっと便利なメソッドがちゃんと用意されています。「watchAcceleration」というもので、以下のように利用します。
変数 = navigator.accelerometer.第1、２引数に成功時と例外時のコールバック関数を指定するのは同じですが、第３引数に設定情報を用意することができます。これは設定内容を連想配列にまとめたものです。とりあえず、これは以下のような値を用意すると考えておいてください。
watchAcceleration( 成功時処理 , 例外時処理 , 設定 );
{ 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>
| << 前へ |