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

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

作成:2012-03-26 09:23
更新:2012-03-26 09:30

■センサーの値を取り出して利用する

では、実際にgetCurrentAccelerationを利用してセンサーの値を取り出してみることにしましょう。下のリスト欄に簡単なサンプルを用意しました。アプリを実行すると、起動した直後にセンサーの値とタイムスタンプが画面に表示されます。

ここでは、<script type="text/javascript">タグで以下の１文を実行しています。
document.addEventListener("deviceready",
    onDeviceReady, false);
先ほど述べたように、これでセンサーが利用可能になったら、onDeviceReadyという関数を呼び出すようになります。このonDeviceReady関数では、以下のようにしてセンサーにアクセスをしています。
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
センサーへのアクセスは、たったこれだけです。後は、無事センサーの値が取得できた時の処理をonSuccess関数に用意します。ここでは引数にaccelerationという仮変数を用意していますね。これにより、accelerationにセンサー情報のオブジェクトが設定されます。ここから、センサーの値を取り出していきます。
var x = acceleration.x;
var y = acceleration.y;
var z = acceleration.z;
var t = acceleration.timestamp;
センサーの値は、「x」「y」「z」でそれぞれx軸、y軸、z軸方向の値が得られます。またtimestampにより、値が取得された時刻を示すタイムスタンプ値が取得できます。使い方そのものはとても単純ですね。

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

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">
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
	navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}

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>
		</div>
	</div>
</body>
</html>
※関連コンテンツ

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