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