加速度センサーとは、端末の傾きを検知するセンサーのことです。一般的なモバイル端末にはこの加速度センサーが内蔵されています。Monacaではデバッガーアプリを使うことで、x、y、z の3 つの軸の傾きを数値化した値を取得できます。

諸注意

devicereadyの使用

モバイル端末のハードウェア機能を呼び出すため、MonacaIDEのプレビューでは動作しません。デバッガーアプリをご用意ください。また、ハードウェア機能の呼び出しにはアプリ内で準備が必要なため、deviceready イベントを考慮する必要があります。

サンプルアプリ

書籍のサポートページから入手して下さい。
ひな形版と完成版をご用意しております。

加速度センサーのxyz軸について

傾きの定期取得とタイマー処理

今回作成するアプリでは、定期的に傾きの情報を取得するため、一定間隔で関
数を定期実行するタイマー処理を利用します。タイマー処理を実行するには、以下のJavaScript 命令を実行します。


setInterval( 定期実行する関数, 実行間隔);

第一引数で指定した関数を、第二引数で指定した実行間隔で繰り返し実行します。実行間隔は、1ミリ秒単位で指定します。仮に0.3 秒おきに関数を実行したい場合は、第二引数に「300」を指定します。

サンプルコード（ひな形版）

ひな形版にはHTMLのみが記載されています。


<body>
    <div id="wrapper">
        <div id="target"></div>
    </div>
</body>

STEP1：加速度の値を取れるようにする


document.addEventListener("deviceready", function() {
    setInterval(timer, 300);
});

function timer() {
    navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}

function onSuccess(acceleration) {
    console.log("x: " + acceleration.x);
    console.log("y: " + acceleration.y);
    console.log("z: " + acceleration.z);
}
    
function onError() {
    console.log("Error!");
}

解説

今回のアプリは起動直後からタイマーを発動して加速度を常にとり続けるような作りになっています。まずはタイマーの部分を解説します。


document.addEventListener("deviceready", function() {
    setInterval(timer, 300);
});

「document.addEventListener()」は、イベントリスナーに関する命令です。監視したいイベントと実行したい関数を指定することで、イベントに応じて関数を実行できます。

今回はdevicereadyイベントが発生するタイミングで、setInterval()関数を実行しています。devicereadyは端末のハードウェア機能の利用がOKになったタイミングで発生するイベントなので、このイベントが発動したタイミングでタイマーも発動することにします。
（イベントが発生することを技術用語では「発火」と呼びます。）

setInterval(timer, 300)の部分では、300ミリセカンド毎にtimer()関数を呼ぶように記述しています。

timer()関数

今回setIntervalで300ミリセカンド毎に呼び出される関数です。

加速度センサーを取得する「navigator.accelerometer.getCurrentAcceleration()」関数を呼んでいます。この関数では加速度の取得に成功したときにonSuccess()、失敗したときにonError()を実行させています。

onSuccess()関数

加速度センサーの値が取得できたときに実行する関数として定義しています。今回のサンプルでは加速度センサーの値をconsole.log()でログに書き出しています。

onError()関数

加速度センサーの値の取得に失敗したときに実行する関数として定義しています。エラーがあった事をconsole.log()でログに書き出しています。

STEP2：加速度の値に合わせて画面に■を表示する

加速度の取得に成功したときに実行されるonSuccess()関数の中を書き換えることで、加速度の値に合わせて表示内容を変えるようなアプリを作ることができます。

先ほどのサンプルに２行ほど追加して、以下のように改造してみます。


function onSuccess(acceleration) {
    console.log("x: " + acceleration.x);
    console.log("y: " + acceleration.y);
    console.log("z: " + acceleration.z);
    var x = acceleration.x * -20;
    document.getElementById("target").style.left = x + "px";
}

端末を左右に傾けると、それと連動して中央の赤い四角形も左右に移動するようになります。

加速度の解説

今回は、x 軸の傾き情報を利用して■を移動させています。

x 値は、右に傾けると正の値、左に傾けると負の値になり、およそ－ 5 ～ 5の範囲の値が取得されます。
（加速度はm/s2 という単位で表現されます。単位についての説明はここでは割愛します）。


var x = acceleration.x * -20;

xの値は0～-5と値が小さいため「-20」を掛け算しています。この計算により、-100 ～ 100の範囲での数字が得られることになります。また、負数を掛けることによって正負を反転させています。


document.getElementById("target").style.left = x + "px";

HTMLとCSSで画面に表示している■の位置を、leftプロパティにて変更しています。