From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../broadcastchannel/broadcastchannel/index.html | 66 ++++++++ files/ja/web/api/broadcastchannel/close/index.html | 63 ++++++++ files/ja/web/api/broadcastchannel/index.html | 92 +++++++++++ .../api/broadcastchannel/message_event/index.html | 171 +++++++++++++++++++++ .../broadcastchannel/messageerror_event/index.html | 85 ++++++++++ files/ja/web/api/broadcastchannel/name/index.html | 65 ++++++++ .../web/api/broadcastchannel/onmessage/index.html | 64 ++++++++ .../api/broadcastchannel/onmessageerror/index.html | 52 +++++++ .../api/broadcastchannel/postmessage/index.html | 52 +++++++ 9 files changed, 710 insertions(+) create mode 100644 files/ja/web/api/broadcastchannel/broadcastchannel/index.html create mode 100644 files/ja/web/api/broadcastchannel/close/index.html create mode 100644 files/ja/web/api/broadcastchannel/index.html create mode 100644 files/ja/web/api/broadcastchannel/message_event/index.html create mode 100644 files/ja/web/api/broadcastchannel/messageerror_event/index.html create mode 100644 files/ja/web/api/broadcastchannel/name/index.html create mode 100644 files/ja/web/api/broadcastchannel/onmessage/index.html create mode 100644 files/ja/web/api/broadcastchannel/onmessageerror/index.html create mode 100644 files/ja/web/api/broadcastchannel/postmessage/index.html (limited to 'files/ja/web/api/broadcastchannel') diff --git a/files/ja/web/api/broadcastchannel/broadcastchannel/index.html b/files/ja/web/api/broadcastchannel/broadcastchannel/index.html new file mode 100644 index 0000000000..7d38827c8e --- /dev/null +++ b/files/ja/web/api/broadcastchannel/broadcastchannel/index.html @@ -0,0 +1,66 @@ +--- +title: BroadcastChannel() +slug: Web/API/BroadcastChannel/BroadcastChannel +tags: + - API + - Broadcast Channel API + - BroadcastChannel + - Constructor + - Experimental + - HTML API + - Reference +translation_of: Web/API/BroadcastChannel/BroadcastChannel +--- +

{{APIRef("BroadCastChannel API")}}

+ +

BroadcastChannel() コンストラクタは新しい {{domxref("BroadcastChannel")}} を作成し、それを基礎となるチャネルに接続します。

+ +

{{AvailableInWorkers}}

+ +

構文

+ +
 channel = new BroadcastChannel(channel);
+ +

値

+ +
+
channel
+
チャネルの名前を表す {{domxref("DOMString")}} です。 同じ{{glossary("origin","オリジン")}}を持つすべての{{glossary("browsing context", "閲覧コンテキスト")}}に対して、この名前を持つ単一のチャンネルがあります。
+
+ +

例

+ +
// "internal_notification" チャンネルをリッスンする新しいチャンネルを作成します。
+
+var bc = new BroadcastChannel('internal_notification');
+bc.postMessage('New listening connected!');
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel", "BroadcastChannel()")}}{{Spec2('HTML WHATWG')}}初期定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/broadcastchannel/close/index.html b/files/ja/web/api/broadcastchannel/close/index.html new file mode 100644 index 0000000000..d573ea251b --- /dev/null +++ b/files/ja/web/api/broadcastchannel/close/index.html @@ -0,0 +1,63 @@ +--- +title: BroadcastChannel.close() +slug: Web/API/BroadcastChannel/close +tags: + - API + - Broadcast Channel API + - BroadcastChannel + - Experimental + - HTML API + - Method + - Reference +translation_of: Web/API/BroadcastChannel/close +--- +

{{APIRef("BroadCastChannel API")}}

+ +

BroadcastChannel.close() は、基礎となるチャネルへの接続を終了し、オブジェクトをガベージコレクションできるようにします。 このチャンネルがもう必要ないことをブラウザーが知る他の方法はないので、これは実行するのに必要なステップです。

+ +

{{AvailableInWorkers}}

+ +

構文

+ +
var str = channel.close();
+
+ +

例

