このページの本文へ

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

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

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

古籏一浩

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

加速度センサーの値を取得する

 加速度センサーの値を取得してみましょう。iPhone/iPadの傾きが変化するとdevicemotionというイベントが発生します。イベントが発生した時点で傾きを取得するイベントハンドラを呼び出すと、イベントハンドラ(関数)にはイベントオブジェクトが渡されます。加速度を示すプロパティは、イベントオブジェクト内のaccelerationオブジェクトに用意されています。

 accelerationオブジェクトには上下・左右の方向の傾きを示すx,y,zプロパティがあり、xが左〜右、yが手前〜奥、zが上〜下の加速度を示します。x, yプロパティの値は小数値で、単位はm/s2です。

 iPhone/iPadでは傾きの値も取得できます。傾きの値は、イベントオブジェクトのaccelerationIncludingGravityオブジェクトにあるx,y,zプロパティに格納されています。値はxが左〜右、yが手前〜奥、zが上〜下です。accelerationIncludingGravityで得られる値は角度ではなく、重力加速度(9.80665)を基準にした値になります。z方向(上下方向)でiPhone/iPadを机に置いた状態では、zの値は-9.8近辺になります(表示画面を下に向ける、逆さにすると+9.8近辺の値になります)。

 さらに、どの方向にどのくらいの速度で傾けたのか(回転させたか)も取得できます。イベントオブジェクトのrotationRateにあるalpha, beta, gammaという名前のプロパティです。それぞれが示す方向についてはW3Cのサイトに解説と図が用意されているので参照してください。

DeviceOrientation Event Specification
http://dev.w3.org/geo/api/spec-source-orientation.html

 サンプル01は、iPhone/iPadを傾けたり上昇させたりしたときの加速度と傾きを表示します。

【図】fig05.png
iPhone/iPadを傾けたり動かしたりすると値が変化する

サンプル1[HTML]

<!DOCTYPE html> 
<html> 
  <head> 
  <meta charset="UTF-8" /> 
    <title>加速度/傾きセンサーの値を表示</title>
    <script type="text/javascript" src="js/sample.js"></script>
  </head>
  <body>
    <h1>加速度/傾きセンサーの値を表示</h1>
    <div id="sensor"></div>
  </body>
</html>

サンプル1[sample.js]

window.addEventListener("devicemotion", function(evt){
  var x = evt.acceleration.x;  // X方向の加速度
  var y = evt.acceleration.y;  // Y方向の加速度
  var z = evt.acceleration.z;  // Z方向の加速度
  var xg = evt.accelerationIncludingGravity.x;  // X方向の傾き
  var yg = evt.accelerationIncludingGravity.y;  // Y方向の傾き
  var zg = evt.accelerationIncludingGravity.z;  // Z方向の傾き
  var a = evt.rotationRate.alpha;  // Z方向の回転値
  var b = evt.rotationRate.beta; // X方向の回転値
  var g = evt.rotationRate.gamma;  // Y方向の回転値
  var txt = "x:"+x+"<br>y:"+y+"<br>z:"+z+"<br>";
  txt += "傾きx:"+xg+"<br>傾きy:"+yg+"<br>傾きz:"+zg+"<br>";
  txt += "alpha(Z):"+a+"<br>beta(X):"+b+"<br>gamma(Y):"+g;
  document.getElementById("sensor").innerHTML = txt;
}, true);
Web Professionalトップページバナー

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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング