libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

Web Messagingによるメッセージ通信 (1/4)

作成:2012-04-30 10:57
更新:2012-04-30 10:57

■メッセージ送信の基本を理解する

Webのページは、１つのHTMLだけで完結しているわけではありません。フレームを使って複数のページを組み合わせることもあります。最近、非常に増えているのが、インラインフレームを使って別のページを組み込む手法です。こうしたものを利用することで、Webを複数の細かな部品に分解し、１つのページとして組み上げることができるようになります。

が、このように複数のページを組み合わせて１つのページを構築する場合、それらを含めて統合的に処理を行うのがかなり面倒くさくなります。そこで用意されることになったのが「Web Messaging」という仕組みです。

これは、一言でいえば「Webで、外部から送られてきたメッセージを受取る仕組み」です。メッセージを受け取るためのイベントをウインドウに用意し、それを利用することでウインドウ外からのさまざまなメッセージを受け取り処理できるようにするものなのです。

では、実際にどのようにしてウインドウ間のメッセージ送受を行うのか、基本的な流れを整理しましょう。

1. メッセージを送信する
《Window》.postMessage( 値 , オリジン );
メッセージの送信は、メッセージを送るwindowオブジェクトに用意されている「postMessage」というメソッドで行います。第１引数には送信する値、第２引数には送信先のオリジン（これは、要するにドメインのことと考えていいでしょう）を指定します。

2. 送られたメッセージを受信する
《Window》.onmessage = 関数;
《Window》.addEventListener('message', 関数 );
メッセージがそのウインドウに送られてくるとwindowオブジェクトの「onmessage」イベントが発生します。このイベントのための関数を設定しておくことで、受信したデータを取り出し処理できます。

このonmessageイベントで呼び出される関数では、「MessageEvent」というオブジェクトが引数として渡されます。このオブジェクトの「data」プロパティに、送られてきた値が保管されています。

では、簡単なサンプルをあげておきましょう。ここではベースとなるWebページに、別のWebページをインラインフレームで埋め込み、外側のウインドウから内側のウインドウへとメッセージを送ってみます。

下のリスト欄に、２つのHTMLファイルのソースコードを挙げておきました。index.htmlにアクセスし、ボタンを押してメッセージが送られるのと確認してください。（なお、これはlocalhostで動かす前提でコードを書いてあります。自分のWebサイトで動かす場合は、postMessageのオリジンを偏向してください）

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※inline.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>インライン表示</title>
	<style>
	h1 { font-size: 14pt;  padding: 1px 10px;
		border-style: solid; border-width: 0px 0px 2px 7px; border-color:blue; }
	body { background: #DDEEFF; }
	article { background: white; margin: 10px; padding: 10px; }
	</style>
	<script type="text/javascript">
	window.addEventListener('message', function(event){
		var msg = '受信メッセージ: <br>' + event.data;
		document.querySelector('#msg').innerHTML = msg;
	});
	</script>
 </head>
 <body>
	<header>
		<h1>Inline page</h1>
	</header>
	<article>
		<p id="msg">web messaging</p>
	</article>
</body>
</html>



※index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>タイトル</title>
	<style>
	h1 { font-size: 14pt; padding: 1px 10px;
		border-style: solid; border-width: 0px 0px 2px 7px; border-color:red; }
	body { background: #FFEECC; }
	article { background: white; margin: 10px;  padding: 10px;}
	</style>
	<script type="text/javascript">
	function doAction(){
		var val = new Date();
		var iframe = document.querySelector('#inframe');
		iframe.contentWindow.postMessage(val,'http://localhost/');
	}
	</script>
 </head>
 <body>
	<header>
		<h1>WebMessaging Sample</h1>
	</header>
	<article>
		<p id="msg">Web Messaging</p>
		<button onclick="doAction();">click</button>
		<hr>
		<iframe src="inline.html" id="inframe" frameborder="1px" 
			width="300px" height="200px"></iframe>
	</article>
</body>
</html>
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る