このページの本文へ

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

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

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

コンパスの値を表示する

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

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

webkitCompassHeading方角(0~360未満)
webkitCompassAccuracy方角の誤差(角度)

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

 コンパスの値をリアルタイムで表示するプログラムがサンプル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の字に動かすようにメッセージを表示します。

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

【図】fig05.png

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

■サンプル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>

W3Cでのコンパスの誤差の扱い

 W3Cの「DeviceOrientation Event」の仕様書(ワーキングドラフト)では、iOS 5のSafariの実装とは異なり、コンパスが正しく動作しない場合にcompassneedscalibrationが発生することになっています。

http://www.w3.org/TR/2011/WD-orientation-event-20111201/orientation-fpwd-lc-diff.html

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く