ウェブ権限に関するおすすめの方法

Marian Harbach

Thomas Steiner

権限プロンプトは、プライバシーとセキュリティに危険を及ぼす可能性のある強力な機能からユーザーを保護するためのウェブの主要なメカニズムです。ブラウザは、ユーザーが特定のウェブサイトで機能を許可する意図があることを確認することを目的としています。 メディア キャプチャ（カメラとマイク）、位置情報、ストレージ アクセス、MIDI、通知など、さまざまな API の権限を実装できます。

Chrome の使用状況統計とユーザー調査に基づいて、権限プロンプトをユーザーに表示する際は、次のプラクティスに従ってください。これらのプラクティスに従うことで、ユーザーに不要なプロンプトが表示される回数が減り、ブロックの決定が減ります。

このドキュメントの最後では、いくつかのコードパターンと、 権限で保護された API の ユーザーがブロック状態から復旧できるようにする方法について説明します。

プロンプトのベスト プラクティス

ユーザーが操作した後、権限をリクエストします。ユーザーは、リクエストの理由と、アクセスを許可することで得られるメリットを理解できます。

可能であれば、同じタスクを完了するための代替手段を提供します。リクエストする適切なタイミングを慎重に選択することで、ユーザーが復旧困難なブロック状態になる可能性を減らすことができます。

ページ読み込み時やユーザー インタラクションなしでリクエストしない

ページ読み込み時に権限をリクエストすることは、お客様が実店舗に入店したときに機密情報を尋ねるのと同じです。ニュースレターの登録や Cookie の同意など、他のプロンプトが表示される可能性がある中で、権限プロンプトが表示されると、ユーザーは混乱します。ユーザーは、リクエストの理由とメリットを理解できません 。

ウェブ アプリケーションが特定の機能にアクセスしないと動作しない場合でも、ユーザーにその理由を理解してもらう機会を与えてください。たとえば、 権限プロンプトの前に、プロンプトが必要な理由を説明し、 選択肢を提示します（たとえば、 同じ機能を完了するための代替手段を提供するなど）。 ページ読み込み時よりも適切なタイミングで権限をリクエストできない場合は、このガイドの後半でいくつかの例を紹介します。

ユーザー操作なしで権限をリクエストすることも効果的ではありません。 これは 一時的なユーザー アクティベーションと呼ばれます。 Chrome のテレメトリーによると、デスクトップの権限プロンプトの 77% はユーザーの意図を示すシグナルなしで表示され、その結果、許可されるプロンプトは 12% にすぎません。ユーザー インタラクション後、許可率は 30% に増加します。

ユーザーがページを操作した後にのみ、権限をリクエストしてください。

ユーザーが理由を理解できる場合にのみリクエストする

権限の決定は、多くの場合、プライバシーの決定です。コンテキストの整合性フレームワークに基づくと、プライバシーの決定はコンテキストに大きく依存します。アクセスが必要な理由を理解することが重要です。価値を提供するために必要な機能のみをリクエストする必要があります。ユーザーは、価値を見出すことに同意する可能性が高くなります。また、ユーザーが機能が役立つ理由を理解できる場合に権限をリクエストします。ユーザーが使用状況を理解しやすくします。

ユーザー調査によると、サイトがアクセスをリクエストする理由をユーザーが理解し、メリットを認識している場合、ユーザーがアクセスを許可する可能性は大幅に高くなります。また、ユーザーは、アクセスを許可することで得られる価値をよりよく理解するために、まず見慣れないサイトを探索することを期待しています。それまでの間、権限プロンプトを無視したり、無視したりすることがよくあります。1 回限りの権限では、最初に 1 回のアクセスを許可する場合があります。アプリケーションでこれらの動作をサポートします。

代替案を用意する

一部の機能の結果は、ユーザーにとって役に立たない可能性があります。たとえば、GPS センサーのないデスクトップ デバイスの位置情報は、VPN に接続しているため、誤った位置情報を返す可能性があります。他のユーザーは、クリップボードへのアクセスを許可したくない場合があります。手動でキーの組み合わせでこれらのイベントをトリガーすることを好むためです。このような場合は、同じ結果を得るための代替手段を提供します。

たとえば、位置情報の権限をリクエストする場合は、ユーザーが郵便番号や住所を入力できるテキスト フィールドを提供します。キーボード ショートカットまたはコンテキスト メニューを使用して、要素を選択してクリップボードにコピーできるようにします。通知の場合は、プッシュ通知ではなくメールを提供します。