+ +
// チャンネルに接続
+var bc = new BroadcastChannel('test_channel');
+
+// その他の操作（postMessage など）
+
+// 終了したら、チャンネルから切断します
+bc.close();
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel-close", "BroadcastChannel.close()")}}{{Spec2('HTML WHATWG')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.BroadcastChannel.close")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/broadcastchannel/index.html b/files/ja/web/api/broadcastchannel/index.html new file mode 100644 index 0000000000..42a37751bb --- /dev/null +++ b/files/ja/web/api/broadcastchannel/index.html @@ -0,0 +1,92 @@ +--- +title: BroadcastChannel +slug: Web/API/BroadcastChannel +tags: + - API + - Broadcast Channel API + - Experimental + - HTML API + - Interface + - Reference +translation_of: Web/API/BroadcastChannel +--- +

{{APIRef("Broadcast Channel API")}}

+ +

BroadcastChannel インターフェイスは、特定の{{glossary("origin","オリジン")}}の{{glossary("browsing context","閲覧コンテキスト")}}が購読できる名前付きチャネルを表します。 それは、同じオリジンの異なるドキュメント間（異なるウィンドウ、タブ、フレーム、iframe）の通信を可能にします。 メッセージは、チャンネルをリッスンしているすべての BroadcastChannel オブジェクトで発生する {{event("message")}} イベントを介して放送されます。

+ +

{{AvailableInWorkers}}

+ +

コンストラクタ

+ +
+
{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}
+
名前付きチャンネルにリンクするオブジェクトを作成します。
+
+ +

プロパティ

+ +

このインターフェイスは、その親である {{domxref("EventTarget")}} からもプロパティを継承します。

+ +
+
{{domxref("BroadcastChannel.name")}}
+
チャネルの名前である {{domxref("DOMString")}} を返します。
+
+

イベントハンドラ

+
+
{{domxref("BroadcastChannel.onmessage")}}
+
このオブジェクトで {{event("message")}} イベントが発生したときに実行する関数を指定する {{domxref("EventHandler")}} プロパティ。
+
{{domxref("BroadcastChannel.onmessageerror")}}
+
{{domxref("EventHandler")}} は、{{domxref("MessageError")}} 型の {{domxref("MessageEvent")}} が発生したとき、つまり逆シリアル化できないメッセージを受け取ったときに呼び出されます。
+
+ +

メソッド

+ +

このインターフェイスは、その親である {{domxref("EventTarget")}} からもメソッドを継承しています。

+ +
+
{{domxref("BroadcastChannel.postMessage()")}}
+
同じチャンネルをリッスンしている各 BroadcastChannel オブジェクトに、任意の種類のオブジェクトのメッセージを送信します。
+
{{domxref("BroadcastChannel.close()")}}
+
チャネルオブジェクトを閉じます。 これは、新しいメッセージを取得しないことを示し、最終的にガベージコレクションされることを許可します。
+
+ +

イベント

+ +
+
{{domxref("BroadcastChannel.message_event","message")}}
+
メッセージがチャネルに到着したときに発生します。
+ {{domxref("BroadcastChannel.onmessage","onmessage")}} プロパティからも利用できます。
+
{{domxref("BroadcastChannel.messageerror_event","messageerror")}}
+
逆シリアル化できないメッセージが到着したときに発生します。
+ {{domxref("BroadcastChannel.onmessageerror","onmessageerror")}} プロパティからも利用できます。
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "comms.html#broadcastchannel", "BroadcastChannel")}}{{Spec2('HTML WHATWG')}}初期定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/broadcastchannel/message_event/index.html b/files/ja/web/api/broadcastchannel/message_event/index.html new file mode 100644 index 0000000000..4b473bf70b --- /dev/null +++ b/files/ja/web/api/broadcastchannel/message_event/index.html @@ -0,0 +1,171 @@ +--- +title: 'BroadcastChannel: message イベント' +slug: Web/API/BroadcastChannel/message_event +tags: + - Communication + - Event + - EventSource + - Reference + - events + - message + - messaging +translation_of: Web/API/BroadcastChannel/message_event +--- +
{{APIRef}}
+ +

message イベントは、メッセージがそのチャネルに到着したときに {{domxref('BroadcastChannel')}} オブジェクトに対して発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("MessageEvent")}}
イベントハンドラプロパティ{{domxref("BroadcastChannel.onmessage","onmessage")}}
+ +

