今回は、クロスドキュメントメッセージングやWebSocketなど、HTML5のコミュニケーション系の機能について解説していきます。以下の表をご覧ください。JavaScriptによる重い処理を、ブラウザの処理とは別にバックグラウンドで実行する仕組み。サーバーとブラウザが双方向通信をするための規格。コネクションの確立にのみHTTPを使用して、それ以降の通信は独自のプロトコルを用いる*)オリジンとは、プロトコル、ドメイン、ポート番号の組み合わせの事です。サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。従来のHTTPによる通信では以下のような問題や制約があります。メッセージの送信時に毎回接続を確立して送信後に切断する必要があり、オーバーヘッドが大きい。接続を開始する権利はクライアント側にしかなく、サーバー側は要求に対する応答の形のみでしかデータ送信出来ない。各メッセージ送信において状態を維持する事ができない。クロスドメイン(クロスオリジン)での通信はできないこれらの制限が、効率的なリアルタイム性のあるリモートアプリケーションの作成や、他サイトの提供するサービスの組み合わせでWebサイトを構築する場合に、他の技術も使用しなければならず、実装が複雑になってしまう原因となっていました。HTML5の上記の新機能により、サイト間のコミュニケーションを利用するアプリが作成出来ます。ドメインを超えたコミュニケーションで、より柔軟なマッシュアップサイトやリアルタイムコミュニケーションを使用したオンラインゲームが実現可能です。クロスドキュメントメッセージングHTML5ではクロスドキュメントメッセージングという、異なるオリジン間でデータをやりとりする仕組みが利用出来ます。これまでも、iframe要素やJavaScriptのwindow.openメソッドなどで、そのサイトとは異なるオリジンの情報を使用したサイトを作成する事はできましたが、セキュリティ上の制限でJavaScriptから、他のオリジンのページの要素を直接操作する事はできませんでした。以下の図のような例を考えてみましょう。図1:異なるオリジンのアクセスの制限(クリックで拡大)ユーザーがiframeの中の、サイトBのフォームに秘密情報などを入力する場合に、もしiframeの外のサイトAのスクリプトからiframeの中(サイトB)にアクセス出来てしまうと、ユーザーに気づかれずにその情報を盗み出せてしまいます。そのためこのようなクロスオリジン間のスクリプトアクセスは、制限されていました。クロスドキュメントメッセージングを利用する事で、異なるオリジン間でデータの受け渡しが可能となります。これは、ガジェット(ブログパーツ、ウィジェット)などで利用出来ます。以下のサンプルは、ページ本体からiframe内のページに対してメッセージを送信するもののです。サンプルでは、異なるオリジンである事を示すために各ページ下部にそのURLを表示しています。図2:異なるオリジンへのメッセージ送信(クリックで拡大)まずはiframeを配置したページのコードから見ていきましょう。</body>メッセージを送信するには、window.postMessageメソッドを利用します。第1引数にはメッセージ文字列、第2引数には送信先のオリジンを指定します。以下は、メッセージを受信するiframe側のコードです。メッセージ表示用のテキストエリアです。受信処理は、messageイベントハンドラで行います。イベント引数eのoriginプロパティは、送信元のオリジンです。処理を行う前に、通信を許可するオリジンを判定し、意図しないオリジンからの通信を遮断しています。セキュリティ上の理由からもこの判定は必ず行うようにしてください。送信内容はイベント引数eのdataプロパティに格納されています。サンプルでは受信メッセージをテキストエリアに追加しています。イベント引数のsourceプロパティから、postMessageで受信成功を返信する事もできます。送信元で返信を受け取る場合には、messageイベントハンドラを送信元に実装する必要があります。WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。