このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第47回

iOS 4.2の新機能で作るHTML5+JSアプリ

2010年12月01日 10時00分更新

古籏一浩

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

水準器アプリを作ろう

 最後に水準器アプリを作りましょう。水準器を作るには、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を傾けると画面上の青いカーソルが移動します。カーソルの動きは一般的な水準器に合わせてあります。

【図】fig07.png
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アプリケーションを作成している人にとっては非常にメリットの大きいバージョンアップですので、新機能をぜひ試してみてはどうでしょうか。

Web Professionalトップへ

この連載の記事

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

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

ASCII.jp会員サービス 週刊Web Professional登録

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