例

+ +

実例

+ +

この例では、ユーザーがボタンをクリックしたときに {{htmlelement("textarea")}} の内容を放送する "Sender" の {{htmlelement("iframe")}} と、放送メッセージを受信し、その結果を {{htmlelement("div")}} 要素に書き込む2つの "Receiver" の <iframe> があります。

+ +

Sender

+ + + +
const channel = new BroadcastChannel('example-channel');
+const messageControl = document.querySelector('#message');
+const broadcastMessageButton = document.querySelector('#broadcast-message');
+
+broadcastMessageButton.addEventListener('click', () => {
+    channel.postMessage(messageControl.value);
+})
+
+ +

Receiver 1

+ + + +
const channel = new BroadcastChannel('example-channel');
+channel.addEventListener('message', (event) => {
+  received.textContent = event.data;
+});
+ +

Receiver 2

+ + + +
const channel = new BroadcastChannel('example-channel');
+channel.addEventListener('message', (event) => {
+  received.textContent = event.data;
+});
+ +

結果

+ +

{{ EmbedLiveSample('Sender', '100%', '170px','' ,'' , 'dummy') }}

+ +

{{ EmbedLiveSample('Receiver_1', '100%', '150px','' ,'' , 'dummy') }}

+ +

{{ EmbedLiveSample('Receiver_2', '100%', '150px','' ,'' , 'dummy') }}

+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', 'indices.html#event-message')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.BroadcastChannel.message_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/broadcastchannel/messageerror_event/index.html b/files/ja/web/api/broadcastchannel/messageerror_event/index.html new file mode 100644 index 0000000000..45c4c9385c --- /dev/null +++ b/files/ja/web/api/broadcastchannel/messageerror_event/index.html @@ -0,0 +1,85 @@ +--- +title: 'BroadcastChannel: messageerror イベント' +slug: Web/API/BroadcastChannel/messageerror_event +tags: + - Event +translation_of: Web/API/BroadcastChannel/messageerror_event +--- +
{{APIRef}}
+ +

messageerror イベントは、逆シリアル化できないメッセージがチャネルに到着したときに {{domxref('BroadcastChannel')}} オブジェクトに対して発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("MessageEvent")}}
イベントハンドラプロパティ{{domxref("BroadcastChannel.onmessageerror","onmessageerror")}}
+ +

例

+ +

このコードは addEventListener を使用してメッセージとエラーをリッスンします。

+ +
const channel = new BroadcastChannel('example-channel');
+
+channel.addEventListener('message', (event) => {
+  received.textContent = event.data;
+});
+
+channel.addEventListener('messageerror', (event) => {
+  console.error(event);
+});
+ +

上と同じですが、{{domxref("BroadcastChannel.onmessage","onmessage")}} と {{domxref("BroadcastChannel.onmessageerror","onmessageerror")}} のイベントハンドラプロパティを使用します。

+ +
const channel = new BroadcastChannel('example-channel');
+
+channel.onmessage = (event) => {
+  received.textContent = event.data;
+};
+
+channel.onmessageerror = (event) => {
+  console.log(event);
+};
+
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.BroadcastChannel.messageerror_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/broadcastchannel/name/index.html b/files/ja/web/api/broadcastchannel/name/index.html new file mode 100644 index 0000000000..f7d0345525 --- /dev/null +++ b/files/ja/web/api/broadcastchannel/name/index.html @@ -0,0 +1,65 @@ +--- +title: BroadcastChannel.name +slug: Web/API/BroadcastChannel/name +tags: + - Broadcast Channel API + - BroadcastChannel + - Experimental + - HTML API + - Property + - Read-only + - Reference +translation_of: Web/API/BroadcastChannel/name +--- +

{{APIRef("BroadCastChannel API")}}

+ +

読み取り専用の BroadcastChannel.name プロパティは、指定されたチャンネルをその名前で一意に識別する {{domxref("DOMString")}} を返します。 この名前は作成時に {{domxref("BroadcastChannel.BroadCastChannel", "BroadcastChannel()")}} コンストラクタに渡されるため、読み取り専用です。

+ +

{{AvailableInWorkers}}

+ +

構文

+ +
var str = channel.name;
+
+ +

例

