aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/api/broadcastchannel
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/broadcastchannel
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/ja/web/api/broadcastchannel')
-rw-r--r--files/ja/web/api/broadcastchannel/broadcastchannel/index.html66
-rw-r--r--files/ja/web/api/broadcastchannel/close/index.html63
-rw-r--r--files/ja/web/api/broadcastchannel/index.html92
-rw-r--r--files/ja/web/api/broadcastchannel/message_event/index.html171
-rw-r--r--files/ja/web/api/broadcastchannel/messageerror_event/index.html85
-rw-r--r--files/ja/web/api/broadcastchannel/name/index.html65
-rw-r--r--files/ja/web/api/broadcastchannel/onmessage/index.html64
-rw-r--r--files/ja/web/api/broadcastchannel/onmessageerror/index.html52
-rw-r--r--files/ja/web/api/broadcastchannel/postmessage/index.html52
9 files changed, 710 insertions, 0 deletions
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
+---
+<p>{{APIRef("BroadCastChannel API")}}</p>
+
+<p><span class="seoSummary"><strong><code>BroadcastChannel()</code></strong> コンストラクタは新しい {{domxref("BroadcastChannel")}} を作成し、それを基礎となるチャネルに接続します。</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"> <em>channel</em> = new BroadcastChannel(<em>channel</em>);</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><em>channel</em></dt>
+ <dd>チャネルの名前を表す {{domxref("DOMString")}} です。 同じ{{glossary("origin","オリジン")}}を持つすべての{{glossary("browsing context", "閲覧コンテキスト")}}に対して、この名前を持つ単一のチャンネルがあります。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">// "internal_notification" チャンネルをリッスンする新しいチャンネルを作成します。
+
+var bc = new BroadcastChannel('internal_notification');
+bc.postMessage('New listening connected!');
+</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('HTML WHATWG', "comms.html#dom-broadcastchannel", "BroadcastChannel()")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.BroadcastChannel")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("BroadcastChannel")}}: これが属するインターフェース。</li>
+</ul>
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
+---
+<p>{{APIRef("BroadCastChannel API")}}</p>
+
+<p><span class="seoSummary"><strong><code>BroadcastChannel.close()</code></strong> は、基礎となるチャネルへの接続を終了し、オブジェクトをガベージコレクションできるようにします。</span> このチャンネルがもう必要ないことをブラウザーが知る他の方法はないので、これは実行するのに必要なステップです。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>channe<code>l</code></em><code>.close();</code>
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">// チャンネルに接続
+var bc = new BroadcastChannel('test_channel');
+
+// その他の操作(postMessage など)
+
+// 終了したら、チャンネルから切断します
+bc.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('HTML WHATWG', "comms.html#dom-broadcastchannel-close", "BroadcastChannel.close()")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.close")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("BroadcastChannel")}}: これが属するインターフェース。</li>
+</ul>
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
+---
+<p>{{APIRef("Broadcast Channel API")}}</p>
+
+<p><span class="seoSummary"><strong><code>BroadcastChannel</code></strong> インターフェイスは、特定の{{glossary("origin","オリジン")}}の{{glossary("browsing context","閲覧コンテキスト")}}が購読できる名前付きチャネルを表します。 それは、同じオリジンの異なるドキュメント間(異なるウィンドウ、タブ、フレーム、iframe)の通信を可能にします。 メッセージは、チャンネルをリッスンしているすべての <code>BroadcastChannel</code> オブジェクトで発生する {{event("message")}} イベントを介して放送されます。</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor" name="Constructor">コンストラクタ</h2>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}</dt>
+ <dd>名前付きチャンネルにリンクするオブジェクトを作成します。</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<p><em>このインターフェイスは、その親である {{domxref("EventTarget")}} からもプロパティを継承します。</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.name")}}</dt>
+ <dd>チャネルの名前である {{domxref("DOMString")}} を返します。</dd>
+ <dt>
+ <h3 id="Event_handlers" name="Event_handlers">イベントハンドラ</h3>
+ </dt>
+ <dt>{{domxref("BroadcastChannel.onmessage")}}</dt>
+ <dd>このオブジェクトで {{event("message")}} イベントが発生したときに実行する関数を指定する {{domxref("EventHandler")}} プロパティ。</dd>
+ <dt>{{domxref("BroadcastChannel.onmessageerror")}}</dt>
+ <dd>{{domxref("EventHandler")}} は、{{domxref("MessageError")}} 型の {{domxref("MessageEvent")}} が発生したとき、つまり逆シリアル化できないメッセージを受け取ったときに呼び出されます。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em>このインターフェイスは、その親である {{domxref("EventTarget")}} からもメソッドを継承しています。</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.postMessage()")}}</dt>
+ <dd>同じチャンネルをリッスンしている各 BroadcastChannel オブジェクトに、任意の種類のオブジェクトのメッセージを送信します。</dd>
+ <dt>{{domxref("BroadcastChannel.close()")}}</dt>
+ <dd>チャネルオブジェクトを閉じます。 これは、新しいメッセージを取得しないことを示し、最終的にガベージコレクションされることを許可します。</dd>
+</dl>
+
+<h2 id="Events" name="Events">イベント</h2>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.message_event","message")}}</dt>
+ <dd>メッセージがチャネルに到着したときに発生します。<br>
+ {{domxref("BroadcastChannel.onmessage","onmessage")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("BroadcastChannel.messageerror_event","messageerror")}}</dt>
+ <dd>逆シリアル化できないメッセージが到着したときに発生します。<br>
+ {{domxref("BroadcastChannel.onmessageerror","onmessageerror")}} プロパティからも利用できます。</dd>
+</dl>
+
+<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('HTML WHATWG', "comms.html#broadcastchannel", "BroadcastChannel")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>ブラウザコンテキスト間でやり取りするもう1つの、よりヘビー級の方法: {{domxref("ServiceWorker")}}.</li>
+ <li><a href="/ja/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API の概要</a></li>
+</ul>
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
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>message</code> イベントは、メッセージがそのチャネルに到着したときに {{domxref('BroadcastChannel')}} オブジェクトに対して発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <td>バブリング</td>
+ <td>なし</td>
+ </tr>
+ <tr>
+ <th scope="row">キャンセル</th>
+ <td>不可</td>
+ </tr>
+ <tr>
+ <th scope="row">インターフェイス</th>
+ <td>{{domxref("MessageEvent")}}</td>
+ </tr>
+ <tr>
+ <th scope="row">イベントハンドラプロパティ</th>
+ <td>{{domxref("BroadcastChannel.onmessage","onmessage")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Live_example" name="Live_example">実例</h3>
+
+<p>この例では、ユーザーがボタンをクリックしたときに {{htmlelement("textarea")}} の内容を放送する "Sender" の {{htmlelement("iframe")}} と、放送メッセージを受信し、その結果を {{htmlelement("div")}} 要素に書き込む2つの "Receiver" の <code>&lt;iframe&gt;</code> があります。</p>
+
+<h4 id="Sender" name="Sender">Sender</h4>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Sender&lt;/h1&gt;
+&lt;label for="message"&gt;Type a message to broadcast:&lt;/label&gt;&lt;br/&gt;
+&lt;textarea id="message" name="message" rows="1" cols="40"&gt;Hello&lt;/textarea&gt;
+&lt;button id="broadcast-message" type="button"&gt;Broadcast message&lt;/button&gt;</pre>
+
+<pre class="brush: css">body {
+ border: 1px solid black;
+ padding: .5rem;
+ height: 150px;
+ font-family: "Fira Sans", sans-serif;
+}
+
+h1 {
+ font: 1.6em "Fira Sans", sans-serif;
+ margin-bottom: 1rem;
+}
+
+textarea {
+ padding: .2rem;
+}
+
+label, br {
+ margin: .5rem 0;
+}
+
+button {
+ vertical-align: top;
+ height: 1.5rem;
+}</pre>
+</div>
+
+<pre class="brush: js">const channel = new BroadcastChannel('example-channel');
+const messageControl = document.querySelector('#message');
+const broadcastMessageButton = document.querySelector('#broadcast-message');
+
+broadcastMessageButton.addEventListener('click', () =&gt; {
+ channel.postMessage(messageControl.value);
+})
+</pre>
+
+<h4 id="Receiver_1" name="Receiver_1">Receiver 1</h4>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Receiver 1&lt;/h1&gt;
+&lt;div id="received"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">body {
+ border: 1px solid black;
+ padding: .5rem;
+ height: 100px;
+ font-family: "Fira Sans", sans-serif;
+}
+
+h1 {
+ font: 1.6em "Fira Sans",
+ sans-serif; margin-bottom: 1rem;
+}
+</pre>
+</div>
+
+<pre class="brush: js">const channel = new BroadcastChannel('example-channel');
+channel.addEventListener('message', (event) =&gt; {
+ received.textContent = event.data;
+});</pre>
+
+<h4 id="Receiver_2" name="Receiver_2">Receiver 2</h4>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Receiver 2&lt;/h1&gt;
+&lt;div id="received"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">body {
+ border: 1px solid black;
+ padding: .5rem;
+ height: 100px;
+ font-family: "Fira Sans", sans-serif;
+}
+
+h1 {
+ font: 1.6em "Fira Sans", sans-serif;
+ margin-bottom: 1rem;
+}
+</pre>
+</div>
+
+<pre class="brush: js">const channel = new BroadcastChannel('example-channel');
+channel.addEventListener('message', (event) =&gt; {
+ received.textContent = event.data;
+});</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Sender', '100%', '170px','' ,'' , 'dummy') }}</p>
+
+<p>{{ EmbedLiveSample('Receiver_1', '100%', '150px','' ,'' , 'dummy') }}</p>
+
+<p>{{ EmbedLiveSample('Receiver_2', '100%', '150px','' ,'' , 'dummy') }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">仕様</th>
+ <th scope="col">状態</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.message_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: {{domxref("BroadcastChannel.messageerror_event","messageerror")}}。</li>
+</ul>
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
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>messageerror</code> イベントは、逆シリアル化できないメッセージがチャネルに到着したときに {{domxref('BroadcastChannel')}} オブジェクトに対して発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">バブリング</th>
+ <td>なし</td>
+ </tr>
+ <tr>
+ <th scope="row">キャンセル</th>
+ <td>不可</td>
+ </tr>
+ <tr>
+ <th scope="row">インターフェイス</th>
+ <td>{{domxref("MessageEvent")}}</td>
+ </tr>
+ <tr>
+ <th scope="row">イベントハンドラプロパティ</th>
+ <td>{{domxref("BroadcastChannel.onmessageerror","onmessageerror")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードは <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> を使用してメッセージとエラーをリッスンします。</p>
+
+<pre class="brush: js">const channel = new BroadcastChannel('example-channel');
+
+channel.addEventListener('message', (event) =&gt; {
+ received.textContent = event.data;
+});
+
+channel.addEventListener('messageerror', (event) =&gt; {
+ console.error(event);
+});</pre>
+
+<p>上と同じですが、{{domxref("BroadcastChannel.onmessage","onmessage")}} と {{domxref("BroadcastChannel.onmessageerror","onmessageerror")}} のイベントハンドラプロパティを使用します。</p>
+
+<pre class="brush: js">const channel = new BroadcastChannel('example-channel');
+
+channel.onmessage = (event) =&gt; {
+ received.textContent = event.data;
+};
+
+channel.onmessageerror = (event) =&gt; {
+ console.log(event);
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">仕様</th>
+ <th scope="col">状態</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.messageerror_event")}}</p>
+
+<h2 id='See_also""' name='See_also""'>関連情報</h2>
+
+<ul>
+ <li>関連イベント: {{domxref("BroadcastChannel.message_event","message")}}。</li>
+</ul>
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
+---
+<p>{{APIRef("BroadCastChannel API")}}</p>
+
+<p><span class="seoSummary">読み取り専用の <strong><code>BroadcastChannel.name</code></strong> プロパティは、指定されたチャンネルをその名前で一意に識別する {{domxref("DOMString")}} を返します。</span> この名前は作成時に {{domxref("BroadcastChannel.BroadCastChannel", "BroadcastChannel()")}} コンストラクタに渡されるため、読み取り専用です。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>channe<code>l</code></em><code>.name;</code>
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">// チャンネルに接続
+var bc = new BroadcastChannel('test_channel');
+
+// その他の操作(postMessage など)
+
+// チャンネル名をコンソールに記録します
+console.log(bc.name); // "test_channel"
+
+// 終了したら、チャンネルから切断します
+bc.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('HTML WHATWG', "comms.html#dom-broadcastchannel-name", "BroadcastChannel.name")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.name")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("BroadcastChannel")}}: これが属するインターフェース。</li>
+</ul>
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
+---
+<p>{{APIRef("BroadCastChannel API")}}</p>
+
+<p><span class="seoSummary"><strong><code>BroadcastChannel.onmessage</code></strong> イベントハンドラは、{{domxref("MessageEvent")}} 型の {{event("message")}} イベントがこの {{domxref("BroadcastChannel")}} によって受信されたときに実行する関数を指定するプロパティです。</span> このようなイベントは、チャネルに放送されるメッセージとともにブラウザーによって送信されます。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>channel</em>.onmessage = <em>function</em>;
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<ul>
+ <li><code>function</code> は、接尾辞 <code>()</code> もパラメーターも含まないユーザー定義関数の名前や、 <code>function(event) {...}</code> などの無名関数宣言です。 イベントハンドラには、イベントを含む単一のパラメータが常に1つあります。 ここでは {{domxref("MessageEvent")}} 型です。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">bc.onmessage = function(ev) { console.log('message event received!'); };
+</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('HTML WHATWG', "comms.html#handler-broadcastchannel-onmessage", "BroadcastChannel.onmessage")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.onmessage")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>ブラウザコンテキスト間でやり取りするもう1つの、よりヘビー級の方法: {{domxref("ServiceWorker")}}</li>
+</ul>
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
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("BroadcastChannel")}} インタフェース の <strong><code>onmessageerror</code></strong> イベントハンドラは {{domxref("EventListener")}} であり、<code>messageerror</code> 型の {{domxref("MessageEvent")}} が <code>BroadcastChannel</code> インスタンスで発生するたびに、つまり{{glossary("Deserialization", "逆シリアル化")}}できないメッセージを受信すると呼び出されます。</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">bc.onmessageerror = function() { ... };</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('HTML WHATWG', '#handler-broadcastchannel-onmessageerror', 'onmessageerror')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.BroadcastChannel.onmessageerror")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Channel Messaging の使用</a></li>
+</ul>
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
+---
+<p>{{APIRef("BroadCastChannel API")}}</p>
+
+<p><strong><code>BroadcastChannel.postMessage()</code></strong> は、任意の種類の {{jsxref("Object")}} のメッセージを、同じ{{glossary("origin","オリジン")}}を持つ任意の{{glossary("browsing context","閲覧コンテキスト")}}内の各リスナーに送信します。 メッセージは、チャネルに結び付けられた各 <code>BroadcastChannel</code> を対象とした {{event("message")}} イベントとして送信します。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>channe<code>l</code></em><code>.postMessage(<em>object</em>);</code>
+</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('HTML WHATWG', "comms.html#dom-broadcastchannel-postmessage", "BroadcastChannel.postmessage()")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.postMessage")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("BroadcastChannel")}}: これが属するインターフェース。</li>
+</ul>