From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/geolocation_api/index.html | 100 ++++++++++++ .../using_the_geolocation_api/index.html | 171 +++++++++++++++++++++ 2 files changed, 271 insertions(+) create mode 100644 files/ja/web/api/geolocation_api/index.html create mode 100644 files/ja/web/api/geolocation_api/using_the_geolocation_api/index.html (limited to 'files/ja/web/api/geolocation_api') diff --git a/files/ja/web/api/geolocation_api/index.html b/files/ja/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..d4489cdebf --- /dev/null +++ b/files/ja/web/api/geolocation_api/index.html @@ -0,0 +1,100 @@ +--- +title: 位置情報 API +slug: Web/API/Geolocation_API +tags: + - Geolocation API + - Guide + - Intermediate + - Overview + - ガイド + - 位置情報 + - 概要 +translation_of: Web/API/Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

位置情報 (Geolocation) API を使用すると、ユーザーが望む場合には、自分の位置情報をウェブアプリケーションに提供することができます。プライバシー上の理由から、ユーザーは位置情報を報告する許可を求められます。

+ +

Geolocation オブジェクトを使用する WebExtension では、マニフェストに "geolocation" パーミッションを追加しなければなりません。ユーザーのオペレーティングシステムは、最初に要求されたときに位置情報へのアクセスを許可するようにユーザーに促します。

+ +

概念と使用方法

+ +

ウェブアプリでユーザーの位置情報を取得したいと思うことはよくあります。例えば、ユーザーの位置を地図上にプロットしたり、ユーザーの位置に関連するパーソナライズされた情報を表示したりすることができます。

+ +

位置情報 APIは {{domxref("Navigator.geolocation", "navigator.geolocation")}} への呼び出しを介してアクセスします。これにより、ブラウザーはユーザーに自分の位置情報にアクセスする許可を要求します。ユーザーが許可すると、ブラウザーは端末上で利用可能な最良の機能を使用してこの情報にアクセスします (GPS など)。

+ +

開発者は、いくつかの異なる方法でこの位置情報にアクセスできるようになりました。

+ + + +

どちらの場合も、メソッド呼び出しには最大3つの引数を取ります。

+ + + +

位置情報の使用に関するさらなる情報は、位置情報 API の使用を参照してください。

+ +

インターフェイス

+ +
+
{{domxref("Geolocation")}}
+
この API のメインクラスです。ユーザーの現在位置の取得、位置の変化の監視、および以前に設定した管理のクリアを行うメソッドが含まれています。
+
{{domxref("GeolocationPosition")}}
+
ユーザの位置を表します。 GeolocationPosition インスタンスは、 {{domxref("Geolocation")}} に含まれるメソッドのいずれかの呼び出しが成功した場合に、成功コールバックの内部で返され、タイムスタンプと {{domxref("GeolocationCoordinates")}} オブジェクトのインスタンスが含まれます。
+
{{domxref("GeolocationCoordinates")}}
+
ユーザーの位置の座標を表します。 GeolocationCoordinates のインスタンスには、緯度、経度、その他の重要な関連情報が含まれています。
+
{{domxref("GeolocationPositionError")}}
+
GeolocationPositionError は、 {{domxref("Geolocation")}} に含まれるメソッドのいずれかの呼び出しに失敗した場合、エラーコールバック内で返され、エラーコードとメッセージが含まれています。
+
{{domxref("Navigator.geolocation")}}
+
API のエントリーポイント。 {{domxref("Geolocation")}} オブジェクトのインスタンスを返し、そこから他のすべての機能にアクセスすることができます。
+
+ +

辞書

+ +
+
{{domxref("PositionOptions")}}
+
{{domxref("Geolocation.getCurrentPosition()")}} と {{domxref("Geolocation.watchPosition()")}} の引数として渡すオプションを含むオブジェクトを表します。
+
+ +

例

+ +

