diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/notification | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/api/notification')
25 files changed, 1856 insertions, 0 deletions
diff --git a/files/ja/web/api/notification/actions/index.html b/files/ja/web/api/notification/actions/index.html new file mode 100644 index 0000000000..3e09e63f18 --- /dev/null +++ b/files/ja/web/api/notification/actions/index.html @@ -0,0 +1,61 @@ +--- +title: Notification.actions +slug: Web/API/Notification/actions +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - actions + - プロパティ + - 通知 +translation_of: Web/API/Notification/actions +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary"><strong><code>actions</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>actions</code> オプションで指定された {{domxref("NotificationAction")}} オブジェクトのリストを返します。</span>これは、通知のコンテキストでユーザーが直接選択することができる、アプリケーション定義のアクションのリストです。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> 端末やユーザーエージェントによっては、 (例えば、画面の空間の制約により) 限られた数のアクションしか表示できないことがあります。この制限は {{DOMxRef("Notification.maxActions")}} で推測することができます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>actions</var>[] = <var>Notification</var>.actions;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("NotificationAction")}} オブジェクトの読取専用の配列で、それぞれの要素が通知の中でユーザーが選択することができる単一のアクションを記述したものです。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-actions','actions')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.actions")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> + <li>{{DOMxRef("Notification.maxActions")}}</li> +</ul> diff --git a/files/ja/web/api/notification/badge/index.html b/files/ja/web/api/notification/badge/index.html new file mode 100644 index 0000000000..ba64f6d237 --- /dev/null +++ b/files/ja/web/api/notification/badge/index.html @@ -0,0 +1,49 @@ +--- +title: Notification.badge +slug: Web/API/Notification/badge +tags: + - API + - Notification + - Notifications + - Notifications API + - Property + - Reference + - badge + - プロパティ + - 通知 +translation_of: Web/API/Notification/badge +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>badge</code></strong> は {{domxref("Notification")}} インターフェイスのプロパティで、通知自体を表示する空間が充分にない場合に通知を表す画像の URL を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>url</var> = <var>Notification</var>.badge</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>URL が入った {{domxref('USVString')}} です。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-badge','badge')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.badge")}}</p> diff --git a/files/ja/web/api/notification/body/index.html b/files/ja/web/api/notification/body/index.html new file mode 100644 index 0000000000..999fec236f --- /dev/null +++ b/files/ja/web/api/notification/body/index.html @@ -0,0 +1,69 @@ +--- +title: Notification.body +slug: Web/API/Notification/body +tags: + - API + - BODY + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - プロパティ + - 通知 +translation_of: Web/API/Notification/body +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>body</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>body</code> オプションで指定された通知の本文文字列を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>body</var> = <var>Notification</var>.body; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("DOMString")}} です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">function spawnNotification(theBody, theIcon, theTitle) { + var options = { + body: theBody, + icon: theIcon + } + var n = new Notification(theTitle, options); + + console.log(n.body); +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-body','body')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.body")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/close/index.html b/files/ja/web/api/notification/close/index.html new file mode 100644 index 0000000000..17a2a65822 --- /dev/null +++ b/files/ja/web/api/notification/close/index.html @@ -0,0 +1,85 @@ +--- +title: Notification.close() +slug: Web/API/Notification/close +tags: + - API + - DOM + - Method + - Notification + - Notifications + - Notifications API + - Reference + - WebAPI + - close + - メソッド + - 通知 +translation_of: Web/API/Notification/close +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><code>close()</code> は {{domxref("Notification")}} インターフェイスのメソッドで、表示された通知を閉じたり削除したりするために使用されます。</p> + +<div class="note"> +<p><strong>注:</strong> この API は、一定時間経過後に通知を画面から消去するだけのために使用すべきではありません。通知が最初に表示された後にユーザーがそれとやりとりすることを防ぐため、このメソッドは通知トレイからも通知を削除するためです。この API の正しい使用方法は、ユーザーに関係がなくなった通知を除去することです (例えば、メッセージアプリなどで、ユーザーが既にウェブページ上の通知を読んだ場合や、音楽アプリですでに次の曲が始まっているため、曲の変更を行うための通知を閉じるなど)。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">Notification.close();</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Returns" name="Returns">返値</h3> + +<p>なし。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下のスニペットは、呼び出されたときに <code>options</code> オブジェクトと、それから新しい通知を生成します。を生成し、関数の末尾で、 <code>close()</code> を {{domxref("EventTarget.addEventListener","addEventListener()")}} 関数の中で呼び出し、関連するコンテンツがウェブページで既読になったときに通知を除去します。</p> + +<pre class="brush:js notranslate">function spawnNotification(theBody, theIcon, theTitle) { + var options = { + body: theBody, + icon: theIcon + }; + + var n = new Notification(theTitle,options); + document.addEventListener('visibilitychange', function() { + if (document.visibilityState === 'visible') { + // The tab has become visible so clear the now-stale Notification. + n.close(); + } + }); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.close")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/data/index.html b/files/ja/web/api/notification/data/index.html new file mode 100644 index 0000000000..c56e63a5ee --- /dev/null +++ b/files/ja/web/api/notification/data/index.html @@ -0,0 +1,71 @@ +--- +title: Notification.data +slug: Web/API/Notification/data +tags: + - API + - Notification + - Notifications + - Notifications API + - Property + - Reference + - data + - プロパティ + - 通知 +translation_of: Web/API/Notification/data +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>data</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>data</code> オプションで指定された通知の構造化されたデータのクローンを返します。</p> + +<p>通知のデータは、通知と関連付けたい任意のデータを使用することができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>data</var> = <var>Notification</var>.data; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>構造化されたクローン。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のスニペットは通知を発行します。単純な <code>options</code> オブジェクトを生成し、それから <code>Notification()</code> コンストラクターを使用して通知を発行します。</p> + +<pre class="brush: js notranslate">var options = { + body: 'Do you like my body?', + data: 'I like peas.' +} + +var n = new Notification('Test notification',options); + +console.log(n.data) // should return 'I like peas.'</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-data','data')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.data")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/dir/index.html b/files/ja/web/api/notification/dir/index.html new file mode 100644 index 0000000000..9142e80a90 --- /dev/null +++ b/files/ja/web/api/notification/dir/index.html @@ -0,0 +1,81 @@ +--- +title: Notification.dir +slug: Web/API/Notification/dir +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - dir + - プロパティ + - 通知 +translation_of: Web/API/Notification/dir +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>dir</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>dir</code> オプションで指定されたテキストの書字方向を示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>dir</var> = <var>Notification</var>.dir; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>書字方向を指定する {{domxref("DOMString")}} です。取りうる値は次の通りです。</p> + +<ul> + <li><code>auto</code>: ブラウザーの言語設定の動作に合わせます (既定値)。</li> + <li><code>ltr</code>: 左書き</li> + <li><code>rtl</code> : 右書き</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 多くのブラウザーは明示的な ltr や rtl の設定を無視し、ブラウザー全体の設定どおりに実行するようです。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のスニペットは通知を発行するためのものです。単純な <code>options</code> オブジェクトが生成され、通知が <code>Notification()</code> コンストラクターを使用して発行されます。</p> + +<pre class="brush: js notranslate">var options = { + body: 'Do you like my body?', + dir: 'rtl' +} + +var n = new Notification('Test notification',options); + +console.log(n.dir) // should return 'rtl' +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-dir','dir')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.dir")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/icon/index.html b/files/ja/web/api/notification/icon/index.html new file mode 100644 index 0000000000..be7de58481 --- /dev/null +++ b/files/ja/web/api/notification/icon/index.html @@ -0,0 +1,66 @@ +--- +title: Notification.icon +slug: Web/API/Notification/icon +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - icon + - プロパティ + - 通知 +translation_of: Web/API/Notification/icon +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>icon</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>icon</code> オプションで指定された、通知の一部として表示されるアイコンの URL を含みます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>icon</var> = <var>Notification</var>.icon; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("USVString")}} です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><a class="external external-icon" href="https://github.com/mdn/to-do-notifications/tree/gh-pages" rel="noopener">To-do リストアプリ</a> (<a class="external external-icon" href="https://mdn.github.io/to-do-notifications/" rel="noopener">ライブで実行するアプリを表示</a>) では、 {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用して通知を発行し、希望する本文、アイコン、タイトルを指定するために引数を渡します。</p> + +<pre class="brush: js notranslate">var notification = new Notification('To do list', { + body: text, + icon: img +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-icon','icon')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.icon")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/image/index.html b/files/ja/web/api/notification/image/index.html new file mode 100644 index 0000000000..d68fab7620 --- /dev/null +++ b/files/ja/web/api/notification/image/index.html @@ -0,0 +1,56 @@ +--- +title: Notification.image +slug: Web/API/Notification/image +tags: + - API + - DOM + - Image + - Notification + - Notifications + - Notifications API + - Property + - Reference + - プロパティ + - 通知 +translation_of: Web/API/Notification/image +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><code>image</code> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>image</code> オプションで指定された、通知の一部として表示される画像の URL を含みます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>image</var> = <var>Notification</var>.image;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("USVString")}} です。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#image-resource','image')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.image")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/index.html b/files/ja/web/api/notification/index.html new file mode 100644 index 0000000000..b86f7ebcd1 --- /dev/null +++ b/files/ja/web/api/notification/index.html @@ -0,0 +1,178 @@ +--- +title: Notification +slug: Web/API/Notification +tags: + - API + - Interface + - Notifications + - Reference + - インターフェイス +translation_of: Web/API/Notification +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary"><code>Notification</code> は <a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> のインターフェイスで、ユーザーへのデスクトップ通知の設定と表示に使われます。</span>これらの通知の表示方法や機能はプラットフォームによって異なりますが、一般にユーザーに対して非同期に情報を提供する方法を提供します。</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{domxref("Notification.Notification", "Notification()")}}</dt> + <dd><code>Notification</code> オブジェクトの新しいインスタンスを生成します。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<h3 id="Static_properties" name="Static_properties">静的プロパティ</h3> + +<p>これらのプロパティは <code>Notification</code> オブジェクト自身のみで利用することができます。</p> + +<dl> + <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> + <dd>文字列で、通知の表示についての現在の権限を表します。取りうる値は次の通りです。 + <ul> + <li><code>denied</code> — ユーザーが通知の表示を拒否した。</li> + <li><code>granted</code> —通知が表示されることをユーザーが受け入れた。</li> + <li><code>default</code> — ユーザーの選択が不明であるため、ブラウザーは値が denied であるかのように動作します。</li> + </ul> + </dd> + <dt>{{domxref("Notification.maxActions")}} {{readonlyinline}}</dt> +</dl> + +<h3 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h3> + +<p>これらのプロパティは <code>Notification</code> オブジェクトのインスタンスでのみ使用可能です。</p> + +<dl> + <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt> + <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知のアクションの配列です。</dd> + <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt> + <dd>通知自体を表示する空間が充分にない場合に通知を表す画像の URL です。</dd> + <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> + <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の本文文字列です。</dd> + <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> + <dd>通知のデータの構造化されたクローンを返します。</dd> + <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> + <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の書字方向です。</dd> + <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> + <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の言語コードです。</dd> + <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> + <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の ID です。</dd> + <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> + <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知のアイコンの画像 URL です。</dd> + <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt> + <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の一部として表示される画像の URL です。</dd> + <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt> + <dd>古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定します。</dd> + <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt> + <dd>{{jsxref("Boolean")}} で、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示します。</dd> + <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt> + <dd>静かに通知をするかどうかを明示します。つまり、デバイスの設定に関係なく、通知の際に無音やバイブレーションさせない状態を設定できます。</dd> + <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt> + <dd>通知が生成されたとき、または適用されるとき (過去、現在、未来) の時刻を示します。</dd> + <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> + <dd>コンストラクターの第1引数で指定された通知のタイトルです。</dd> + <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt> + <dd>バイブレーションハードウェアを持つ端末のためのバイブレーションパターンを指定します。</dd> +</dl> + +<h4 id="Event_handlers" name="Event_handlers">イベントハンドラー</h4> + +<dl> + <dt>{{domxref("Notification.onclick")}}</dt> + <dd>{{domxref("Element/click_event", "click")}} イベントのハンドラーです。ユーザーが通知をクリックするたびに起動されます。</dd> + <dt>{{domxref("Notification.onclose")}}</dt> + <dd>{{domxref("HTMLDialogElement/close_event", "close")}} イベントのハンドラーです。ユーザーが通知を閉じたときに起動されます。</dd> + <dt>{{domxref("Notification.onerror")}}</dt> + <dd>{{domxref("HTMLElement/error_event", "error")}} イベントのハンドラーです。通知がエラーに遭遇するたびに起動されます。</dd> + <dt>{{domxref("Notification.onshow")}}</dt> + <dd>{{domxref("Element/show_event", "show")}} イベントのハンドラーです。通知が表示されたときに起動されます。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<h3 id="Static_methods" name="Static_methods">静的メソッド</h3> + +<p>これらのメソッドは <code>Notification</code> オブジェクト自体に対してのみ使用できます。</p> + +<dl> + <dt>{{domxref("Notification.requestPermission()")}}</dt> + <dd>ユーザーに通知を表示する許可をリクエストします。</dd> +</dl> + +<h3 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h3> + +<p>これらのメソッドは <code>Notification</code> オブジェクトのインスタンス、または<a href="/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>からのみ使用できます。 <code>Notification</code> オブジェクトは {{domxref("EventTarget")}} インターフェイスも継承しています。</p> + +<dl> + <dt>{{domxref("Notification.close()")}}</dt> + <dd>プログラムで通知を閉じます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の基本的な HTML を想定してください。</p> + +<pre class="brush: html notranslate"><button onclick="notifyMe()">Notify me!</button></pre> + +<p>以下のように通知を送信することが可能で — ここでは、通知に対応しているかどうかを最初にチェックしたい場合に使用できる、かなり冗長で完全なコードのセットを提示します。次に、通知を送信する前に、現在のオリジンに通知を送信するための許可が付与されているかどうかをチェックし、必要に応じて許可を要求します。</p> + +<pre class="brush: js notranslate">function notifyMe() { + // ブラウザーが通知に対応しているかどうかをチェックしましょう + if (!("Notification" in window)) { + alert("このブラウザーはデスクトップ通知に対応していません。"); + } + + // 通知の許可が既に得られているかどうかをチェックしましょう + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification("こんにちは!"); + } + + // そうでなければ、ユーザーに許可を求める必要があります + else if (Notification.permission !== "denied") { + Notification.requestPermission().then(function (permission) { + // ユーザーが許可したら、通知を作成しましょう + if (permission === "granted") { + var notification = new Notification("こんにちは!"); + } + }); + } + + // 最後に、ユーザーが通知を拒否していて、あなたが敬意を + // 払いたい場合は、これ以上相手を煩わせることはありません。 +}</pre> + +<p>このページでライブ例を公開するのはやめました。 Chrome や Firefox が別オリジンの {{htmlelement("iframe")}} から要求された通知の許可をしないようになり、その他のブラウザーも従っているからです。動作する例を見る場合は、 <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do リストの例</a> (また、<a href="https://mdn.github.io/to-do-notifications/">ライブで動作するアプリ</a>) を参照してください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 上記の例では、通知をユーザーの操作 (ボタンのクリック) から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っています。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/lang/index.html b/files/ja/web/api/notification/lang/index.html new file mode 100644 index 0000000000..c2f4eb0632 --- /dev/null +++ b/files/ja/web/api/notification/lang/index.html @@ -0,0 +1,71 @@ +--- +title: Notification.lang +slug: Web/API/Notification/lang +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - プロパティ + - 通知 +translation_of: Web/API/Notification/lang +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>lang</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>lang</code> オプションで指定された通知の言語を示します。</p> + +<p>言語自体は {{domxref("DOMString")}} で <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP 47 言語タグ</a>を表します。簡単なリファレンスとしては. Sitepoint の <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">ISO 2 letter language codes</a> ページを見てください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>language</var> = <var>Notification</var>.lang; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>言語タグを指定する {{domxref("DOMString")}} です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のスニペットは通知を発行するためのものです。単純な <code>options</code> オブジェクトが生成され、通知が <code>Notification()</code> コンストラクターを使用して発行されます。</p> + +<pre class="brush: js notranslate">var options = { + body: 'Do you like my body?', + lang: 'en-US' +} + +var n = new Notification('Test notification',options); + +console.log(n.lang) // should return 'en-US'</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-lang','lang')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.lang")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/maxactions/index.html b/files/ja/web/api/notification/maxactions/index.html new file mode 100644 index 0000000000..437e8e8fb4 --- /dev/null +++ b/files/ja/web/api/notification/maxactions/index.html @@ -0,0 +1,67 @@ +--- +title: Notification.maxActions +slug: Web/API/Notification/maxActions +tags: + - API + - Notification + - Notifications + - Notifications API + - Property + - Reference + - actions + - プロパティ + - 通知 +translation_of: Web/API/Notification/maxActions +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary"><strong><code>maxActions</code></strong> は {{domxref("Notification")}} インターフェイスの属性で、端末とユーザーエージェントが対応するアクションの最大数を返します。実質的には、これはユーザーエージェントが尊重する {{domxref("Notification.actions")}} 配列の最大数です。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.maxActions +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>整数の {{JSxRef("Number")}} で、ユーザ-エージェントと端末がユーザーに提示することができるできる通知アクションの最大数を示します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下のスニペットは、対応するアクションの最大数をログ出力します。</p> + +<pre class="brush: js notranslate">const maxActions = Notification.maxActions; +console.log('This device can display at most ' + maxActions + ' actions on each notification.'); +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-actions','actions')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.actions")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> + <li>{{DOMxRef("Notification.maxActions")}}</li> +</ul> diff --git a/files/ja/web/api/notification/notification/index.html b/files/ja/web/api/notification/notification/index.html new file mode 100644 index 0000000000..de6abc4ca8 --- /dev/null +++ b/files/ja/web/api/notification/notification/index.html @@ -0,0 +1,101 @@ +--- +title: Notification.Notification() +slug: Web/API/Notification/Notification +tags: + - API + - Constructor + - Notification + - Notifications + - Notifications API + - Reference + - コンストラクター + - 通知 +translation_of: Web/API/Notification/Notification +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><code><strong>Notification()</strong></code> コンストラクターは、ユーザー通知を表す新しい {{domxref("Notification")}} オブジェクトのインスタンスを生成します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>title</var></code></dt> + <dd>通知のためのタイトルを定義します。発火したときにタイトルは通知ウィンドウのトップに表示されます。</dd> + <dt><code><var>options</var></code> {{optional_inline}}</dt> + <dd>通知に適用するカスタム設定を含むオプションオブジェクトです。使用できるオプションは以下のとおりです。 + <ul> + <li><code>dir</code>: 通知を表示する方向です。既定値は <code>auto</code> で、ブラウザーの言語設定の振る舞いが適用されますが、 <code>ltr</code> と <code>rtl</code> の値で振る舞いを上書きできます (ただし、ほとんどのブラウザーがこれらの設定を無視しているようですが)。</li> + <li><code>lang</code>: <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP 47 言語タグ</a>を表す {{domxref("DOMString")}} を使って指定される通知の言語です。簡単なリファレンスとして <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">ISO 2 letter language codes</a> ページを参照してください。</li> + <li><code>badge</code>: {{domxref("USVString")}} で、通知自体を表示する充分な空間がない場合に通知の表現に使用される画像の URL を指定します。</li> + <li><code>body</code>: {{domxref("DOMString")}} で、タイトルの下側に表示される通知の本文を表します。</li> + <li><code>tag</code>:通知のための識別タグを表す {{domxref("DOMString")}} です。</li> + <li><code>icon</code>:通知の一部として表示されるアイコンのURLを含む{{domxref("USVString")}} です。</li> + <li><code>image</code>: {{domxref("USVString")}} で、通知に表示される画像の URL を指定します。</li> + <li><code>data</code>: 通知に関連付ける任意のデータです。これはどのデータ型でも可能です。</li> + <li><code>vibrate</code>: 通知が発生したときに端末のバイブレーションハードウェアに通知する<a href="/ja/docs/Web/Guide/API/Vibration#Vibration_patterns">バイブレーションパターン</a>です。</li> + <li><code>renotify</code>: 古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定する {{domxref("Boolean")}} 値です。既定値は <code>false</code> で、通知しないことを意味します。</li> + <li><code>requireInteraction</code>: 通知が自動的に閉じるのではなく、ユーザーがクリックするか解除するまでアクティブな状態を維持すべきであることを示します。既定値は <code>false</code> です。</li> + <li><code>actions</code>: {{domxref("NotificationAction")}}} の配列で、通知が提示されたときにユーザーが利用できるアクションを表します。これらは、通知自体のコンテキスト内でアクションを実行するために、ユーザーが選択できる選択しです。アクションの名前は、アクションがユーザーによって選択されたことを知らせるために、サービスワーカーの通知ハンドラーに送られます。</li> + <li><code>silent</code>: 通知をサイレントにするかどうかを指定する{{domxref("Boolean")}} 値です。端末の設定にかかわらず、音やバイブレーションを発しないようにします。既定値は <code>false</code> で、サイレントではないことを意味します。</li> + </ul> + </dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p><code><a href="https://chrisdavidmills.github.io/emogotchi/">Emogotchi demo</a></code> (<a href="https://github.com/mdn/emogotchi">ソースコードを見る</a>) では、私たちが通知を発生させたいときに、 <code>spawnNotification()</code> 関数を実行しています。関数は必要な本文、アイコン、タイトルを指定する引数を受け取り、必要な <code>options</code> オブジェクトを生成して、 <code>Notification()</code> コンストラクターを用いて通知を発生させます。</p> + +<pre class="brush: js notranslate">function spawnNotification(theBody,theIcon,theTitle) { + var options = { + body: theBody, + icon: theIcon + } + var n = new Notification(theTitle,options); +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Notifications","#dom-notification-notification","Notification() constructor")}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.Notification")}}</p> + +<h3 id="Chrome_notes" name="Chrome_notes">Chrome の注意事項</h3> + +<p>Chrome 49 以降では、 incognito モードでは通知が動作しません。</p> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Internet_Explorer_notes" name="Internet_Explorer_notes">Internet Explorer の注意事項</h3> + +<p>バージョン 38.14352 以降の MS Edge は Notification API に対応しています。 <a href="https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history">Wikipedia - MS Edge</a></p> + +<p>IE 11 以前では対応していません。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">Notifications API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/onclick/index.html b/files/ja/web/api/notification/onclick/index.html new file mode 100644 index 0000000000..8534ad4c7b --- /dev/null +++ b/files/ja/web/api/notification/onclick/index.html @@ -0,0 +1,67 @@ +--- +title: Notification.onclick +slug: Web/API/Notification/onclick +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - onclick + - プロパティ + - 通知 +translation_of: Web/API/Notification/onclick +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>onclick</code></strong> は {{domxref("Notification")}} インターフェイスのプロパティで、 {{domxref("Element/click_event", "click")}} イベントを受信するイベントリスナーを指定します。これらのイベントはユーザーが表示されている {{domxref("Notification")}} をクリックしたときに発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.onclick = function(event) { ... }; +</pre> + +<p>既定の動作は、この通知に関連した<a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">閲覧コンテキスト</a>へフォーカスを移動することです。この動作をさせたくない場合は、イベントオブジェクトの {{domxref("Event/preventDefault", "preventDefault()")}} を呼び出してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例では、 <code>onclick</code> ハンドラーを使用して、通知がクリックされたときにウェブページを新しいタブで開くようにしています (<code>_blank</code> を含めて指定することで指定)。</p> + +<pre class="brush: js notranslate">notification.onclick = function(event) { + event.preventDefault(); // prevent the browser from focusing the Notification's tab + window.open('http://www.mozilla.org', '_blank'); +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.onclick")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/onclose/index.html b/files/ja/web/api/notification/onclose/index.html new file mode 100644 index 0000000000..302dd6ab11 --- /dev/null +++ b/files/ja/web/api/notification/onclose/index.html @@ -0,0 +1,37 @@ +--- +title: Notification.onclose +slug: Web/API/Notification/onclose +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - onclose + - プロパティ + - 通知 +translation_of: Web/API/Notification/onclose +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>onclose</code></strong> は {{domxref("Notification")}} インターフェイスのプロパティで、 {{domxref("HTMLDialogElement/close_event", "close")}} イベントを受信するイベントリスナーを指定します。これらのイベントは {{domxref("Notification")}} が閉じるときに発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.onclose = function() { ... }; +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.onclose")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/onerror/index.html b/files/ja/web/api/notification/onerror/index.html new file mode 100644 index 0000000000..71a97d1dcb --- /dev/null +++ b/files/ja/web/api/notification/onerror/index.html @@ -0,0 +1,55 @@ +--- +title: Notification.onerror +slug: Web/API/Notification/onerror +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - onerror + - プロパティ + - 通知 +translation_of: Web/API/Notification/onerror +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>onerror</code></strong> は {{domxref("Notification")}} インターフェイスのプロパティで、 {{domxref("HTMLElement/error_event", "error")}} イベントを受信するイベントリスナーを指定します。これらのイベントは {{domxref("Notification")}} が失敗したとき (多くの場合は通知の表示が阻止されたというエラーの場合) に発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.onerror = function() { ... };</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-onerror','onerror')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.onerror")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/onshow/index.html b/files/ja/web/api/notification/onshow/index.html new file mode 100644 index 0000000000..139e38661e --- /dev/null +++ b/files/ja/web/api/notification/onshow/index.html @@ -0,0 +1,37 @@ +--- +title: Notification.onshow +slug: Web/API/Notification/onshow +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - onshow + - プロパティ + - 通知 +translation_of: Web/API/Notification/onshow +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>onshow</code></strong> は {{domxref("Notification")}} インターフェイスのプロパティで、 {{domxref("Element/show_event", "show")}} イベントを受信するイベントリスナーを指定します。これらのイベントは {{domxref("Notification")}} が表示されるときに発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.onshow = function() { ... }; +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.onshow")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/permission/index.html b/files/ja/web/api/notification/permission/index.html new file mode 100644 index 0000000000..b838e6089f --- /dev/null +++ b/files/ja/web/api/notification/permission/index.html @@ -0,0 +1,94 @@ +--- +title: Notification.permission +slug: Web/API/Notification/permission +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - プロパティ + - 通知 +translation_of: Web/API/Notification/permission +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><code>permission</code> は {{domxref("Notification")}} インターフェイスの読み取り専用プロパティで、ユーザーが現在のオリジンに対してウェブ通知を表示することを許可したかどうか、現在の許可状態を表します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>permission</var> = Notification.permission;</pre> + +<h3 id="Return_Value" name="Return_Value">値</h3> + +<p>現在の許可を表す {{domxref("DOMString")}} です。以下の値が可能です。</p> + +<ul> + <li><code>granted</code>: 現在のオリジンがシステム通知を表示することについて、ユーザーが明示的な許可を与えている。</li> + <li><code>denied</code>: 現在のオリジンがシステム通知を表示することについて、ユーザーが明示的に拒否している。</li> + <li><code>default</code>: ユーザーの決定は分からない。この場合、アプリケーションは許可が <code>denied</code> である可能用に動作する。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下のスニペットは、まず通知に対応しているかどうかをチェックし、現在のオリジンで通知を送信するための許可が付与されているかどうかをチェックし、必要であれば許可を要求してから通知を送信したい場合に使用することができます。</p> + +<pre class="brush: js notranslate">function notifyMe() { + // Let's check if the browser supports notifications + if (!("Notification" in window)) { + console.log("This browser does not support desktop notification"); + } + + // Let's check whether notification permissions have alredy been granted + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification("Hi there!"); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== 'denied' || Notification.permission === "default") { + Notification.requestPermission(function (permission) { + // If the user accepts, let's create a notification + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // At last, if the user has denied notifications, and you + // want to be respectful there is no need to bother them any more. +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName("Web Notifications","#dom-notification-permission","permission")}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.permission")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/docs/Web/API/Notifications_API">通知 API</a></li> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> + <li><a href="/ja/docs/Web/API/Permissions_API">許可 API</a></li> + <li><a href="/ja/docs/Web/API/Permissions_API/Using_the_Permissions_API">許可 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/renotify/index.html b/files/ja/web/api/notification/renotify/index.html new file mode 100644 index 0000000000..738c06d503 --- /dev/null +++ b/files/ja/web/api/notification/renotify/index.html @@ -0,0 +1,80 @@ +--- +title: Notification.renotify +slug: Web/API/Notification/renotify +tags: + - API + - Experimental + - Notifications + - Property + - Reference + - renotify + - プロパティ + - 通知 +translation_of: Web/API/Notification/renotify +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>renotify</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>renotify</code> オプションで指定され、新しい通知が古い通知を置き換えたときにユーザーに通知されるかどうかを指定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>renotify</var> = <var>Notification</var>.renotify; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("Boolean")}} です。 <code>false</code> が既定値です。 <code>true</code> で通知を静かに行います。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のスニペットは静かな通知を発行するためのものです。単純な <code>options</code> オブジェクトが生成され、通知が <code>Notification()</code> コンストラクターを使用して発行されます。</p> + +<pre class="brush: js notranslate">var options = { + body: 'Do you like my body?', + renotify: true +} + +var n = new Notification('Test notification',options); + +console.log(n.renotify) // should log true</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-renotify','renotify')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + + + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + + + +<p>{{Compat("api.Notification.renotify")}}</p> + + + +<h2 id="See_also" name="See_also">関連情報</h2> + + + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/requestpermission/index.html b/files/ja/web/api/notification/requestpermission/index.html new file mode 100644 index 0000000000..7d3dd27f9e --- /dev/null +++ b/files/ja/web/api/notification/requestpermission/index.html @@ -0,0 +1,122 @@ +--- +title: Notification.requestPermission() +slug: Web/API/Notification/requestPermission +tags: + - API + - DOM + - Method + - Notification + - Notifications + - Notifications API + - Reference + - メソッド + - 通知 +translation_of: Web/API/Notification/requestPermission +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<div class="note"> +<p><strong>注:</strong> この機能は {{domxref("SharedWorker")}} 内では使用できません。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: Safari はまだ、許可を得るのにコールバック構文を使用します。適切に機能を検出してコードを実行する方法の良い例として、<a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a>をご覧ください。</p> +</div> + +<p><strong><code>requestPermission()</code></strong> は {{domxref("Notification")}} インターフェイスのメソッドで、ユーザーに現在のオリジンが通知を表示することを許可するよう要求します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p>最新の仕様では、このメソッドは次のようにプロミスベースの構文に更新されています。</p> + +<pre class="notranslate">Notification.requestPermission().then(function(permission) { ... });</pre> + +<p>以前は、この構文は単純なコールバックに基づくものでした。このバージョンは非推奨になりました。</p> + +<pre class="notranslate">Notification.requestPermission(<var>callback</var>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt> + <dd>省略可能なコールバック関数で、許可の値で呼び出されます。プロミスを返値にしたために非推奨になりました。</dd> +</dl> + +<h3 id="Returns" name="Returns">返値</h3> + +<p>{{jsxref("Promise")}} で、ユーザーが許可を選択したら {{domxref("DOMString")}} に解決します。この文字列の取りうる値は次の通りです。</p> + +<ul> + <li><code>granted</code></li> + <li><code>denied</code></li> + <li><code>default</code></li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この基本的な HTML を想定してください。</p> + +<pre class="brush: html notranslate"><button onclick="notifyMe()">Notify me!</button></pre> + +<p>以下のように通知を送信することが可能です。 — ここでは、かなり冗長で完全なコードのセットを紹介しています。最初に通知に対応しているかどうかをチェックし、通知を送信するために現在のオリジンに許可が与えられているかどうかをチェックし、必要であれば許可を要求してから通知を送信したい場合に使用できます。</p> + +<pre class="brush: js notranslate">function notifyMe() { + // Let's check if the browser supports notifications + if (!("Notification" in window)) { + alert("This browser does not support desktop notification"); + } + + // Let's check whether notification permissions have already been granted + else if (Notification.permission === "granted") { + // If it's okay let's create a notification + var notification = new Notification("Hi there!"); + } + + // Otherwise, we need to ask the user for permission + else if (Notification.permission !== "denied") { + Notification.requestPermission().then(function (permission) { + // If the user accepts, let's create a notification + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); + } + + // At last, if the user has denied notifications, and you + // want to be respectful there is no need to bother them any more. +}</pre> + +<p>このページでライブ例を公開するのはやめました。 Chrome や Firefox が別オリジンの {{htmlelement("iframe")}} から要求された通知の許可をしないようになり、その他のブラウザーも従っているからです。動作する例を見る場合は、 <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do リストの例</a> (また、<a href="https://mdn.github.io/to-do-notifications/">ライブで動作するアプリ</a>) を参照してください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 上記の例では、通知をユーザーの操作 (ボタンのクリック) から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っており、 Safari もしばらく前からこれを行っています。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.requestPermission")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/requireinteraction/index.html b/files/ja/web/api/notification/requireinteraction/index.html new file mode 100644 index 0000000000..a03568ee3c --- /dev/null +++ b/files/ja/web/api/notification/requireinteraction/index.html @@ -0,0 +1,66 @@ +--- +title: Notification.requireInteraction +slug: Web/API/Notification/requireInteraction +tags: + - API + - DOM + - Notification + - Notifications API + - Property + - Reference + - Web + - requireInteraction + - プロパティ + - 通知 +translation_of: Web/API/Notification/requireInteraction +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>requireInteraction</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示す {{jsxref("Boolean")}} を返します。</p> + +<div class="note"> +<p><strong>注</strong>: これは最初に、 {{domxref("Notification.Notification()")}} コンストラクターの option オブジェクトの <code>requireInteraction</code> が <code>true</code> の状態で生成されたときに設定されることがあります。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js notranslate">function spawnNotification(theTitle,theBody,shouldRequireInteraction) { + var options = { + body: theBody, + requireInteraction: shouldRequireInteraction + } + var n = new Notification(theTitle,options); +}</pre> + +<h3 id="Return_Value" name="Return_Value">値</h3> + +<p>{{jsxref("Boolean")}} です。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-requireinteraction','requireInteraction')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.requireInteraction")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/silent/index.html b/files/ja/web/api/notification/silent/index.html new file mode 100644 index 0000000000..490d24bf14 --- /dev/null +++ b/files/ja/web/api/notification/silent/index.html @@ -0,0 +1,69 @@ +--- +title: Notification.silent +slug: Web/API/Notification/silent +tags: + - API + - Notification + - Notifications + - Notifications API + - Property + - Reference + - silent + - プロパティ + - 通知 +translation_of: Web/API/Notification/silent +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>silent</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、通知が静かに行われるべきかどうか、すなわち、端末の設定に関わらず、音やバイブレーションを発生させないようにするかを指定します。これは {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>silent</code> オプションで指定されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>silent</var> = <var>Notification</var>.silent; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("Boolean")}} です。 <code>false</code> が既定値です。 <code>true</code> で通知を静かに行います。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のスニペットは静かな通知を発行するためのものです。単純な <code>options</code> オブジェクトが生成され、通知が <code>Notification()</code> コンストラクターを使用して発行されます。</p> + +<pre class="brush: js notranslate">var options = { + body: 'Do you like my body?', + silent: true +} + +var n = new Notification('Test notification', options); + +console.log(n.silent) // should log true</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-silent','silent')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.silent")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/tag/index.html b/files/ja/web/api/notification/tag/index.html new file mode 100644 index 0000000000..28caad54d4 --- /dev/null +++ b/files/ja/web/api/notification/tag/index.html @@ -0,0 +1,63 @@ +--- +title: Notification.tag +slug: Web/API/Notification/tag +tags: + - API + - DOM + - Notification + - Notifications + - Notifications API + - Property + - Reference + - tag + - プロパティ + - 通知 +translation_of: Web/API/Notification/tag +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>tag</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>tag</code> オプションで指定された通知の識別タグを示します。</p> + +<p>通知タグの考え方は、複数の通知が同じタグを共有し、それらを一緒にリンクすることです。ユーザーの画面が膨大な数の類似した通知で埋め尽くされるのを避けるために、一つの通知をプログラム的に別のものと置き換えることができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>tag</var> = <var>Notification</var>.tag; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("DOMString")}} です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API#Dealing_with_repeated_notifications">通知 API の使用</a>の記事に、タグの使い方の良い例があります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-tag','tag')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.tag")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/timestamp/index.html b/files/ja/web/api/notification/timestamp/index.html new file mode 100644 index 0000000000..770e410c00 --- /dev/null +++ b/files/ja/web/api/notification/timestamp/index.html @@ -0,0 +1,72 @@ +--- +title: Notification.timestamp +slug: Web/API/Notification/timestamp +tags: + - API + - Notification + - Notifications + - Notifications API + - Property + - Reference + - timeStamp + - プロパティ + - 通知 +translation_of: Web/API/Notification/timestamp +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>timestamp</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>timestamp</code> オプションで指定された {{domxref("DOMTimeStamp")}} を返します。</p> + +<p>通知のタイムスタンプは、 1970/01/01 00:00:00 UTC からの経過ミリ秒数で、通知が作成された時刻、または通知に関連づけたい任意のタイムスタンプを表します。例えば、予定されている会議のタイムスタンプは未来に設定することができ、一方、見逃したメッセージのタイムスタンプは過去に設定することができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>timestamp</var> = <var>Notification</var>.timestamp;</pre> + +<h3 id="Return_Value" name="Return_Value">値</h3> + +<p>{{domxref("DOMTimeStamp")}} です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のスニペットは通知を発行します。単純な <code>options</code> オブジェクトが生成され、通知が <code>Notification()</code> コンストラクターを使用して発行されます。</p> + +<pre class="brush: js notranslate">var dts = Math.floor(Date.now()); + +var options = { + body: 'Do you like my body?', + timestamp: dts +} + +var n = new Notification('Test notification',options); + +console.log(n.timestamp) // should log original timestamp</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-timestamp','timestamp')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.timestamp")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/title/index.html b/files/ja/web/api/notification/title/index.html new file mode 100644 index 0000000000..d860d7c9e7 --- /dev/null +++ b/files/ja/web/api/notification/title/index.html @@ -0,0 +1,68 @@ +--- +title: Notification.title +slug: Web/API/Notification/title +tags: + - API + - Notification + - Notifications + - Notifications API + - Property + - Reference + - Title + - プロパティ + - 通知 +translation_of: Web/API/Notification/title +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>title</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、 {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code><var>title</var></code> 引数で指定された通知のタイトルを示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>title</var> = <var>Notification</var>.title;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("DOMString")}} です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">function spawnNotification(theBody,theIcon,theTitle) { + var options = { + body: theBody, + icon: theIcon + } + + var n = new Notification(theTitle,options); + + console.log(n.title) +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-title','title')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.title")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> diff --git a/files/ja/web/api/notification/vibrate/index.html b/files/ja/web/api/notification/vibrate/index.html new file mode 100644 index 0000000000..91ada77463 --- /dev/null +++ b/files/ja/web/api/notification/vibrate/index.html @@ -0,0 +1,71 @@ +--- +title: Notification.vibrate +slug: Web/API/Notification/vibrate +tags: + - API + - DOM + - Device + - Notification + - Notifications + - Notifications API + - Property + - Reference + - vibrate + - プロパティ + - 通知 +translation_of: Web/API/Notification/vibrate +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><strong><code>vibrate</code></strong> は {{domxref("Notification")}} インターフェイスの読取専用プロパティで、通知が発行されたときに端末のバイブレーションハードウェアが出力する<a href="/ja/docs/Web/Guide/API/Vibration#Vibration_patterns">バイブレーションパターン</a>を指定します。これは {{domxref("Notification.Notification","Notification()")}} コンストラクターの <code>vibrate</code> オプションで指定されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>vibrate</var> = <var>Notification</var>.vibrate; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><a href="/ja/docs/Web/Guide/API/Vibration#Vibration_patterns">バイブレーションパターン</a>で、これは <a href="http://dev.w3.org/2009/dap/vibration/">Vibration API spec</a> で定義されているものです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のスニペットは静かな通知を発行するためのものです。単純な <code>options</code> オブジェクトが生成され、通知が <code>Notification()</code> コンストラクターを使用して発行されます。</p> + +<pre class="brush: js notranslate">var options = { + body: 'Do you like my body?', + vibrate: [200, 100, 200] +} + +var n = new Notification('Test notification',options); + +console.log(n.vibrate) // should log [200,100,200]</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-vibrate','vibrate')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Notification.vibrate")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li> +</ul> |