便利なパターンは、代替 UI を、アクセスが有益な理由の説明としても使用することです。ユーザーは、位置情報 API をトリガーするボタンの横に位置情報を入力するオプションが表示されると、住所を入力できるため、制御されていると感じます。同様に、プッシュ通知またはメールで通知を受け取るか、カメラとマイクへのアクセスを許可せずに会議に参加するかを選択できる場合、ユーザーはトレードオフを理解できます。

ブロック状態を回避する

ユーザーが権限で保護された機能へのアクセスを完全に拒否すると、ブラウザはその決定を尊重します。アクセスをリクエストし続けることが可能であれば、悪意のあるサイトはユーザーにプロンプトを大量に表示します。機能のブロック状態から復旧するには、意図的に手間がかかります。ユーザーがアクセスを許可する可能性が低い状況で権限をリクエストすることは避けてください。

一般的な方法として、いわゆる事前プロンプトを使用します。事前プロンプトでは、ユーザーに何が起こるか、リクエストする機能がアプリケーションに必要な理由を説明します。ユーザーがこのような事前プロンプトに肯定的に反応した場合にのみ、ブラウザの権限プロンプトをトリガーする必要があります。 ユーザーがその状態から復旧する必要がある状況もあります。詳しくは、 ユーザーがブロック状態から復旧できるようにするをご覧ください。

第三者のコンテンツに注意する

権限プロンプトの予期しないソースに注意してください。サイト上のサードパーティ スクリプトが、意図しない権限プロンプトをトリガーする可能性があります。特にプロンプトがベスト プラクティスに従っていない場合、ユーザー エクスペリエンスに影響する可能性があります。ユーザー エクスペリエンスを管理するには、コードに追加するサードパーティ ライブラリとスクリプトのドキュメントをお読みください。

権限をリクエストするタイミング

ベスト プラクティスに従って、権限をリクエストするのに適したタイミングをいくつか紹介します。

• ユーザーが住所を手動で入力するときに、フォーム フィールドの横にある [現在地を使用] をクリックした後。
• ユーザーが動画チャンネルや投稿を登録し、更新をメールまたは通知で配信できることを説明するダイアログで肯定的なボタンをクリックした後。
• ユーザーがビデオ通話に参加する準備をするページにアクセスし、事前プロンプトで表示と音声の受信を希望すると肯定的に回答した後。詳しくは、Google Meet の導入事例をご覧ください。

コードパターン

API を使用する権限は、API によって異なる方法で付与されます。一部の古い API では、API を初めて使用しようとすると、ブラウザが自動的に権限をリクエストするモデルを使用します。たとえば、 Geolocation API を呼び出すときの navigator.geolocation.getCurrentPosition() があります。

try {
  navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
  console.error(error);
}

他の API では、静的メソッドを使用して最初に明示的に権限をリクエストするモデルを使用します。通知を許可する Notification.requestPermission() や、Device Orientation Events API の一部である DeviceOrientationEvent.requestPermission() などがあります。

一部のブラウザでは、特定の API に自動的に権限が付与されます。たとえば、Chrome ではデバイスの向きへのアクセスが常に許可されますが、Safari ではプロンプトが表示されます。

const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
  /* Use the API. */
}

権限の状態を確認する

特定の API を使用できるかどうかを確認するには、Permissions API の navigator.permissions.query() メソッドを使用します。

const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
  // Use the API.
}

ユーザーがブロック状態から復旧できるようにする

ユーザーがアクセスに関する問題をトラブルシューティングできるようにするには、Permissions API を使用してアクセスがブロックされていることを検出し、設定を変更する方法に関するガイドを提供します。 ユーザーが権限で保護された機能に関連付けられた UI 要素を操作する場合は、権限の状態を確認し、トラブルシューティング ダイアログを開きます。

権限の状態を変更する手順はブラウザによって異なるため、最もよく使用されるブラウザのユーザー エージェント文字列に基づいて、一致する説明を提供します。

Chrome では、アドレスバーの [**サイト情報を表示**] > [**サイトの設定**] から権限を変更できます。場合によっては、機能を使用する前にページを再読み込みする必要があります。その場合は、ウィンドウの上部にメッセージバーが表示され、サイトの再読み込みを促します。

権限を制御するための同様の UI は、 Firefoxなど他のブラウザにも存在します。