From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/channel_messaging_api/index.html | 91 ++++++++++ .../using_channel_messaging/index.html | 189 +++++++++++++++++++++ 2 files changed, 280 insertions(+) create mode 100644 files/ja/web/api/channel_messaging_api/index.html create mode 100644 files/ja/web/api/channel_messaging_api/using_channel_messaging/index.html (limited to 'files/ja/web/api/channel_messaging_api') diff --git a/files/ja/web/api/channel_messaging_api/index.html b/files/ja/web/api/channel_messaging_api/index.html new file mode 100644 index 0000000000..e667a7954d --- /dev/null +++ b/files/ja/web/api/channel_messaging_api/index.html @@ -0,0 +1,91 @@ +--- +title: Channel Messaging API +slug: Web/API/Channel_Messaging_API +tags: + - API + - Channel messaging + - HTML API + - Overview + - Reference +translation_of: Web/API/Channel_Messaging_API +--- +

{{DefaultAPISidebar("Channel Messaging API")}}

+ +

Channel Messaging API（チャンネルメッセージング API）を使用すると、同じドキュメントに添付された異なる閲覧コンテキストで実行される2つの別々のスクリプト（2つの IFrame、メインドキュメントと IFrame、{{domxref("SharedWorker")}} を介した2つのドキュメント、2つのワーカーなど）で直接通信し、両端にポートを持つ双方向チャンネル（またはパイプ）を介して相互にメッセージをやり取りできます。

+ +

{{AvailableInWorkers}}

+ +

Channel Messaging の概念と使用方法

+ +

メッセージチャンネルは {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} コンストラクタを使用して作成します。 作成すると、チャンネルの2つのポートは {{domxref("MessageChannel.port1")}} プロパティおよび {{domxref("MessageChannel.port2")}} プロパティを介してアクセスできます（どちらのプロパティも {{domxref("MessagePort")}} オブジェクトを返します）。 チャンネルを作成したアプリは port1 を使用し、ポートの反対側のアプリは port2 を使用します — port2 にメッセージを送信し、{{domxref("window.postMessage")}} を使用して2つの引数（送信するメッセージと所有権を移管するオブジェクト、この場合はポート自体）でポートを他の閲覧コンテキストに移管します。

+ +

これらの移管可能なオブジェクトを移管すると、それらは以前のコンテキスト — 以前にそれらが属していたもの — では「撤回され（neutered）」ます。 例えば、ポートを送信すると、元のコンテキストでは使用できなくなります。

+ +

もう一方の閲覧コンテキストは、{{domxref("MessagePort.onmessage")}} を使用してメッセージをリッスンし、イベントの data 属性を使用してメッセージの内容を取得できます。 {{domxref("MessagePort.postMessage")}} を使用して元のドキュメントにメッセージを送り返すことで応答できます。

+ +

チャンネルへのメッセージ送信を停止したい場合は、{{domxref("MessagePort.close")}} を呼び出してポートを閉じることができます。

+ +

この API の使用方法の詳細については、Channel Messaging の使用を参照してください。

+ +

Channel Messaging のインターフェイス

+ +
+
{{domxref("MessageChannel")}}
+
メッセージを送信するための新しいメッセージチャンネルを作成します。
+
{{domxref("MessagePort")}}
+
メッセージチャンネルのポートを制御して、一方のポートからメッセージを送信し、もう一方のポートで到着するのをリッスンします。
+
{{domxref("PortCollection")}}
+
MessagePort の配列。 同時に複数のポートにメッセージをブロードキャストできるようにするための実験的な解決策。
+
+ +

例

+ + + +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', 'web-messaging.html#channel-messaging', 'Channel messaging')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ +
+

MessageChannel

+ +
+ + +

{{Compat("api.MessageChannel", 0)}}

+ +

MessagePort

+ +
+ + +

{{Compat("api.MessagePort", 0)}}

