ユーザーの位置情報の検出 (HTML)
このチュートリアルでは、Windows ランタイム地理位置情報 API を使ってユーザーの地理的な位置を検出するために必要な手順を説明します。
目標: ここで説明するのは、ユーザーの地理的な位置を検出する最も簡単な方法です。 このチュートリアルでは、位置データを 1 回だけ要求する簡単なアプリを作成します。メール メッセージに地理位置情報タグを付けるなど、1 回のタスクでしか位置情報を使わないアプリであれば、この例に示すように getGeoPositionAsync の呼び出しを 1 回行うだけで十分な可能性があります。位置情報が必須のアプリや位置情報の更新が必要なアプリでは、位置情報イベントを処理する必要があります。方法については、「位置情報の更新に対応する方法」をご覧ください。
必要条件
HTML と JavaScript について理解している必要があります。
手順
1. 位置情報が有効になっていることを確認する
アプリが位置情報にアクセスする前に、デバイスで [位置情報] を有効にする必要があります。設定アプリで、次の位置情報に関するプライバシー設定がオンになっていることを確認します。
- [このデバイスの位置情報] が [オン] になっている (Windows 10 Mobile には適用されません)
- 位置情報サービス設定の [位置情報] が [オン] になっている
- [位置情報を使うことができるアプリを選ぶ] で、アプリが [オン] になっている
2. Microsoft Visual Studio を開く
Visual Studio のインスタンスを開きます。
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("#getLocation").addEventListener("click",
getLoc);
}));
}
};
var loc = null;
function getLoc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
}
}
function getPositionHandler(pos) {
document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
function errorHandler(e) {
document.getElementById('errormsg').innerHTML = e.message;
// Display an appropriate error message based on the location status.
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
function getStatusString(locStatus) {
switch (locStatus) {
case Windows.Devices.Geolocation.PositionStatus.ready:
// Location data is available
return "Location is available.";
break;
case Windows.Devices.Geolocation.PositionStatus.initializing:
// This status indicates that a GPS is still acquiring a fix
return "A GPS device is still initializing.";
break;
case Windows.Devices.Geolocation.PositionStatus.noData:
// No location data is currently available
return "Data from location services is currently unavailable.";
break;
case Windows.Devices.Geolocation.PositionStatus.disabled:
// The app doesn't have permission to access location,
// either because location has been turned off.
return "Your location is currently turned off. " +
"Change your settings through the Settings charm " +
" to turn it back on.";
break;
case Windows.Devices.Geolocation.PositionStatus.notInitialized:
// This status indicates that the app has not yet requested
// location data by calling GetGeolocationAsync() or
// registering an event handler for the positionChanged event.
return "Location status is not initialized because " +
"the app has not requested location data.";
break;
case Windows.Devices.Geolocation.PositionStatus.notAvailable:
// Location is not available on this version of Windows
return "You do not have the required location services " +
"present on your system.";
break;
default:
break;
}
}
app.start();
})();
6. アプリの HTML を追加する
Windows プロジェクトと Windows Phone プロジェクトの default.html ファイルを開き、ファイルの BODY タグ内に次の HTML をコピーします。
<div>
<p>Click "Get Location" to get geolocation data.</p>
<br />
<button id="getLocation">getLocation</button> <br />
</div>
<br/>
<div>
Latitude: <span id="latitude"></span><br />
Longitude: <span id="longitude"></span><br />
Accuracy (in meters): <span id="accuracy"></span><br />
Location Status: <span id="geolocatorStatus"></span><br />
Error Message: <span id="errormsg"></span><br />
</div>
7. アプリをビルドする
[ビルド]、[ソリューションのビルド] の順にクリックして、プロジェクトをビルドします。
8. アプリをビルドする
[ビルド]、[ソリューションのビルド] の順にクリックして、プロジェクトをビルドします。
9. アプリをテストする
- [デバッグ]、[デバッグ開始] の順にクリックし、ソリューションをテストします。
- サンプルを初めて実行するときは、アプリで位置情報を使ってよいかどうかを確認するメッセージが表示されます。[許可] をクリックします。
- [Get Location] (位置情報の取得) をクリックして、現在の位置を取得します。
要約
このクイック スタートでは、ユーザーの現在の位置を検出する簡単なアプリを作成しました。
位置情報の要求を開始するコードを次に示します。このコードでは、Geolocator オブジェクトを作成し、getGeoPositionAsync を呼び出して、成功と失敗のそれぞれについてハンドラーを指定しています。
function getloc() {
if (loc == null) {
loc = new Windows.Devices.Geolocation.Geolocator();
}
if (loc != null) {
loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
}
}
位置を検出できた場合は、getPositionHandler 関数で緯度、経度、精度を表示します。
function getPositionHandler(pos) {
document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}
位置の検出に失敗した場合は、errorHandler 関数で getStatusString ヘルパー関数を呼び出して、該当する状態メッセージを表示します。
function errorHandler(e) {
document.getElementById('errormsg').innerHTML = e.message;
// Display an appropriate error message based on the location status.
document.getElementById('geolocatorStatus').innerHTML =
getStatusString(loc.locationStatus);
}