加速度センサー
コンパスの次は加速度センサーも使ってみましょう。iPhoneを傾けると画面に表示された画像（グリッド状の板）が傾き、どのくらい傾いているかが感覚的に分かるアプリを作成します。
加速度センサーの値は、iOS 4.2.1以降、標準のAPIでも取得できるようになっています。ジャイロセンサー（傾きセンサー）はPhoneGapではサポートしていないので、ジャイロの値を取得する場合は、iOSのAPIを利用することになります（過去の記事を参照）。
- iOS 4.2の新機能で作るHTML5+JSアプリ
- http://ascii.jp/elem/000/000/573/573478/
ただし、iOSのAPIではセンサーの値が変化するごとにdevicemotionイベントが発生し、そのイベントをキャッチして処理します。実際にやってみると、devicemotionの発生頻度が非常に多く、作成したアプリの反応が悪い場合があります。
これに対してPhoneGapの加速度センサーAPIは、指定した時間ごとにセンサーの値を返す仕組みになっており、タイマーで処理していることになります。このため、iOSで用意されている方法よりも負荷が高くありません。
- PhoneGap 加速度センサーAPI (Accelerometer API)
- http://docs.phonegap.com/phonegap_accelerometer_accelerometer.md.html
今回はPhoneGapの加速度センサーAPIを使います。PhoneGapに用意されている加速度センサーAPIは以下の表に示す3つだけです。
| navigator.accelerometer.getCurrentAcceleration | 現在の加速度センサーの値を返す |
| navigator.accelerometer.watchAcceleration | 定期的に加速度センサーの値を取得し返す |
| navigator.accelerometer.clearWatch | watchAccelerationの動作を停止させる |
先ほど説明したコンパスAPIとよく似ており、引数やオプションも同じです。リアルタイムで加速度センサーの値を取得したいので、navigator.accelerometer.watchAcceleration()を使います。最初の引数がセンサーの値が取得できた時に呼び出される関数、2番目がエラーで取得できなかった場合に呼び出される関数になります。第3引数はオプションですが、指定できるオプションはfrequencyの1つだけで、単位はミリ秒です。
加速度センサーの値の取得に成功すると、関数にaccelerationオブジェクトが渡されます。このオブジェクトのx,y,zプロパティに、それぞれの方向のセンサー値が入っています。
仮想度センサーの値を呼び出して表示するのが、以下のプログラムです。加速度センサーも実機でしか確認できないので、実機をつないで確認してください。iPhoneを傾けると、表示されている値が変化するのが分かります。
加速度センサーの値が表示するプログラム
iPhoneを動かすと加速度センサーの値が表示される
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady()
{
navigator.accelerometer.watchAcceleration(
function(acceleration){
var ele = document.getElementById("stat");
document.getElementById("statX").innerHTML = acceleration.x;
document.getElementById("statY").innerHTML = acceleration.y;
document.getElementById("statZ").innerHTML = acceleration.z;
},
function(){
document.getElementById("statX").innerHTML = "エラー";
},
{
frequency : 100
}
)
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>加速度計/傾斜計</h1>
<div>X : <span id="statX">0</span></div>
<div>Y : <span id="statY">0</span></div>
<div>Z : <span id="statZ">0</span></div>
</body>
</html>
