画像を傾ける
加速度センサーの値を表示するアプリを改良して、グリッド板を傾けてみましょう。グリッドの画像を用意し、PhoneGapプロジェクトフォルダ内にあるwwwフォルダに入れます。
グリッド板を傾けるのも、CSS3に用意されているプロパティを利用します。プログラムで複雑な処理をしなくても、スタイルシートだけで実現できるので手軽です。
グリッド板の画像を以下のようにdiv要素で包みます。
<div id="box3d">
<img src="grid.png" id="plane" width="192" height="192">
</div>
このdiv要素に対して、どのくらいの3DパースにするかなどをCSSのプロパティで指定します。3Dパースは-webkit-perspectiveプロパティで指定できます。値が小さいほどパースがきつくなります。パースの基準座標を指定する場合は、-webkit-perspective-originプロパティを使い、横方向のオフセット値と縦方向のオフセット値を半角空白で区切って指定します。パースの基準座標のデフォルトは(0,0)です。
#box3d {
width: 100%;
height:192px;
padding: 0px;
text-align: center;
-webkit-perspective: 400;
-webkit-perspective-origin: 0px 0px;
}
次に、実際にグリッド板を傾ける処理です。すでに3Dパースは指定してあるので、X軸とY軸に回転させればiPhoneの傾き具合によってグリッド板が傾きます。
X軸とY軸の回転角度を同時に変更する場合は、以下のようにrotateX()、rotateY()を半角空白で区切って指定します。
var xr = -acceleration.x * 100;
var yr = -acceleration.y * 100;
var rotate = "rotateY("+xr+"deg) rotateX("+yr+"deg)";
document.getElementById("plane").style.WebkitTransform = rotate;
実際のプログラムは以下のようになります。
<!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">
<style type="text/css">
#box3d {
width: 100%;
height:192px;
padding: 0px;
text-align: center;
-webkit-perspective: 400;
-webkit-perspective-origin: 0px 0px;
}
</style>
<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;
var xr = -acceleration.x * 100;
var yr = -acceleration.y * 100;
var rotate = "rotateY("+xr+"deg) rotateX("+yr+"deg)";
document.getElementById("plane").style.WebkitTransform = rotate;
},
function(){
document.getElementById("statX").innerHTML = "エラー";
},
{
frequency : 50
}
)
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>加速度計/傾斜計2</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>
<div id="box3d">
<img src="grid.png" id="plane" width="192" height="192">
</div>
</body>
</html>
実機で確認
作成したプログラムを実機に転送して動作を確認します。実機にアプリが転送されると以下のようになります。この写真は、iPhoneを机の上にほぼ水平に置いた状態で撮影したものです。
iPhoneを持って動かしてみると、グリッド板が角度に合わせて動きます。プログラムでは角度の精度は求めていないのであまり正確ではありませんが、ゲームなどの用途には十分でしょう。
次回も引き続き、PhoneGapを使ったアプリの開発方法を解説します。それでは、また次回。