古籏一浩のJavaScriptラボ ― 第78回

PhoneGapでiPhoneのコンパスアプリを再現

2011年11月30日 14時27分更新

古籏一浩

ツイートする

画像を傾ける

　加速度センサーの値を表示するアプリを改良して、グリッド板を傾けてみましょう。グリッドの画像を用意し、PhoneGapプロジェクトフォルダ内にあるwwwフォルダに入れます。


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>