Geolocation API を使用すると、ユーザーの同意を得たうえで、ユーザーの位置情報を取得できます。
Geolocation API を使用すると、ユーザーの同意を得たうえで、ユーザーの位置情報を取得できます。この機能は、ユーザーを目的地に案内したり、ユーザー作成コンテンツに位置情報を付加したり（写真の撮影場所をマークするなど）する際に使用できます。
Geolocation API を使用すると、ユーザーの同意を得たうえで（かつ、ページが開いている間のみ）、ユーザーの現在地を確認したり、移動中のユーザーを追跡したりすることもできます。これにより、ユーザーが近くにいる場合にバックエンド システムと統合して注文の受け取りを準備するなど、多くの興味深いユースケースが生まれます。
Geolocation API を使用する際には、多くの点に注意する必要があります。このガイドでは、一般的なユースケースとソリューションについて説明します。
概要
- ユーザーにメリットがある場合は位置情報を使用します。
- ユーザー ジェスチャーに対する明確な応答として権限をリクエストする。
- ユーザーのブラウザが位置情報をサポートしていない場合に備えて、機能検出を使用します。
- 位置情報の実装方法だけでなく、位置情報の最適な使用方法も学びましょう。
- サイトで位置情報をテストします。
位置情報を使用するタイミング
- ユーザーが特定の物理的な場所に最も近い場所を特定して、ユーザー エクスペリエンスをカスタマイズします。
- ユーザーの現在地に合わせて情報（ニュースなど）をカスタマイズする。
- 地図上にユーザーの位置を表示する。
- アプリケーション内で作成されたタグデータにユーザーの位置情報を付加する（写真にジオタグを付けるなど）。
責任を持って権限をリクエストする
最近のユーザー調査によると、ページの読み込み時に位置情報の提供を求めるだけのサイトは、ユーザーから不信感を持たれることがわかっています。では、ベスト プラクティスとは何でしょうか？
ユーザーが位置情報を提供しないことを想定する
多くのユーザーは位置情報の提供を望まないため、防御的な開発スタイルを採用する必要があります。
- Geolocation API のすべてのエラーを処理して、サイトをこの条件に適応させます。
- 位置情報が必要な理由を明確かつ具体的に説明します。
- 必要に応じて、代替ソリューションを使用します。
位置情報が必要な場合は代替を使用する
サイトまたはアプリケーションで、ユーザーの現在地へのアクセスを必須にしないことをおすすめします。ただし、サイトやアプリケーションでユーザーの現在地が必要な場合は、サードパーティのソリューションを使用して、ユーザーの現在地を推測できます。
これらのソリューションは、多くの場合、ユーザーの IP アドレスを調べて、RIPE データベースに登録されている物理アドレスにマッピングすることで機能します。これらの位置情報はあまり正確でないことが多く、通常はユーザーに最も近い通信ハブまたは携帯電話基地局の位置が提供されます。多くの場合、特にユーザーが VPN やその他のプロキシ サービスを使用している場合は、それほど正確ではない可能性があります。
ユーザー ジェスチャーで位置情報へのアクセスを常にリクエストする
位置情報をリクエストする理由と、それによってユーザーが得られるメリットを、ユーザーが理解できるようにしてください。サイトの読み込み時にホームページですぐに位置情報をリクエストすると、ユーザー エクスペリエンスが低下します。
代わりに、ユーザーに明確な行動を促すフレーズを表示するか、操作に位置情報へのアクセスが必要であることを示す必要があります。これにより、ユーザーはアクセスを求めるシステム プロンプトを、開始したばかりのアクションに簡単に関連付けることができます。
アクションが位置情報をリクエストすることを明確に示す
Google 広告チームが実施した調査では、ユーザーが特定のホテルサイトで、今度開催される会議のためにボストンのホテルの部屋を予約するよう求められたとき、ホームページの「検索して予約」という行動を促すフレーズをタップした直後に、GPS 位置情報を共有するよう求められました。
ボストンの部屋を予約したいのに、サンフランシスコのホテルが表示される理由がわからず、ユーザーが不満を感じることもありました。
位置情報をリクエストする理由をユーザーに理解してもらうことで、ユーザー エクスペリエンスを向上させることができます。レンジファインダーなど、デバイス間で共通のよく知られたシグニファイアや、「近くで探す」などの明確な行動を促すフレーズを追加します。
![[近くの場所を検索] ボタンがあるフォーム。](https://web.developers.google.cn/static/articles/user-location/image/a-form-a-find-near-butt-9d544025fb506.png?hl=ja)
位置情報の利用許可をユーザーにやさしく促す
ユーザーの操作にはアクセスできません。ユーザーが位置情報へのアクセスを拒否したタイミングは正確に把握できますが、アクセスを許可したタイミングは把握できません。アクセス権を取得したことがわかるのは、結果が表示されたときだけです。
ユーザーにアクションを完了してもらう必要がある場合は、ユーザーにアクションを「促す」ことをおすすめします。
次のように設定することをおすすめします。
- 短い時間（5 秒が適切な値です）の後にトリガーされるタイマーを設定します。
- エラー メッセージが表示された場合は、ユーザーにメッセージを表示します。
- 肯定的なレスポンスを受け取った場合は、タイマーを無効にして結果を処理します。
- タイムアウト後に肯定的なレスポンスが得られなかった場合は、ユーザーに通知を表示します。
- レスポンスが後で届き、通知がまだ表示されている場合は、画面から削除します。
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
ブラウザ サポート
現在、ほとんどのブラウザが Geolocation API をサポートしていますが、処理を行う前にサポート状況を確認することをおすすめします。
互換性は、geolocation オブジェクトの有無をテストすることで簡単に確認できます。
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
ユーザーの現在地を特定する
Geolocation API には、ユーザーの位置情報を取得するためのシンプルな「ワンショット」メソッド getCurrentPosition() が用意されています。このメソッドを呼び出すと、ユーザーの現在地が非同期で報告されます。
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
このドメインのアプリケーションが初めて権限をリクエストする場合、通常、ブラウザはユーザーの同意を確認します。ブラウザによっては、権限の検索を常に許可または不許可にする設定もあります。その場合、確認プロセスは省略されます。
ブラウザが使用している位置情報デバイスによっては、position オブジェクトに緯度と経度以外の情報（高度や方向など）が含まれることもあります。位置情報システムが実際にデータを返すまで、その位置情報システムが使用する追加情報はわかりません。
ユーザーの位置情報を監視する
Geolocation API を使用すると、getCurrentPosition() を 1 回呼び出すだけで、ユーザーの同意を得たうえでユーザーの位置情報を取得できます。
ユーザーの位置情報を継続的にモニタリングする場合は、Geolocation API メソッド watchPosition() を使用します。getCurrentPosition() と同様に動作しますが、測位ソフトウェアとして次のように複数回起動します。
- ユーザーをより正確にロックします。
- ユーザーの位置が変化していることを判断します。
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
位置情報を使用してユーザーの位置情報を監視するタイミング
- ユーザーの位置情報をより正確に特定したい。
- アプリは、新しい位置情報に基づいてユーザー インターフェースを更新する必要があります。
- ユーザーが特定の定義済みゾーンに入ったときに、アプリケーションでビジネス ロジックを更新する必要がある。
位置情報を使用する際のベスト プラクティス
常にクリーンアップしてバッテリーを節約
位置情報の変更を監視するオペレーションは無料ではありません。オペレーティング システムには、アプリケーションが位置情報サブシステムにフックできるようにするプラットフォーム機能が導入されている可能性がありますが、ウェブ デベロッパーは、ユーザーのデバイスがユーザーの位置情報のモニタリングをどのようにサポートしているかを知ることはできません。また、位置情報を監視している間、デバイスは多くの追加処理を行うことになります。
ユーザーの位置を追跡する必要がなくなったら、clearWatch を呼び出して位置情報システムをオフにします。
エラーを適切に処理する
残念ながら、すべての位置情報の検索が成功するわけではありません。GPS が見つからない場合や、ユーザーが突然位置情報の検索を無効にした場合などが考えられます。エラーが発生した場合は、getCurrentPosition() の 2 番目の引数（省略可）が呼び出されるため、コールバック内でユーザーに通知できます。
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
位置情報ハードウェアを起動する必要性を減らす
多くのユースケースでは、ユーザーの最新の位置情報は必要なく、大まかな推定値だけで十分です。
maximumAge オプション プロパティを使用して、最近取得した位置情報の結果を使用するようブラウザに指示します。これにより、ユーザーが以前にデータをリクエストしたことがある場合は、より迅速に結果が返されるだけでなく、ブラウザが Wi-Fi 三角測量や GPS などの位置情報ハードウェア インターフェースを起動するのを防ぐこともできます。
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
ユーザーを待たせないようにタイムアウトを設定する
タイムアウトを設定しないと、現在地の取得リクエストが返されない可能性があります。
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
詳細な位置情報よりもおおよその位置情報を優先する
ユーザーに最も近い店舗を見つける場合、1 メートルの精度は必要ありません。この API は、おおよその位置情報をできるだけ早く返すように設計されています。
高い精度が必要な場合は、enableHighAccuracy オプションを使用してデフォルト設定をオーバーライドできます。この方法は、解決に時間がかかり、バッテリーの使用量が増えるため、使用は控えめにしてください。
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Chrome DevTools で位置情報をエミュレートする
![DevTools の [センサー] タブ。](https://web.developers.google.cn/static/articles/user-location/image/the-sensor-tab-devtools-99f58f9bf1aac.png?hl=ja)
位置情報を設定したら、次のことを行う必要があります。
- さまざまな地域でアプリがどのように動作するかをテストします。
- 位置情報が利用できない場合に、アプリがグレースフル デグラデーションを行うことを確認します。
どちらも Chrome DevTools から行えます。
- Chrome DevTools を開きます。
- Esc キーを押して、コンソール ドロワーを開きます。
- コンソール ドロワー メニューを開く
- [センサー] オプションをクリックして、[センサー] タブを表示します。
ここから、位置情報をプリセットの主要都市にオーバーライドしたり、カスタムの位置情報を入力したり、オーバーライドを [位置情報が利用不可] に設定して位置情報を無効にしたりできます。