HTML - Web Messaging

こんにちは、未来のウェブ開発者たち！今日は、ウェブアプリケーションの異なる部分を互いに話し合わせる方法について楽しく学びましょう。まるでウェブページに会話を教えるようなものです！一緒にWeb Messagingの世界を探求してみましょう。

Web Messagingの紹介

コードに飛び込む前に、まずWeb Messagingとは何かを理解しましょう。ブラウザの別のタブに開かれた2つのウェブページを思い浮かべてください。通常、これらのページはお互いに直接通信できません。でも、情報を共有したい場合はどうでしょうか？それがWeb Messagingの登場です！

Web Messagingは、ウェブアプリケーションの異なる部分が互いにメッセージを送信できるようにし、異なるオリジン（異なるドメインなど）からでも可能です。まるでウェブページに特別な電話線を与えて、チャットをさせるようなものです！

メッセージイベント

Web Messagingの中心にはmessageイベントがあります。このイベントはメッセージを受け取ったときにトリガーされます。ステップバイステップに分解してみましょう。

基本構造

メッセージを受信するためのシンプルな例を以下に示します：

<script>
window.addEventListener("message", function(event) {
console.log("メッセージを受け取りました: " + event.origin);
console.log("メッセージの内容: " + event.data);
});
</script>

以下のように解釈します：

window.addEventListenerを使用して「message」イベントをリスeningします。
メッセージが到着すると、関数が呼び出されます。
関数はメッセージに関する情報を含むeventオブジェクトを受け取ります。
メッセージのオリジンと内容をログします。

メッセージの送信

メッセージを送信する方法を見てみましょう：

<script>
// iframeのidが'myFrame'であると仮定します
var iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage("親ページからこんにちは！", "*");
</script>

この例では：

ページ上のiframeを参照します。
postMessageを使用してiframeにメッセージを送信します。
第一引数はメッセージの内容です。
第二引数"*"は、メッセージを任意のオリジンに送信許可する意味です。実際のアプリケーションでは、セキュリティ上 exactなオリジンを指定するべきです。

セキュリティ考慮

常に受信したメッセージのオリジンを確認することを忘れないでください！以下はより安全なメッセージリスナーの例です：

<script>
window.addEventListener("message", function(event) {
// 信頼できるソースからのメッセージか確認
if (event.origin !== "https://trusted-site.com") return;

console.log("信頼できるメッセージを受け取りました: " + event.data);
});
</script>

この追加確認により、信頼できるソースからのメッセージのみを処理するようにします。

実用的な例

実際のシナリオでWeb Messagingがどのように光を放つか見てみましょう！

例1: ページとiframe間の通信

メインページがiframeにゲームをロードし、ボタンをクリックしたときにゲームを開始させたいとします。

メインページ（parent.html）:

<!DOCTYPE html>
<html>
<body>
<button onclick="startGame()">ゲームを開始</button>
<iframe id="gameFrame" src="game.html"></iframe>

<script>
function startGame() {
var gameFrame = document.getElementById('gameFrame');
gameFrame.contentWindow.postMessage("start", "*");
}

window.addEventListener("message", function(event) {
if (event.data === "gameOver") {
alert("ゲームオーバー！あなたのスコアが記録されました。");
}
});
</script>
</body>
</html>

ゲームページ（game.html）:

<!DOCTYPE html>
<html>
<body>
<h1>素晴らしいゲーム</h1>
<div id="gameArea">ゲームがすぐに始まります...</div>

<script>
window.addEventListener("message", function(event) {
if (event.data === "start") {
document.getElementById('gameArea').innerHTML = "ゲームが実行中！";
// 5秒後にゲームオーバーをシミュレート
setTimeout(function() {
window.parent.postMessage("gameOver", "*");
}, 5000);
}
});
</script>
</body>
</html>

この例では：

メインページにはゲームを開始するボタンがあります。
クリックすると、iframeに「start」メッセージを送信します。
ゲームページはこのメッセージをリスeningし、ゲームを開始します。
ゲームが終了すると、「gameOver」メッセージを親ページに送信します。
親ページは「gameOver」メッセージを受け取るとアラートを表示します。

例2: ウィンドウ間の通信

ショッピングカートが1つのページにあり、製品詳細が別のページにあるとします。製品ページからカートにアイテムを追加したいとします。

製品ページ（product.html）:

<!DOCTYPE html>
<html>
<body>
<h1>素晴らしい製品</h1>
<button onclick="addToCart()">カートに追加</button>

<script>
function addToCart() {
window.opener.postMessage({
action: "addToCart",
product: "素晴らしい製品",
price: 19.99
}, "https://shop.example.com");
}
</script>
</body>
</html>

ショッピングカートページ（cart.html）:

<!DOCTYPE html>
<html>
<body>
<h1>あなたのショッピングカート</h1>
<ul id="cartItems"></ul>

<script>
window.addEventListener("message", function(event) {
if (event.origin !== "https://shop.example.com") return;

if (event.data.action === "addToCart") {
var cartList = document.getElementById('cartItems');
var newItem = document.createElement('li');
newItem.textContent = event.data.product + " - $" + event.data.price;
cartList.appendChild(newItem);
}
});
</script>
</body>
</html>

このシナリオでは：

製品ページには「カートに追加」ボタンがあります。
クリックすると、カートページ（開いたウィンドウ）にメッセージを送信します。
カートページはメッセージをリスeningし、受信した製品をリストに追加します。

結論

Web Messagingは、インタラクティブで動的なウェブアプリケーションを創作するための多くの可能性を開きます。ウェブエコシステムの異なる部分がスムーズに通信することを可能にし、ユーザーエクスペリエンスと機能性を向上させます。

力が強大なため、責任も重大です！メッセージのオリジンを検証し、信頼できるソースからのものだけを受け入れるようにしてください。ハッピーコーディングを、そしてあなたのウェブページが常に魅力的な会話を続けますように！

メソッド	説明
`window.postMessage(message, targetOrigin)`	他のウィンドウにメッセージを送信
`window.addEventListener("message", function(event) { ... })`	渡ってくるメッセージをリスening
`event.data`	メッセージに含まれるデータ
`event.origin`	送信者のオリジンを示す
`event.source`	送信者のウィンドウへの参照を提供

この表は、私たちがWeb Messagingの旅で学んだ主要なメソッドとプロパティをまとめたものです。自分のメッセージング実装を試す際に、これを手元に置いておくと役立ちます！

Credits: Image by storyset