+
+
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/channel_messaging_api/using_channel_messaging/index.html b/files/ja/web/api/channel_messaging_api/using_channel_messaging/index.html new file mode 100644 index 0000000000..aa0d4bf75f --- /dev/null +++ b/files/ja/web/api/channel_messaging_api/using_channel_messaging/index.html @@ -0,0 +1,189 @@ +--- +title: Channel Messaging の使用 +slug: Web/API/Channel_Messaging_API/Using_channel_messaging +tags: + - API + - Channel messaging + - HTML5 + - MessageChannel + - MessagePort + - Tutorial +translation_of: Web/API/Channel_Messaging_API/Using_channel_messaging +--- +

{{DefaultAPISidebar("Channel Messaging API")}}

+ +

Channel Messaging API（チャンネルメッセージング API）を使用すると、同じドキュメントに添付された異なる閲覧コンテキストで実行される2つの別々のスクリプト（2つの IFrame、メインドキュメントと IFrame、{{domxref("SharedWorker")}} を介した2つのドキュメントなど）で直接通信し、両端にポートを持つ双方向チャンネル（またはパイプ）を介して相互にメッセージをやり取りできます。

+ +

この記事では、このテクノロジーを使用するための基本を探ります。

+ +

{{AvailableInWorkers}}

+ +

ユースケース

+ +

チャンネルメッセージングは​​、ゲーム、アドレス帳、または音楽を個人用に選択したオーディオプレーヤーなど、IFrame を介して他のサイトの機能をメインインターフェイスに埋め込むソーシャルサイトがある場合に主に役立ちます。 これらが独立したユニットとして機能する場合は問題ありませんが、メインサイトと IFrame、または異なる IFrame との間のやり取りが必要な場合は困難になります。 例えば、メインサイトからアドレス帳に連絡先を追加したり、メインプロファイルにゲームのハイスコアを追加したり、オーディオプレーヤーからゲームに新しい BGM の選択肢を追加したりする場合はどうすればよいのでしょうか。 ウェブが使用するセキュリティモデルのため、このようなことは従来のウェブテクノロジーを使用したのでは、それほど簡単ではありません。 オリジンがお互いを信頼しているかどうか、そしてメッセージをどのように渡すのかについて考えなければなりません。

+ +

一方、メッセージチャンネルは、異なる閲覧コンテキスト間でデータを受け渡すことを可能にする安全なチャンネルを提供することができます。

+ +
+

注: 詳細情報とアイデアについては、仕様のウェブ上のオブジェクト機能モデルの基礎としてのポート（英語）のセクションが役に立つでしょう。

+
+ +

簡単な例

+ +

はじめに、Github でいくつかのデモを公開しました。 最初に、ページと埋め込まれた {{htmlelement("iframe")}} の間の非常に単純な単一メッセージ転送を示す、チャンネルメッセージングの基本的なデモをチェックしてください（それをライブでも実行してください）。

+ +

次に、メインページと IFrame の間で複数のメッセージを送信できる、もう少し複雑な設定を示す、マルチメッセージデモを見てください（これをライブで実行）。

+ +

ここでは、マルチメッセージデモに焦点を当てます。 それは次のような感じです。

+ +

+ +

チャンネルを作成する

+ +

デモのメインページには、{{htmlelement("iframe")}} に送信するメッセージを入力するためのテキスト入力を含む単純なフォームがあります。 また、{{htmlelement("iframe")}} から返される確認メッセージを表示するために後で使用する段落もあります。

+ +
var input = document.getElementById('message-input');
+var output = document.getElementById('message-output');
+var button = document.querySelector('button');
+var iframe = document.querySelector('iframe');
+
+var channel = new MessageChannel();
+var port1 = channel.port1;
+
+// Wait for the iframe to load
+// iframe が読み込まれるのを待ちます
+iframe.addEventListener("load", onLoad);
+
+function onLoad() {
+  // Listen for button clicks
+  // ボタンのクリックをリッスンする
+  button.addEventListener('click', onClick);
+
+  // Listen for messages on port1
+  // port1 でメッセージをリッスンする
+  port1.onmessage = onMessage;
+
+  // Transfer port2 to the iframe
+  // port2 を iframe に移管する
+  iframe.contentWindow.postMessage('init', '*', [channel.port2]);
+}
+
+// Post a message on port1 when the button is clicked
+// ボタンがクリックされたときに port1 にメッセージを投稿する
+function onClick(e) {
+  e.preventDefault();
+  port1.postMessage(input.value);
+}
+
+// Handle messages received on port1
+// port1 で受信したメッセージを処理する
+function onMessage(e) {
+  output.innerHTML = e.data;
+  input.value = '';
+}
+ +

まず {{domxref( "MessageChannel.MessageChannel","MessageChannel()")}} コンストラクタを使用して新しいメッセージチャンネルを作成します。

+ +

IFrame が読み込まれたら、ボタン用の onclick ハンドラと {{domxref("MessageChannel.port1")}} 用の onmessage ハンドラを登録します。 最後に、{{domxref("window.postMessage")}} メソッドを使って {{domxref("MessageChannel.port2")}} を IFrame に移管します。

+ +

iframe.contentWindow.postMessage 行の機能をもう少し詳しく調べてみましょう。 これは次の3つの引数を取ります。

+ +
    +
  1. 送信するメッセージ。 この初期ポート移管では、このメッセージは空の文字列になる可能性がありますが、この例では 'init' に設定しています。
    2. +
  2. メッセージの送信先のオリジン。 * は「任意のオリジン」を意味します。
    3. +
  3. 所有権を受信側の閲覧コンテキストに移管するオブジェクト。 この場合、{{domxref("MessageChannel.port2")}} を IFrame に移管しているので、メインページとの通信に使用できます。
    4. +
+ +

ボタンをクリックすると、フォームを通常のように送信せず、テキスト入力に入力された値は {{domxref("MessageChannel")}} を介して IFrame に送信します。

+ +

IFrame でポートとメッセージを受信する

+ +

IFrame では、次の JavaScript があります。

+ +
var list = document.querySelector('ul');
+var port2;
+
+// Listen for the intial port transfer message
+// 初期ポート移管メッセージをリッスンする
+window.addEventListener('message', initPort);
+
+// Setup the transfered port
+// 移管されたポートを設定する
+function initPort(e) {
+  port2 = e.ports[0];
+  port2.onmessage = onMessage;
+}
+
+// Handle messages received on port2
+// port2 で受信したメッセージを処理する
+function onMessage(e) {
+  var listItem = document.createElement('li');
+  listItem.textContent = e.data;
+  list.appendChild(listItem);
+  port2.postMessage('Message received by IFrame: "' + e.data + '"');
+}
+
+ +

初期メッセージを {{domxref("window.postMessage")}} メソッドを介してメインページから受信すると、initPort 関数が実行されます。 これは移管されたポートを保存し、メッセージが {{domxref("MessageChannel")}} を通過するたびに呼び出される onmessage ハンドラを登録します。

+ +

メインページからメッセージを受信したら、リスト項目を作成し、それを順序なしリストに挿入し、リスト項目の {{domxref("Node.textContent","textContent")}} をイベントの data 属性と同じ値に設定します（これは実際のメッセージを含みます）。

+ +

次に、最初に IFrame に移管された {{domxref("MessageChannel.port2")}} で {{domxref("MessagePort.postMessage")}} を呼び出して、確認メッセージをメッセージチャンネル経由でメインページに投稿します。

+ +

メインページで確認を受信する

+ +

メインページに戻って、onmessage ハンドラ関数を見ましょう。

+ +
// Handle messages received on port1
+// port1 で受信したメッセージを処理する
+function onMessage(e) {
+  output.innerHTML = e.data;
+  input.value = '';
+}
+ +

元のメッセージが正常に受信されたことを確認するメッセージが IFrame から返されると、これは単に確認を段落に出力し、テキスト入力を空にして次のメッセージの送信の準備をします。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', 'web-messaging.html#channel-messaging', 'Channel messaging')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ +
+

MessageChannel

+ +
+ + +

{{Compat("api.MessageChannel", 0)}}

+ +

MessagePort

+ +
+ + +

{{Compat("api.MessagePort", 0)}}

+
+
+
+ +

関連情報

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