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/permissions_api/index.html | 91 +++++++++++++++ .../using_the_permissions_api/index.html | 125 +++++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 files/ja/web/api/permissions_api/index.html create mode 100644 files/ja/web/api/permissions_api/using_the_permissions_api/index.html (limited to 'files/ja/web/api/permissions_api') diff --git a/files/ja/web/api/permissions_api/index.html b/files/ja/web/api/permissions_api/index.html new file mode 100644 index 0000000000..2c7048fffc --- /dev/null +++ b/files/ja/web/api/permissions_api/index.html @@ -0,0 +1,91 @@ +--- +title: Permissions API +slug: Web/API/Permissions_API +tags: + - API + - Overview + - Permissions + - Reference +translation_of: Web/API/Permissions_API +--- +
{{DefaultAPISidebar("Permissions API")}}
+ +
+

Permissions API は、現在のコンテキストに起因する API のパーミッションの状態を照会するための一貫したプログラム方法を提供します。 例えば、Permissions API を使用して、特定の API にアクセスするためのパーミッションが付与（granted）または拒否（denied）されているかどうかを確認できます。

+
+ +

概念と使い方

+ +

歴史的に異なる API は独自のパーミッションを一貫性のない方法で扱います。 例えば、Notifications API はパーミッションの状態の明示的なチェックとパーミッションの要求を許可しますが、Geolocation API はできません（ユーザーが最初のパーミッションの要求を拒否すると問題を引き起こします）。 Permissions API は、パーミッションに関する限り、開発者がより良いユーザーエクスペリエンスを実装できるようにするためのツールを提供します。

+ +

permissions プロパティが {{domxref("Navigator")}} オブジェクトで利用可能になり、標準の閲覧コンテキストとワーカーコンテキスト（{{domxref("WorkerNavigator")}} — したがって、ワーカー内でパーミッションの確認が可能）の両方で、Permissions API 機能へのアクセスを提供する {{domxref("Permissions")}} オブジェクトを返します。

+ +

このオブジェクトを取得した後は、{{domxref("Permissions.query()")}} メソッドを使用して特定の API の {{domxref("PermissionStatus")}} で解決される Promise を返すなど、パーミッション関連のタスクを実行できます。

+ +

Permissions API を使用してすべての API のパーミッションの状態を照会できるわけではありません。 Permissions に対応している注目すべき API は次のとおりです。

+ + + +

今後、より多くの API が Permissions API のサポートを取得する予定です。

+ +

例

+ +

Location Finder という簡単な例を用意しました。 例をライブで実行するか、Github でソースコードを見ることができます。

+ +

それがどのように機能するかについてもっと読むには Permissions API の使用を見てください。

+ +

インターフェイス

+ +
+
{{domxref("Navigator.permissions")}} と {{domxref("WorkerNavigator.permissions")}} {{readonlyinline}}
+
それぞれメインコンテキストとワーカーコンテキストから {{domxref("Permissions")}} オブジェクトへのアクセスを提供します。
+
{{domxref("Permissions")}}
+
パーミッションの照会や取り消しのためのメソッドなど、コアとなる Permission API 機能を提供します。
+
{{domxref("PermissionStatus")}}
+
パーミッションの現在の状態、およびパーミッションの状態の変更に応答するためのイベントハンドラーへのアクセスを提供します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Permissions API')}}{{Spec2('Permissions API')}}初期定義
+ +

ブラウザーの互換性

+ +
+

Permissions インターフェイス

+ +
+ + +

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

+
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/permissions_api/using_the_permissions_api/index.html b/files/ja/web/api/permissions_api/using_the_permissions_api/index.html new file mode 100644 index 0000000000..f7d7005428 --- /dev/null +++ b/files/ja/web/api/permissions_api/using_the_permissions_api/index.html @@ -0,0 +1,125 @@ +--- +title: Permissions API の使用 +slug: Web/API/Permissions_API/Using_the_Permissions_API +tags: + - API + - Experimental + - Geolocation + - Guide + - Permissions +translation_of: Web/API/Permissions_API/Using_the_Permissions_API +--- +

{{DefaultAPISidebar("Permissions API")}}{{SeeCompatTable}}

+ +

この記事では、W3C の Permissions API を使用するための基本的なガイドを提供します。 これは、現在のコンテキストに起因する API のパーミッションの状態を照会するためのプログラムによる方法を提供します。

+ +

パーミッションを求めるのが面倒...

+ +

ウェブ上のパーミッションは必要悪であり、そしてそれらは開発者として対処するのはそれほど面白くありませんが、それに立ち向かいましょう。

+ +

歴史的には、異なる API は独自のパーミッションを一貫性のない方法で扱います。 例えば、Notifications API はパーミッションの状態の明示的なチェックとパーミッションの要求を許可しますが、Geolocation API はそうではありません（以下に示すように、ユーザーが最初のパーミッションの要求を拒否すると問題を引き起こします）。

+ +

Permissions API は、パーミッションに関する限り、開発者がより良いユーザーエクスペリエンスを実装できるようにするためのツールを提供します。 例えば、特定の API を使用するためのパーミッションが付与されているか拒否されているかを照会し、API を使用するためのパーミッションを具体的に要求することができます。

+ +

現時点では、API の実装は初期段階にあるため、ブラウザーでのサポートは次のようにかなりむらがあります。

+ + + +

時間が経つにつれて、より多くの機能が追加されます。

+ +

簡単な例

+ +

