iOS 5の新機能で作る「パノラマビュー」アプリ (2/5)

2012年01月20日　10時00分更新

文●古籏一浩

ツイートする

コンパスの値を表示する

　まずは簡単なことから始めましょう。iOS 5で追加された機能を使ってコンパスの値を取得します。iOS 5では、iPhone本体を動かすとコンパスの値が変化し、windowオブジェクトのdeviceorientationイベントが発生します。

　イベントが発生すると、イベントハンドラにイベントオブジェクトが渡されます。イベントオブジェクト内にコンパスの値と誤差を示すプロパティがあります。

webkitCompassHeading	方角（0～360未満）
webkitCompassAccuracy	方角の誤差（角度）

　詳細はアップルのWebページに説明があります。

Safari Developer Library: http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html

　コンパスの値をリアルタイムで表示するプログラムがサンプル1です。deviceorientationイベントが発生したら、方角と誤差を表示するだけのシンプルなプログラムです。

iPhoneを動かすとリアルタイムで方角と誤差が表示される

■サンプル1


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>コンパスの値を表示</title>
    <script>
      window.addEventListener("deviceorientation", function(e){
        var ch = e.webkitCompassHeading;
        var chAcc = e.webkitCompassAccuracy;
        var text = "方角："+ch+"　誤差："+chAcc;
        document.getElementById("result").innerHTML = text;
      }, false);
    </script>
  </head>
  <body>
    <h1>コンパスの値を表示</h1>
    <div id="result">0</div>
  </body>
</html>

コンパス画像を表示する

　第78回で作った、コンパス画像をリアルタイムで回転させるプログラムをiOS 5用に変更します（サンプル2）。CSS部分はまったく同じで、コンパスの値を取得する部分だけが異なります。コンパスの値を取得する処理は、基本的にはサンプル1と同じですが、コンパスが干渉して正しい値が得られなかったときの処理を追加しています。

　コンパスは磁力を利用しているので、近くに磁石があると正しい方角を返せません。たとえば、iPhone標準の地図アプリでは、方角が求められない場合に「コンパスの干渉」と表示されます。iOS 5のJavaScriptでは、方角が取得できない場合、webkitCompassAccuracyの値が-1になります。webkitCompassAccuracyの値が-1の場合は、ユーザーにiPhoneを8の字に動かすようにメッセージを表示します。

本体を動かすとコンパス画像が方角に合わせて回転する

コンパスの値が得られない場合は図のようなメッセージが表示される

■サンプル2


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>コンパスの値を表示</title>
    <style type="text/css">
      #container{
        width: 100%;
        text-align: center;
      }
      #compass {
        -webkit-transform :rotate(0deg);
      }
    </style>
    <script>
      window.addEventListener("deviceorientation", function(e){
        var ch = e.webkitCompassHeading;
        var chAcc = e.webkitCompassAccuracy;
        if (chAcc == -1){
          var text = "干渉！コンパスを8の字に動かしてください";
          ch = 0;  // とりあえず方角を0（北）にする
        }else{
          var text = "方角："+ch+"　誤差："+chAcc;
        }
        document.getElementById("result").innerHTML = text;
        document.getElementById("compass").style.WebkitTransform = "rotate(-"+ch+"deg)";
      }, false);
    </script>
  </head>
  <body>
    <h1>コンパスの値を表示</h1>
    <div id="result">0</div>
    <div id="container">
      <img src="compass.gif" id="compass" width="220" height="220">
    </div>
  </body>
</html>