{{page("/ja/docs/Web/API/Geolocation_API/Using_the_Geolocation_API","Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Geolocation")}}{{Spec2("Geolocation")}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Geolocation")}}

+ +

可用性

+ +

WiFi ベースの測位は Google が提供することが多いため、中国ではバニラの位置情報 API が利用できない場合があります。 Baidu, Autonavi, Tencent などの地域ののサードパーティプロバイダを使用することができます。これらのサービスは、ユーザーの IP アドレスおよび/またはローカルアプリを使用して、より高度な位置情報を提供します。

+ +

関連情報

+ + diff --git a/files/ja/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/ja/web/api/geolocation_api/using_the_geolocation_api/index.html new file mode 100644 index 0000000000..a63fd348a2 --- /dev/null +++ b/files/ja/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -0,0 +1,171 @@ +--- +title: 位置情報 API の使用 +slug: Web/API/Geolocation_API/Using_the_Geolocation_API +tags: + - Geolocation API + - Guide + - Tutorial + - 位置情報 +translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

位置情報 (Geolocation) API により、ユーザーは希望すれば自身の場所をウェブアプリケーションに通知することができるようになります。この記事では、その使い方の基本を説明します。

+ +

geolocation オブジェクト

+ +

位置情報 API は {{domxref("navigator.geolocation")}} オブジェクトを通じて利用できます。

+ +

このオブジェクトが存在していれば、位置情報サービスを利用することができます。よって以下のようなコードでの存在を確認することができます。

+ +
if('geolocation' in navigator) {
+  /* geolocation is available */
+} else {
+  /* geolocation IS NOT available */
+}
+
+ +

現在位置の取得

+ +

ユーザーの現在位置を取得するには、 {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} メソッドを呼び出します。このメソッドはユーザーの現在位置を特定するための非同期通信を開始するとともに、位置取得デバイスから最新の情報を取得します。現在位置が特定されるとコールバック関数が実行されます。また、オプションとして第二引数にコールバック関数を指定することで、エラー発生時に実行される関数を指定することができます。省略可能な第三引数は、最大試行回数、要求待ち時間、高精度の位置情報を求めるかを指定するオブジェクトです。

+ +
+

注: 既定では、 {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} は低精度の結果を使いなるべく速く応答しようとします。これは、正確さに関わらず速い応答を必要とする場合に役立ちます。例えば GPS を備えている端末でも GPS が確定するまでには数分以上かかる可能性がありますので、 getCurrentPosition() からは (IP ロケーションや Wi-Fi による) 低精度のデータを返すことがあります。

+
+ +
navigator.geolocation.getCurrentPosition((position) => {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});
+ +

上記の例では、位置情報が取得でき次第 doSomething() 関数が実行されます。

+ +

現在位置の監視

+ +

位置情報が変化した場合 (端末が移動した時やより正確な位置情報が得られた時) は、位置情報の更新と同時に呼び出されるコールバック関数を指定することができます。これは {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} メソッドと同じ引数を持つ {{domxref("Geolocation.watchPosition","watchPosition()")}} メソッドを使うことで実現できます。コールバック関数は繰り返し呼び出され、ブラウザーは移動に応じて位置情報を更新したり、位置の特定に別の技術を使用することでより詳細な位置情報を提供したりすることが可能です。エラー発生時に呼び出されるコールバック関数は getCurrentPosition() と同様に任意指定であり、繰り返し呼び出される場合があります。

+ +
+

注: 初めに {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} を呼び出すことなく、{{domxref("Geolocation.watchPosition()","watchPosition()")}} を使用することができます。

+
+ +
const watchID = navigator.geolocation.watchPosition((position) => {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});
+ +

{{domxref("Geolocation.watchPosition","watchPosition()")}} メソッドは、位置監視の登録を識別する ID 番号を返します。この ID 番号を {{domxref("Geolocation.clearWatch","clearWatch()")}} メソッドに渡すことでユーザーの位置監視を終了させることができます。

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

応答の微調整

+ +

{{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}} および {{domxref("Geolocation.watchPosition","watchPosition()")}} は成功時のコールバック、省略可能なエラー時のコールバック、そして省略可能な {{domxref("PositionOptions")}} オブジェクトを受け取ります。

+ +

このオブジェクトでは、高精度を有効にするかどうか、返された位置値の使用期限 (この期限までは、同じ位置が再度要求された場合にキャッシュされて再利用され、それ以降はブラウザーが新しい位置データを要求します)、タイムアウトする前にブラウザーがどのくらいの時間位置データを取得しようとするかを指定するタイムアウト値を指定することができます。

+ +

{{domxref("Geolocation.watchPosition","watchPosition")}} の呼び出しは以下のようになります:

+ +
function success(position) {
+  doSomething(position.coords.latitude, position.coords.longitude);
+}
+
+function error() {
+  alert('Sorry, no position available.');
+}
+
+const options = {
+  enableHighAccuracy: true,
+  maximumAge: 30000,
+  timeout: 27000
+};
+
+const watchID = navigator.geolocation.watchPosition(success, error, options);
+ +

位置の表現

+ +

ユーザーの位置は {{domxref("GeolocationPosition")}} オブジェクトインスタンスを使用して記述され、それ自体が {{domxref("GeolocationCoordinates")}} オブジェクトインスタンスを含んでいます。

+ +

GeolocationPosition インスタンスが持つ情報は2つだけで、 coords プロパティは GeolocationCoordinates インスタンスを持っており、 timestamp プロパティは位置データが取得された時刻を表す {{domxref("DOMTimeStamp")}} インスタンスを持ちます。

+ +

GeolocationCoordinates インスタンスにはいくつかのプロパティがありますが、最も一般的に使用されるのは latitude and longitude の 2 つで、これは地図上に位置を描画するために必要なものです。そのため、多くの Geolocation 成功コールバックはとてもシンプルに見えます。

+ +
function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Do something with your latitude and longitude
+}
+ +

しかし GeolocationCoordinates オブジェクトからは、高度、速度、端末が向いている方向、高度、経度、緯度データの精度測定など、他にも多くの情報を得ることができます。

+ +

エラーの扱い

+ +

getCurrentPosition() や watchPosition() の呼び出し時にエラーコールバック関数を提供する場合、最初の引数が {{domxref("GeolocationPositionError")}} オブジェクトインスタンスとなります。このオブジェクト型には二つのプロパティがあります。 code は返されたエラーの種類を示し、 message は人間が読める形でエラーコードの意味を説明します。

+ +

次のように使用することができます。

+ +
function errorCallback(error) {
+  alert(`ERROR(${error.code}): ${error.message}`);
+};
+
+ +

例

+ +

以下の例では、 Geolocation API はユーザーの経度と緯度を取得するために使用されます。成功した場合、その位置を表示する openstreetmap.org の URL の有効なハイパーリンクが表示されます。

+ + + +

HTML

+ +
<button id = "find-me">Show my location</button><br/>
+<p id = "status"></p>
+<a id = "map-link" target="_blank"></a>
+
+ +

JavaScript

+ +
function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if(!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 350, 150)}}

-- cgit v1.2.3-54-g00ecf