水準器アプリを作ろう
最後に水準器アプリを作りましょう。水準器を作るには、iPhone/iPadがどのくらい傾いているか知る必要があります。傾きセンサーの値は、accelerationIncludingGravityオブジェクトの各プロパティに格納されています。サンプル1でも説明しましたが、傾きの値はイベントオブジェクト内のaccelerationIncludingGravityオブジェクトにあるx,y,zプロパティに格納されています。値は重力加速度を基準にしているので、おおよそ-9.8〜+9.8になります。
今回作成する水準器は上下方向には対応しませんので、z方向は考慮しません。X, Y方向（左右と手前〜奥）の値を読み出して、レーダーチャートふうの画像の上にカーソルとして描画します。
まず、以下のようにして左右の方向の傾きを求めます。
var xg = evt.accelerationIncludingGravity.x;
まったく傾いていなければ値は0になります。値が0の場合は画面の中央にカーソルを表示します。x方向の傾き値は、iPhone/iPadを左に傾けるとマイナス値になり、右に傾けるとプラス値になります。右に90度傾けると重力加速度の値である9.8近辺になり、左に90度傾けた場合は-9.8近辺の値になります。つまり、-9.8〜9.8の値を表示する範囲に調整するとよいわけです。
まず、値が-1.0〜+1.0程度に収まるように重力加速度の値で除算します。
xg / gravity
次に、画面の横幅を乗算します。
(xg / gravity) * 横幅
このままだと傾いていないときに画面の左端にカーソルが表示されてしまうので、以下のように計算して画面の中央になるようにします。「320」は表示する画面（レーダーチャートふうの画像）の横幅です。
var wx = 320/2; var x = wx - (xg / gravity) * wx;
さらにカーソルの幅の分の値を若干調整します。
var csize = 7; // カーソルのサイズ var wx = 320/2; // 画面の横幅 var x = wx - (xg / gravity) * wx - csize/2;
これで変数xに表示位置が入ります。y方向（手前〜奥）の傾きも同様にして計算し、最後にカーソルの位置をスタイルシートの各プロパティに設定すると完成です。
document.getElementById("csr").style.left = x+"px"; document.getElementById("csr").style.top = y+"px";
実際のプログラムはサンプル03です。iPhone/iPadを傾けると画面上の青いカーソルが移動します。カーソルの動きは一般的な水準器に合わせてあります。
iPhone/iPadを傾けると中央に表示されている青色のカーソルが移動する
●サンプル03[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="user-scalable=no,initial-scale=1" /> <title>簡易水準器</title> <link rel="stylesheet" href="css/main.css" type="text/css" media="all"> <script type="text/javascript" src="js/sample.js"></script> </head> <body> <div id="param"></div> <div id="csr"></div> </body> </html>
●サンプル03[sample.js]
window.addEventListener("devicemotion", function(evt){ var gravity = 9.80665; // 重力加速度gの値 var csize = 7; // カーソルのサイズ var wx = 320/2; // 画面の横幅 var wy = 358/2; // 画面の縦幅 var xg = evt.accelerationIncludingGravity.x; // X方向の重力 var yg = evt.accelerationIncludingGravity.y; // Y方向の重力 var zg = evt.accelerationIncludingGravity.z; // Z方向の重力 // 値を左上に表示 var txt = "x重力:"+xg+"<br>y重力:"+yg+"<br>z重力:"+zg; document.getElementById("param").innerHTML = txt; // 位置を示すカーソルを移動 var x = wx - (xg / gravity) * wx - csize/2; var y = wy + (yg / gravity) * wy - csize/2; document.getElementById("csr").style.left = x+"px"; document.getElementById("csr").style.top = y+"px"; }, true);
●サンプル03[main.css]
* {
margion: 0;
padding: 0;
}
body {
background-image: url(../images/grid.png);
background-repeat: no-repeat;
}
#param {
position: absolute;
top: 0px;
left:0px;
width : 360px;
height: 15px;
font-size: 9pt;
}
#csr {
position: absolute;
top: 0px;
left:0px;
width : 7px;
height: 7px;
background-color: blue;
opacity : 0.7;
}
今回はセンサー周りの新機能を試しましたが、iOS 4.2ではWeb Socketにも対応しており、すでに以下のサイトでiOS 4.2を使ったデモやサンプルが公開されています。iPhone/iPadで動くHTML5 Webアプリケーションを作成している人にとっては非常にメリットの大きいバージョンアップですので、新機能をぜひ試してみてはどうでしょうか。
