クイック スタート: 加速度計によるユーザーの動きへの応答 (HTML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

加速度計を使うと、JavaScript で記述されたアプリでユーザーの動きに応答できます。加速度計を利用したアプリは、一般的に、1 軸または 2 軸のみを入力に使います。ただし、もう 1 つの入力ソースとしてシェイク イベントを使用する場合もあります。

目標: このクイック スタートを完了すると、加速度計を使って動きの変化を検出する方法を理解できます。

必要条件

HTML、JavaScript、イベントについて理解している必要があります。

使うデバイスやエミュレーターが加速度計をサポートしている必要があります。

完了までの時間: 15 分.

手順

1. Microsoft Visual Studio を開く

Visual Studio のインスタンスを開きます。

2. 新しいプロジェクトを作る

[JavaScript/ストア アプリ] のプロジェクトの種類を選び、[空のアプリケーション] を選んで、新しいプロジェクトを作ります。

3. JavaScript コードを置き換える

プロジェクトの default.js ファイルを開き、記載されているコードを次のコードで置き換えます。

// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var accelerometer;

    var app = WinJS.Application;

    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            if (accelerometer == null) {
                accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();

                // Establish the report interval
                var minimumReportInterval = accelerometer.minimumReportInterval;
                var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
                accelerometer.reportInterval = reportInterval;

                // Establish the event handler
                accelerometer.addEventListener("readingchanged", onDataChanged);
            }
            WinJS.UI.processAll();
        }
    };

    // This function is called each time an accelerometer event
    // is fired by the driver.
    function onDataChanged(e) {
        var reading = e.reading;
        var accelX = reading.accelerationX;
        var accelY = reading.accelerationY;
        var accelZ = reading.accelerationZ;

        id('eventOutputX').innerHTML = accelX.toFixed(2);
        id('eventOutputY').innerHTML = accelY.toFixed(2);
        id('eventOutputZ').innerHTML = accelZ.toFixed(2);
    }

    // This function is invoked within onDataChanged to
    // retrieve the given identifier from the HTML document.
    function id(elementId) {
        return document.getElementById(elementId);
    }

    app.start();
})();

4. アプリの HTML を追加する

Windows プロジェクトと Windows Phone プロジェクトの default.html ファイルを開き、ファイルの BODY タグ内に次の HTML をコピーします。


    <div class="item" id="scenarioOutput">
    X: <a id="eventOutputX">no data</a>
    <br />
    Y: <a id="eventOutputY">no data</a>
    <br />
    Z: <a id="eventOutputZ">no data</a>
    <br />
    </div>

5. アプリをビルドし、展開し、実行する

アプリをビルド、展開、実行するには、F5 キーを押すか、[デバッグ][デバッグの開始] の順にクリックします。

アプリを実行した後、デバイスを移動するか、エミュレーター ツールを使うことによって、加速度計値を変更できます。

6. アプリを停止する

  1. Alt キーを押しながら Tab キーを押して、Visual Studio に戻ります。
  2. Shift キーを押しながら F5 キーを押すか、[デバッグ][デバッグの停止] の順にクリックして、アプリを停止します。

要約と次のステップ

上に示した例では、ごく短いコードを作成するだけで、加速度計の入力をアプリに組み込むことができることがわかります。

このアプリでは、onactivated 関数で、既定の加速度計との接続を確立しています。これは次の行の中で実行されます。

accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();

onDataChanged 関数で、新しい加速度計データをキャプチャしています。センサーのドライバーは、センサーから新しいデータを受け取るたびに、この関数 (またはイベント ハンドラー) を使ってアプリに値を渡します。このアプリの場合、このイベント ハンドラーが次の行で登録されています。

accelerometer.addEventListener("readingchanged", onDataChanged);

次に示す DOM 要素の更新によって、この新しい値が画面に書き込まれます。

    <div class="item" id="scenarioOutput">
    X: <a id="eventOutputX">no data</a>
    <br />
    Y: <a id="eventOutputY">no data</a>
    <br />
    Z: <a id="eventOutputZ">no data</a>
    <br />
    </div>

このアプリでは、onactivated 関数で、レポート間隔を設定しています。このコードは、デバイスでサポートされる最小の間隔を取得し、要求される 16 ミリ秒の間隔 (約 60 Hz のリフレッシュ レート) と比較します。サポートされる最小の間隔が要求される間隔よりも大きい場合は、値を最小値に設定します。それ以外の場合は、値を要求される間隔に設定します。

var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;

シンプルなアプリを作成する場合は、以後の手順で、加速度計の入力にグラフィック出力を組み合わせることが一般的です。

たとえば、ユーザーの移動をグラフィカルに表示する歩数計を作成できます。

関連トピック

Accelerometer class

加速度計センサーのサンプルに関するページ