+ +
// チャンネルに接続
+var bc = new BroadcastChannel('test_channel');
+
+// その他の操作（postMessage など）
+
+// チャンネル名をコンソールに記録します
+console.log(bc.name); // "test_channel"
+
+// 終了したら、チャンネルから切断します
+bc.close();
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel-name", "BroadcastChannel.name")}}{{Spec2('HTML WHATWG')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.BroadcastChannel.name")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/broadcastchannel/onmessage/index.html b/files/ja/web/api/broadcastchannel/onmessage/index.html new file mode 100644 index 0000000000..6621ea88e2 --- /dev/null +++ b/files/ja/web/api/broadcastchannel/onmessage/index.html @@ -0,0 +1,64 @@ +--- +title: BroadcastChannel.onmessage +slug: Web/API/BroadcastChannel/onmessage +tags: + - API + - Broadcast Channel API + - BroadcastChannel + - Event Handler + - Experimental + - HTML API + - Property + - Reference +translation_of: Web/API/BroadcastChannel/onmessage +--- +

{{APIRef("BroadCastChannel API")}}

+ +

BroadcastChannel.onmessage イベントハンドラは、{{domxref("MessageEvent")}} 型の {{event("message")}} イベントがこの {{domxref("BroadcastChannel")}} によって受信されたときに実行する関数を指定するプロパティです。 このようなイベントは、チャネルに放送されるメッセージとともにブラウザーによって送信されます。

+ +

{{AvailableInWorkers}}

+ +

構文

+ +
channel.onmessage = function;
+
+ +

Values

+ + + +

例

+ +
bc.onmessage = function(ev) { console.log('message event received!'); };
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "comms.html#handler-broadcastchannel-onmessage", "BroadcastChannel.onmessage")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.BroadcastChannel.onmessage")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/broadcastchannel/onmessageerror/index.html b/files/ja/web/api/broadcastchannel/onmessageerror/index.html new file mode 100644 index 0000000000..c1e8828871 --- /dev/null +++ b/files/ja/web/api/broadcastchannel/onmessageerror/index.html @@ -0,0 +1,52 @@ +--- +title: BroadcastChannel.onmessageerror +slug: Web/API/BroadcastChannel/onmessageerror +tags: + - API + - BroadcastChannel + - Event Handler + - Property + - Reference + - onmessageerror +translation_of: Web/API/BroadcastChannel/onmessageerror +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("BroadcastChannel")}} インタフェース の onmessageerror イベントハンドラは {{domxref("EventListener")}} であり、messageerror 型の {{domxref("MessageEvent")}} が BroadcastChannel インスタンスで発生するたびに、つまり{{glossary("Deserialization", "逆シリアル化")}}できないメッセージを受信すると呼び出されます。

+ +

{{AvailableInWorkers}}

+ +

構文

+ +
bc.onmessageerror = function() { ... };
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-broadcastchannel-onmessageerror', 'onmessageerror')}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.BroadcastChannel.onmessageerror")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/broadcastchannel/postmessage/index.html b/files/ja/web/api/broadcastchannel/postmessage/index.html new file mode 100644 index 0000000000..b5be6e6d4d --- /dev/null +++ b/files/ja/web/api/broadcastchannel/postmessage/index.html @@ -0,0 +1,52 @@ +--- +title: BroadcastChannel.postMessage() +slug: Web/API/BroadcastChannel/postMessage +tags: + - API + - Broadcast Channel API + - BroadcastChannel + - Experimental + - HTML API + - Method + - Reference +translation_of: Web/API/BroadcastChannel/postMessage +--- +

{{APIRef("BroadCastChannel API")}}

+ +

BroadcastChannel.postMessage() は、任意の種類の {{jsxref("Object")}} のメッセージを、同じ{{glossary("origin","オリジン")}}を持つ任意の{{glossary("browsing context","閲覧コンテキスト")}}内の各リスナーに送信します。 メッセージは、チャネルに結び付けられた各 BroadcastChannel を対象とした {{event("message")}} イベントとして送信します。

+ +

{{AvailableInWorkers}}

+ +

構文

+ +
var str = channel.postMessage(object);
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel-postmessage", "BroadcastChannel.postmessage()")}}{{Spec2('HTML WHATWG')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.BroadcastChannel.postMessage")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf