diff --git a/files/ja/web/api/notification/index.md b/files/ja/web/api/notification/index.md index f8c8f706f6b591..c85cc70acba1a3 100644 --- a/files/ja/web/api/notification/index.md +++ b/files/ja/web/api/notification/index.md @@ -2,12 +2,12 @@ title: Notification slug: Web/API/Notification l10n: - sourceCommit: 571287e7fe2a51f8790c1dc717e5fb55ca60339d + sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140 --- -{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} +{{APIRef("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}} -`Notification` は[通知 API](/ja/docs/Web/API/Notifications_API) のインターフェイスで、ユーザーへのデスクトップ通知の設定と表示に使われます。 +`Notification` は{{domxref("Notifications API", "通知 API", "", "nocode")}} のインターフェイスで、ユーザーへのデスクトップ通知の設定と表示に使われます。 これらの通知の表示方法や機能はプラットフォームによって異なりますが、一般にユーザーに対して非同期に情報を提供する方法を提供します。 @@ -20,9 +20,9 @@ l10n: ## 静的プロパティ -これらのプロパティは `Notification` オブジェクト自身のみで利用することができます。 +_親インターフェイスである {{domxref("EventTarget")}} から継承したプロパティもあります。_ -- {{domxref("Notification.permission")}} {{ReadOnlyInline}} +- {{domxref("Notification.permission_static", "Notification.permission")}} {{ReadOnlyInline}} - : 文字列で、通知の表示についての現在の権限を表します。取りうる値は次の通りです。 @@ -30,37 +30,37 @@ l10n: - `granted` —通知が表示されることをユーザーが受け入れた。 - `default` — ユーザーの選択が不明であるため、ブラウザーは値が denied であるかのように動作します。 -- {{domxref("Notification.maxActions")}} {{ReadOnlyInline}} {{Experimental_Inline}} +- {{domxref("Notification.maxActions_static", "Notification.maxActions")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : 端末とユーザーエージェントが対応しているアクションの最大数。 ## インスタンスプロパティ -これらのプロパティは `Notification` オブジェクトのインスタンスでのみ使用可能です。 +_親インターフェイスである {{domxref("EventTarget")}} から継承したプロパティもあります。_ - {{domxref("Notification.actions")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : コンストラクターの `options` 引数で指定された、通知のアクションの配列です。 -- {{domxref("Notification.badge")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : 通知自体を表示する空間が充分にない場合に通知を表す画像の URL です。 +- {{domxref("Notification.badge")}} {{ReadOnlyInline}} + - : Android の通知バーなど、通知そのものを表示する空間が十分でない場合に通知を表す画像の URL を含む文字列。Android 端末では、バッジは最大4xの解像度、約 96 × 96 ピクセルの端末に対応する必要があり、画像は自動的にマスクされます。 - {{domxref("Notification.body")}} {{ReadOnlyInline}} - : コンストラクターの `options` 引数で指定された、通知の本文の文字列です。 - {{domxref("Notification.data")}} {{ReadOnlyInline}} - : 通知のデータの構造化されたクローンを返します。 - {{domxref("Notification.dir")}} {{ReadOnlyInline}} - : コンストラクターの `options` 引数で指定された、通知の書字方向です。 -- {{domxref("Notification.lang")}} {{ReadOnlyInline}} - - : コンストラクターの `options` 引数で指定された、通知の言語コードです。 -- {{domxref("Notification.tag")}} {{ReadOnlyInline}} - - : コンストラクターの `options` 引数で指定された、通知の ID です。 - {{domxref("Notification.icon")}} {{ReadOnlyInline}} - : コンストラクターの `options` 引数で指定された、通知のアイコンの画像 URL です。 - {{domxref("Notification.image")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : コンストラクターの `options` 引数で指定された、通知の一部として表示される画像の URL です。 +- {{domxref("Notification.lang")}} {{ReadOnlyInline}} + - : コンストラクターの `options` 引数で指定された、通知の言語コードです。 - {{domxref("Notification.renotify")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : 古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定します。 -- {{domxref("Notification.requireInteraction")}} {{ReadOnlyInline}} {{Experimental_Inline}} +- {{domxref("Notification.requireInteraction")}} {{ReadOnlyInline}} - : 論理値で、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示します。 -- {{domxref("Notification.silent")}} {{ReadOnlyInline}} {{Experimental_Inline}} +- {{domxref("Notification.silent")}} {{ReadOnlyInline}} - : 静かに通知をするかどうかを明示します。つまり、端末の設定に関係なく、通知の際に無音やバイブレーションさせない状態を設定できます。 +- {{domxref("Notification.tag")}} {{ReadOnlyInline}} + - : コンストラクターの `options` 引数で指定された、通知の ID です。 - {{domxref("Notification.timestamp")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : 通知が生成されたとき、または適用されるとき (過去、現在、未来) の時刻を示します。 - {{domxref("Notification.title")}} {{ReadOnlyInline}} @@ -70,20 +70,22 @@ l10n: ## 静的メソッド -これらのメソッドは `Notification` オブジェクト自体に対してのみ使用できます。 +_親インターフェイスである {{domxref("EventTarget")}} から継承したメソッドもあります。_ -- {{domxref("Notification.requestPermission()")}} +- {{domxref("Notification.requestPermission_static", "Notification.requestPermission()")}} - : ユーザーに通知を表示する許可をリクエストします。 ## インスタンスメソッド -これらのメソッドは `Notification` オブジェクトのインスタンス、または [`prototype`](/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) からのみ使用できます。 `Notification` オブジェクトは {{domxref("EventTarget")}} インターフェイスも継承しています。 +_親インターフェイスである {{domxref("EventTarget")}} から継承したメソッドもあります。_ - {{domxref("Notification.close()")}} - - : プログラムで通知を閉じます。 + - : プログラムで通知インスタンスを閉じます。 ## イベント +_親インターフェイスである {{domxref("EventTarget")}} から継承したイベントもあります。_ + - {{domxref("Notification.click_event", "click")}} - : ユーザーが通知をクリックするたびに発生します。 - {{domxref("Notification.close_event", "close")}} diff --git a/files/ja/web/api/notification/notification/index.md b/files/ja/web/api/notification/notification/index.md index 24114352283092..e902c42e131857 100644 --- a/files/ja/web/api/notification/notification/index.md +++ b/files/ja/web/api/notification/notification/index.md @@ -1,14 +1,17 @@ --- -title: Notification() +title: "Notification: Notification() コンストラクター" +short-title: Notification() slug: Web/API/Notification/Notification l10n: - sourceCommit: 2b8f5d9a29f00aea5d2edfa78d1fb90c51752858 + sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140 --- -{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} +{{APIRef("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}} **`Notification()`** コンストラクターは、ユーザー通知を表す新しい {{domxref("Notification")}} オブジェクトのインスタンスを生成します。 +> **メモ:** {{domxref("ServiceWorkerGlobalScope")}} 内で `Notification()` コンストラクターを使用して通知を作成しようとすると、`TypeError` が発生します。代わりに {{domxref("ServiceWorkerRegistration.showNotification()")}} を使用してください。 + ## 構文 ```js-nolint @@ -24,48 +27,74 @@ new Notification(title, options) - : 通知に適用するカスタム設定を含むオプションオブジェクトです。使用できるオプションは以下のとおりです。 - - `dir` + - `dir` {{optional_inline}} - : 通知を表示する方向です。既定値は `auto` で、ブラウザーの言語設定の振る舞いが適用されますが、 `ltr` と `rtl` の値で振る舞いを上書きできます (ただし、ほとんどのブラウザーがこれらの設定を無視しているようですが)。 - - `lang` - - : {{RFC(5646, "言語を識別するタグ(BCP 47 とも)")}}を表す文字列を使って指定される通知の言語です。簡単なリファレンスとして [ISO 2 letter language codes](https://www.sitepoint.com/iso-2-letter-language-codes/) ページを参照してください。 - - `badge` + - `lang` {{optional_inline}} + - : {{RFC(5646, "言語を識別するタグ(BCP 47 とも)")}}を表す文字列を使って指定される通知の言語です。 + 簡単なリファレンスとして [ISO 2 letter language codes](https://www.sitepoint.com/iso-2-letter-language-codes/) ページを参照してください。 + 既定値は空文字列です。 + - `badge` {{optional_inline}} - : 文字列で、通知自体を表示する充分な空間がない場合に通知の表現に使用される画像の URL を指定します。 - - `body` + - `body` {{optional_inline}} - : 文字列で、タイトルの下側に表示される通知の本文を表します。 - - `tag` + 既定値は空文字列です。 + - `tag` {{optional_inline}} - : 通知のための識別タグを表す 文字列です。 - - `icon` + - `icon` {{optional_inline}} - : 通知の一部として表示されるアイコンのURLを含む文字列です。 - - `image` + - `image` {{optional_inline}} - : 文字列で、通知に表示される画像の URL を指定します。 - - `data` + - `data` {{optional_inline}} - : 通知に関連付ける任意のデータです。これはどのデータ型でも可能です。 - - `vibrate` - - : 通知が発生したときに端末のバイブレーションハードウェアに通知する[バイブレーションパターン](/ja/docs/Web/API/Vibration_API#vibration_patterns)です。 - - `renotify` - - : 古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定する論理値です。既定値は `false` で、通知しないことを意味します。 - - `requireInteraction` - - : 通知が自動的に閉じるのではなく、ユーザーがクリックするか解除するまでアクティブな状態を維持すべきであることを示します。既定値は `false` です。 - - `actions` + 既定値は `null` です。 + - `vibrate` {{optional_inline}} + - : 通知が発生したときに端末のバイブレーションハードウェアに通知する[バイブレーションパターン](/ja/docs/Web/API/Vibration_API#バイブレーションパターン)です。指定された場合、`silent` は `true` にできません。 + - `timestamp` {{optional_inline}} + - : 数値で、通知が作成された時点または適用される時点(過去、現在、未来)を表します。 + - `renotify` {{optional_inline}} + - : 古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定する論理値です。既定値は `false` で、通知しないことを意味します。`true` の場合、`tag` も設定する必要があります。 + - `requireInteraction` {{optional_inline}} + - : 通知が自動的に閉じるのではなく、ユーザーがクリックするか解除するまでアクティブな状態を維持すべきであることを示します。 + 既定値は `false` です。 + - `actions` {{optional_inline}} - : 通知で表示するアクションの配列です。配列内のそれぞれの要素は、以下のメンバーを持つオブジェクトです。 - - `action`: 通知上に表示されるユーザーアクションを特定する文字列。 - - `title`: ユーザーに表示するアクションテキストを含む文字列。 - - `icon`: アクションとともに表示されるアイコンの URL を含む文字列。 + - `action` + - : 通知上に表示されるユーザーアクションを特定する文字列。 + - `title` + - : ユーザーに表示するアクションテキストを含む文字列。 + - `icon` {{optional_inline}} + - : アクションとともに表示されるアイコンの URL を含む文字列。 適切なレスポンスは `event.action` を使用して {{domxref("ServiceWorkerGlobalScope.notificationclick_event", "notificationclick")}} イベント内で構築されます。 - - `silent` - - : 通知をサイレントにするかどうかを指定する論理値です。端末の設定にかかわらず、音やバイブレーションを発しないようにします。既定値は `false` で、サイレントではないことを意味します。 + - `silent` {{optional_inline}} + - : 通知をサイレントにするかどうかを指定する論理値です。端末の設定にかかわらず、音やバイブレーションを発しないようにします。 + 既定値は `null` です。`true` の場合、 `vibrate` が存在してはいけません。 + +### 返値 + +{{domxref("Notification")}} オブジェクトのインスタンスです。 + +### 例外 + +- {{jsxref("TypeError")}} + - : 以下の場合に例外が発生します。 + - コンストラクターが {{domxref("ServiceWorkerGlobalScope")}} の中で呼び出された場合。 + - `actions` オプションが設定されており、空であった場合。 + - `silent` オプションが `true` で、`vibrate` オプションが指定されていた場合。 + - `renotify` オプションが `true` だが、`tag` オプションが空の場合。 +- `DataCloneError` {{domxref("DOMException")}} + - : 何らかの理由で `data` オプションのシリアライズに失敗した場合に発生します。 ## 例 -[`Emogotchi demo`](https://chrisdavidmills.github.io/emogotchi/)([ソースコードを見る](https://github.com/chrisdavidmills/emogotchi))では、私たちが通知を発生させたいときに、 `spawnNotification()` 関数を実行しています。関数は必要な本文、アイコン、タイトルを指定する引数を受け取り、必要な `options` オブジェクトを生成して、 `Notification()` コンストラクターを用いて通知を発生させます。 +この例は、その権限がすでに付与されている場合にのみ通知を表示させるという最も基本的なものです。より完全な例については、{{domxref("Notification")}} ページをご覧ください。 ```js -function spawnNotification(body, icon, title) { - const notification = new Notification(title, { body, icon }); +if (Notification.permission === "granted") { + const notification = new Notification("Hi there!"); } ``` @@ -81,13 +110,7 @@ function spawnNotification(body, icon, title) { Chrome 49 以降では、 incognito モードでは通知が動作しません。 -Android 版 Chrome は `Notification` コンストラクターを呼び出すと {{jsxref("TypeError")}} を発生させます。サービスワーカーからの通知の作成にのみ対応しています。詳しくは [Chromium issue tracker](https://bugs.chromium.org/p/chromium/issues/detail?id=481856) をご覧ください。 - -### Internet Explorer の注意事項 - -バージョン 38.14352 以降の MS Edge は通知 API に対応しています。 [Wikipedia - MS Edge](https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history) - -IE 11 以前では対応していません。 +Android 版 Chrome は `Notification` コンストラクターを呼び出すと {{jsxref("TypeError")}} を発生させます。サービスワーカーからの通知の作成にのみ対応しています。詳しくは [Chromium issue tracker](https://crbug.com/481856) をご覧ください。 ## 関連情報