initial commit

4 files changed, 532 insertions, 0 deletions

diff --git a/files/ja/web/api/messagechannel/index.html b/files/ja/web/api/messagechannel/index.html
new file mode 100644
index 0000000000..e1528f63d1
--- /dev/null
+++ b/files/ja/web/api/messagechannel/index.html
@@ -0,0 +1,154 @@
+---
+title: MessageChannel
+slug: Web/API/MessageChannel
+tags:
+  - API
+  - Channel Messaging API
+  - Interface
+  - MessageChannel
+  - Reference
+  - web messaging
+translation_of: Web/API/MessageChannel
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><a href="/ja/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> の <strong><code>MessageChannel</code></strong> インターフェースは、新しいメッセージチャンネルを作成し、2 つの {{domxref("MessagePort")}} プロパティを通して、その間でデータを送信できます。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<dl>
+ <dt>{{domxref("MessageChannel.port1")}} {{readonlyInline}}</dt>
+ <dd>チャンネルの port1 を返します。</dd>
+ <dt>{{domxref("MessageChannel.port2")}} {{readonlyInline}}</dt>
+ <dd>チャンネルの port2 を返します。</dd>
+</dl>
+
+<h2 id="Constructor" name="Constructor">コンストラクタ</h2>
+
+<dl>
+ <dt>{{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}</dt>
+ <dd>
+ <p>2 つの新しい {{domxref("MessagePort")}} オブジェクトを持つ 新しい <code>MessageChannel</code> オブジェクトを返します。</p>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次のコードブロックでは、{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} コンストラクタを使用して作成された新しいチャンネルを知ることができます。{{HTMLElement("iframe")}} が読み込まれると、{{domxref("MessagePort.postMessage")}} にメッセージを添えて {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ渡します。すると、<code>handleMessage</code> ハンドラが {{HTMLElement("iframe")}} から返送されたメッセージに ({{domxref("MessagePort.onmessage")}} を使用して) 返答し、これを段落に挿入します。</p>
+
+<pre class="brush: js">var channel = new MessageChannel();
+var para = document.querySelector('p');
+
+var ifr = document.querySelector('iframe');
+var otherWindow = ifr.contentWindow;
+
+ifr.addEventListener("load", iframeLoaded, false);
+
+function iframeLoaded() {
+  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+}
+
+channel.port1.onmessage = handleMessage;
+function handleMessage(e) {
+  para.innerHTML = e.data;
+}
+</pre>
+
+<p>完全に動作する例は、Github 上の <a class="external external-icon" href="https://github.com/mdn/channel-messaging-basic-demo">channel messaging basic demo</a> を参照してください (<a class="external external-icon" href="http://mdn.github.io/channel-messaging-basic-demo/">実際のデモも実行できます</a>)。</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('HTML WHATWG', '#message-channels','MessageChannel')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName("HTML5 Web Messaging")}} との差異なし。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>worker 内の利用</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>worker 内の利用</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+</ul>
diff --git a/files/ja/web/api/messagechannel/messagechannel/index.html b/files/ja/web/api/messagechannel/messagechannel/index.html
new file mode 100644
index 0000000000..2d011129dc
--- /dev/null
+++ b/files/ja/web/api/messagechannel/messagechannel/index.html
@@ -0,0 +1,148 @@
+---
+title: MessageChannel()
+slug: Web/API/MessageChannel/MessageChannel
+tags:
+  - API
+  - Channel messaging
+  - Constructor
+  - MessageChannel
+  - Reference
+translation_of: Web/API/MessageChannel/MessageChannel
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>{{domxref("MessageChannel")}} インターフェースの <code>MessageChannel()</code> コンストラクタは、2 つの新しい {{domxref("MessagePort")}} オブジェクトを持つ新しい {{domxref("MessageChannel")}} オブジェクトを返します。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var channel = new MessageChannel();</pre>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>新たに作成された {{domxref("MessageChannel")}} オブジェクト。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次のコードブロックでは、{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} コンストラクタを使用して作成された新しいチャンネルを知ることができます。{{HTMLElement("iframe")}} が読み込まれると、{{domxref("MessagePort.postMessage")}} にメッセージを添えて {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ渡します。すると、<code>handleMessage</code> ハンドラが {{HTMLElement("iframe")}} から返送されたメッセージに ({{domxref("MessagePort.onmessage")}} を使用して) 返答し、これを段落に挿入します。</p>
+
+<pre class="brush: js">var channel = new MessageChannel();
+var para = document.querySelector('p');
+
+var ifr = document.querySelector('iframe');
+var otherWindow = ifr.contentWindow;
+
+ifr.addEventListener("load", iframeLoaded, false);
+
+function iframeLoaded() {
+  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+}
+
+channel.port1.onmessage = handleMessage;
+function handleMessage(e) {
+  para.innerHTML = e.data;
+}
+</pre>
+
+<p>完全に動作する例は、Github 上の <a class="external external-icon" href="https://github.com/mdn/channel-messaging-basic-demo">channel messaging basic demo</a> を参照してください (<a class="external external-icon" href="http://mdn.github.io/channel-messaging-basic-demo/">実際のデモも実行できます</a>)。</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('HTML WHATWG', '#dom-messagechannel','MessageChannel()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName("HTML5 Web Messaging")}} との差異なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web Messaging', '#dom-messagechannel','MessageChannel()')}}</td>
+   <td>{{Spec2('HTML5 Web Messaging')}}</td>
+   <td>仕様の W3C バージョン。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>worker 内の利用</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>worker 内の利用</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+</ul>
diff --git a/files/ja/web/api/messagechannel/port1/index.html b/files/ja/web/api/messagechannel/port1/index.html
new file mode 100644
index 0000000000..68d16ff7cd
--- /dev/null
+++ b/files/ja/web/api/messagechannel/port1/index.html
@@ -0,0 +1,81 @@
+---
+title: MessageChannel.port1
+slug: Web/API/MessageChannel/port1
+tags:
+  - API
+  - Channel messaging
+  - HTML5
+  - Message Channel API
+  - MessageChannel
+  - Property
+  - Reference
+translation_of: Web/API/MessageChannel/port1
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>port1</strong></code> は {{domxref("MessageChannel")}} インターフェースの読み取り専用プロパティで、メッセージチャンネルの最初のポートを返します。このポートは、チャンネルの元となるコンテキストに付属します。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">channel.port1;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>チャンネルの最初のポートを表す {{domxref("MessagePort")}} オブジェクト。これはチャンネルの元となるコンテキストに付属するポートです。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次のコードブロックでは、 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} コンストラクターを使用して作成された新しいチャンネルが見られます。 {{HTMLElement("iframe")}} が読み込まれると、 {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ、メッセージを通して {{domxref("MessagePort.postMessage")}} を使用して渡します。すると、 <code>handleMessage</code> ハンドラーが <code>&lt;iframe&gt;</code> から返送されたメッセージに ({{domxref("MessagePort.onmessage")}} を使用して) 返答し、これを段落に挿入します。メッセージが到着したとき、 <code>handleMessage</code> メソッドが <code>port1</code> に関連付けられて待ち受けします。</p>
+
+<pre class="brush: js highlight[13]">var channel = new MessageChannel();
+var para = document.querySelector('p');
+
+var ifr = document.querySelector('iframe');
+var otherWindow = ifr.contentWindow;
+
+ifr.addEventListener("load", iframeLoaded, false);
+
+function iframeLoaded() {
+  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+}
+
+channel.port1.onmessage = handleMessage;
+function handleMessage(e) {
+  para.innerHTML = e.data;
+}
+</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('HTML WHATWG', 'web-messaging.html#dom-messagechannel-port1', 'port1')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<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.MessageChannel.port1")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+</ul>
diff --git a/files/ja/web/api/messagechannel/port2/index.html b/files/ja/web/api/messagechannel/port2/index.html
new file mode 100644
index 0000000000..02d5bf23d1
--- /dev/null
+++ b/files/ja/web/api/messagechannel/port2/index.html
@@ -0,0 +1,149 @@
+---
+title: MessageChannel.port2
+slug: Web/API/MessageChannel/port2
+tags:
+  - API
+  - Channel messaging
+  - HTML5
+  - MessageChannel
+  - Property
+  - Reference
+translation_of: Web/API/MessageChannel/port2
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>{{domxref("MessageChannel")}} インターフェースの <code><strong>port2</strong></code> 読み取り専用プロパティは、メッセージチャンネルの第 2 ポートを返します。このポートは、チャンネルの元となるコンテキストに付属します。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">channel.port2;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>チャンネルの第 2 ポートを表す {{domxref("MessagePort")}} オブジェクト。これはチャンネルの元となるコンテキストに付属するポートです。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次のコードブロックでは、{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} コンストラクタを使用して作成された新しいチャンネルを知ることができます。{{HTMLElement("iframe")}} が読み込まれると、{{domxref("MessagePort.postMessage")}} にメッセージを添えて {{domxref("MessageChannel.port2")}} を {{HTMLElement("iframe")}} へ渡します。すると、<code>handleMessage</code> ハンドラが {{HTMLElement("iframe")}} から返送されたメッセージに ({{domxref("MessagePort.onmessage")}} を使用して) 返答し、これを段落に挿入します。</p>
+
+<pre class="brush: js">var channel = new MessageChannel();
+var para = document.querySelector('p');
+
+var ifr = document.querySelector('iframe');
+var otherWindow = ifr.contentWindow;
+
+ifr.addEventListener("load", iframeLoaded, false);
+
+function iframeLoaded() {
+  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+}
+
+channel.port1.onmessage = handleMessage;
+function handleMessage(e) {
+  para.innerHTML = e.data;
+}
+</pre>
+
+<p>完全に動作する例は、Github 上の <a class="external external-icon" href="https://github.com/mdn/channel-messaging-basic-demo">channel messaging basic demo</a> を参照してください (<a class="external external-icon" href="http://mdn.github.io/channel-messaging-basic-demo/">実際のデモも実行できます</a>)。</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('HTML WHATWG', '#dom-messagechannel-port2','port2')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName("HTML5 Web Messaging")}} との差異なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web Messaging', '#dom-messagechannel-port2','port2')}}</td>
+   <td>{{Spec2('HTML5 Web Messaging')}}</td>
+   <td>仕様の W3C バージョン。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>worker 内の利用</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>worker 内の利用</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+</ul>