クイック スタート: コンパスによる現在の方位の検出 (HTML)

  • [アーティクル]

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

コンパスを使うと、JavaScript で記述されたアプリで現在の方位を検出できます。

ナビゲーション アプリでは、コンパスを使ってデバイスが向いている方位を検出し、それに応じて地図の向きを設定します。

目標: このクイック スタートを完了すると、コンパスを使って方位の変化を検出する方法を理解できます。

必要条件

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 compass;

    var app = WinJS.Application;

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

    // This function is called each time a compass event
    // is fired by the driver.
    function onDataChanged(e) {
        var reading = e.reading;
        id('txtMagNorth').innerHTML = reading.headingMagneticNorth.toFixed(2);
        if (reading.headingTrueNorth != null) {
            id('txtTrueNorth').innerHTML = reading.headingTrueNorth.toFixed(2);
        }
    }

    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Retrieve the default compass and
            compass = Windows.Devices.Sensors.Compass.getDefault();

            // Choose a report interval supported by the sensor
            var minimumReportInterval = compass.minimumReportInterval;
            var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
            compass.reportInterval = reportInterval;

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

    app.start();
})();

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

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



    <div class="item" id="scenario1Output">
        Magnetic North: <a id="txtMagNorth">no data</a>
        <br />
        True North: <a id="txtTrueNorth">no data</a>
    </div>

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

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

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

6. アプリを停止する

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

要約と次のステップ

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

このアプリでは、onactivated 関数で、既定のコンパスとの接続を確立しています。これは次の行の中で実行されます。

compass = Windows.Devices.Sensors.Compass.getDefault();

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

compass.addEventListener("readingchanged", onDataChanged);

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

    <div class="item" id="scenario1Output">
        Magnetic North: <a id="txtMagNorth">no data</a>
        <br />
        True North: <a id="txtTrueNorth">no data</a>
    </div>

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

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

ナビゲーション アプリを作成する場合は、以後の手順で、コンパス入力を使って地図の向きを制御します。

関連トピック

Compass class

コンパス センサーのサンプルに関するページ