この記事では、Location Finder という簡単なデモをまとめました。 Geolocation を使用してユーザーの現在地を照会し、それをグーグルマップに表示します。

+ +

英国 Greenfield の地図を表示したスクリーンショット。

+ +

サンプルをライブで実行するか、Github でソースコードを見ることができます。 コードの大部分は単純で目立たないものです。 以下では Permissions API 関連のコードを見ていきますので、他の部分を調べたい場合はコードを自分で確認してください。

+ +

Permissions API へのアクセス

+ +

グローバルな {{domxref("Permissions")}} オブジェクトへのアクセスを許可するために、{{domxref("Navigator.permissions")}} プロパティがブラウザーに追加されました。 現在、このオブジェクトには {{domxref("Permissions.query()")}} しか含まれていませんが、最終的にはパーミッションの照会、要求、および取り消しのためのメソッドが含まれます。 下記参照。

+ +

パーミッションの状態の照会

+ +

この例では、Permissions 機能は handlePermission() という1つの関数によって処理されます。 これは、{{domxref("Permissions.query()")}} を使用してパーミッションの状態を照会することから始まります。 Promise が解決されたときに返される {{domxref("PermissionStatus")}} オブジェクトの {{domxref("PermissionStatus.state", "state")}} プロパティの値に応じて、次のように反応は異なります。

+ +
+
"granted"（付与）
+
[Geolocation を有効にする（Enable Geolocation）] ボタンは非表示です。 これは、Geolocation がすでにアクティブになっている場合は必要ないためです。
+
"prompt"（プロンプト）
+
[Geolocation を有効にする] ボタンは非表示です。 これは、ユーザーに Geolocation のパーミッションを付与するように求めるプロンプトが表示される場合は必要ないためです。 {{domxref("Geolocation.getCurrentPosition()")}} 関数を実行し、ユーザーにパーミッションを求めるプロンプトを表示します。 それは、パーミッションが付与されている場合、revealPosition() 関数を実行し（地図を表示します）、パーミッションが拒否されている場合、positionDenied() 関数を実行します（[Geolocation を有効にする] ボタンを表示します）。
+
"denied"（拒否）
+
[Geolocation を有効にする] ボタンを表示します（ページが最初に読み込まれたときに、パーミッションの状態がこのオリジンに対して既に拒否に設定されている場合も、このコードにくる必要があります）。
+
+ +
function handlePermission() {
+  navigator.permissions.query({name:'geolocation'}).then(function(result) {
+    if (result.state == 'granted') {
+      report(result.state);
+      geoBtn.style.display = 'none';
+    } else if (result.state == 'prompt') {
+      report(result.state);
+      geoBtn.style.display = 'none';
+      navigator.geolocation.getCurrentPosition(revealPosition,positionDenied,geoSettings);
+    } else if (result.state == 'denied') {
+      report(result.state);
+      geoBtn.style.display = 'inline';
+    }
+    result.onchange = function() {
+      report(result.state);
+    }
+  });
+}
+
+function report(state) {
+  console.log('Permission ' + state);
+}
+
+handlePermission();
+ +

パーミッション記述子

+ +

{{domxref("Permissions.query()")}} メソッドはパラメータとして PermissionDescriptor ディクショナリを取ります — これはあなたが興味を持っている API の名前を含みます。 いくつかの API は、デフォルトの PermissionDescriptor から継承した、追加情報を含んだ、より複雑な PermissionDescriptor を持っています。 例えば、PushPermissionDescriptor には、userVisibleOnly が true か false かを指定する Boolean も含める必要があります。

+ +

パーミッションの取り消し

+ +

Firefox 47 以降、{{domxref("Permissions.revoke()")}} メソッドを使用して既存のパーミッションを取り消すことができるようになりました。 これは {{domxref("Permissions.query()")}} メソッドとまったく同じように機能しますが、Promise が正常に解決されると、既存のパーミッションがデフォルトの状態（通常は prompt）に戻される点が異なります。 デモで次のコードを見てください。

+ +
var revokeBtn = document.querySelector('.revoke');
+
+  ...
+
+revokeBtn.onclick = function() {
+  revokePermission();
+}
+
+  ...
+
+function revokePermission() {
+  navigator.permissions.revoke({name:'geolocation'}).then(function(result) {
+    report(result.state);
+  });
+}
+ +
+

Firefox 51 以降、Web Applications Security Working Group で設計が問題になっているため、revoke() 関数はデフォルトで無効になっています。 設定 dom.permissions.revoke.enable を true に設定することで再度有効にすることができます。

+
+ +

パーミッションの状態の変更への対応

+ +

上記のコードには、{{domxref("PermissionStatus")}} オブジェクトにアタッチされた onchange イベントハンドラがあることに気付くでしょう。 これにより、関心のある API のパーミッションの状態の変更に対応できるようになります。 現時点では、状態の変化を報告しているだけです。

+ +

まとめと今後の課題

+ +

現時点では、これは私たちがすでに持っていたもの以上のものを提供するものではありません。 パーミッションのプロンプトから位置を決して共有しないことを選択した場合（パーミッションを拒否した場合）、ブラウザーのメニューオプションを使用しないとパーミッションのプロンプトに戻ることはできません。

+ + + +

しかしながら、ブラウザー機能への将来の追加は request() メソッドを提供するべきです、それは私たちが好きなときにいつでもプログラム的にパーミッションを要求することを可能にするでしょう。 うまくいけばこれらはすぐに利用可能になるはずです。

-- cgit v1.2.3-54-g00ecf