HTML5 を使った位置情報の更新への対応 (HTML) - Windows app development

[アーティクル]
09/30/2015

このトピックでは、HTML5 の W3C 地理位置情報 API を使って、ユーザーの地理的な位置の変更に対応する方法を説明します。

必要条件

HTML と JavaScript について理解している必要があります。

手順

ステップ 1: Microsoft Visual Studio を開く

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

ステップ 2: 位置情報が有効になっていることを確認する

アプリが位置情報にアクセスする前に、デバイスで [位置情報] を有効にする必要があります。設定アプリで、次の位置情報に関するプライバシー設定がオンになっていることを確認します。

[このデバイスの位置情報] が [オン] になっている (Windows 10 Mobile には適用されません)
位置情報サービス設定の [位置情報] が [オン] になっている
[位置情報を使うことができるアプリを選ぶ] で、アプリが [オン] になっている

ステップ 3: 新しいプロジェクトを作る

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

ステップ 4: 位置情報機能を有効にする

Windows プロジェクトと Windows Phone プロジェクトの両方について、ソリューションエクスプローラーで package.appxmanifest をダブルクリックし、[機能] タブを選びます。[機能] の一覧で、[位置情報] をオンにします。これにより、Location デバイス機能がパッケージマニフェストファイルに追加されます。

  <Capabilities>
    <!-- DeviceCapability elements must follow Capability elements (if present) -->
    <DeviceCapability Name="location"/>
  </Capabilities>

ステップ 5: JavaScript コードを置き換える

共有プロジェクトで、default.js (/js/default.js) を開きます。ファイル内のコードを次のコードに置き換えます。

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {

            args.setPromise(WinJS.UI.processAll().
                done(function () {

                    // Add an event handler to the button.
                    document.querySelector("#watchLoc").addEventListener("click",
                        watchloc);

                    // Add an event handler to the button.
                    document.querySelector("#stopWatching").addEventListener("click",
                        stopwatching);

                }));
        }
    };

    var loc = null;
    var watchId;

    function watchloc() {
        if (loc == null) {
            loc = window.navigator.geolocation;
        }
        if (loc != null) {
            watchId = loc.watchPosition(successCallback);
        }
    }

    function stopwatching() {
        loc.clearWatch(watchId);
    }

    function successCallback(pos) {
        document.getElementById('latitude').innerHTML = pos.coords.latitude;
        document.getElementById('longitude').innerHTML = pos.coords.longitude;
        document.getElementById('accuracy').innerHTML = pos.coords.accuracy;
    }

    function errorCallback(error) {
        var strMessage = "";

        // Check for known errors
        switch (error.code) {
            case error.PERMISSION_DENIED:
                strMessage = "Access to your location is turned off. " +
                    "Change your settings to turn it back on.";
                break;
            case error.POSITION_UNAVAILABLE:
                strMessage = "Data from location services is " +
                    "currently unavailable.";
                break;
            case error.TIMEOUT:
                strMessage = "Location could not be determined " +
                    "within a specified timeout period.";
                break;
            default:
                break;
        }
        document.getElementById("status").innerHTML = strMessage;
    }


    app.start();
})();

ステップ 6: アプリの HTML を追加する

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

    Geolocation Event Sample<br />
    <br />

    <button id="watchLoc">Watch Location</button><br />
    <button id="stopWatching">Stop Watching</button><br />
    Latitude: <span id="latitude">Waiting for update...</span><br />
    Longitude: <span id="longitude">Waiting for update...</span><br />
    Accuracy: <span id="accuracy">Waiting for update...</span><br />
    <span id="status"> </span><br />

ステップ 7: アプリをビルドする

[ビルド]、[ソリューションのビルド] の順にクリックして、プロジェクトをビルドします。

ステップ 8: アプリをテストする

[デバッグ]、[デバッグ開始] の順にクリックし、ソリューションをテストします。
サンプルを初めて実行するときは、アプリで位置情報を使ってよいかどうかを確認するメッセージが表示されます。[許可] オプションをクリックします。
[Get Location] (位置情報の取得) をクリックして、現在の位置を取得します。

注釈

位置情報サービスでは、さまざまな情報源を使って位置を特定します。GPS、携帯電話の基地局、Wi-Fi を使うことができない場合は、IP アドレスを代わりに使います。そのような場合は、IP アドレスデータが頻繁に更新されないので、位置情報更新イベントを取得できない可能性があります。

次の方法で共有