クロスドキュメントメッセージングとは
このレッスンでは、クロスドキュメント メッセージングの 概要について学びます。 HTML5では、別々のサーバーから ダウンロードした場合でも、 お互いに通信を行うことができる APIを持っています。 これはとてもパワフルな仕組みです。 例えば、現在の天気や株価などの コンテンツを、 たくさんの、異なるサービスから取得し、 クライアント側でマッシュアップを 作成することができます。 マッシュアップとは、ウェブ上に 公開されている情報を、 加工、編集することで、新たなサービスを 創り出すことです。 HTML5を使うと、異なるサーバーから ダウンロードしたウェブページと 通信することができますので、 クライアント側で、 あらゆる情報の蓄積や、加工を 行うことができます。 このレッスンでは、このメカニズムが どのように機能するのかを ご紹介します。 関連するファイルは三つあります。 最初のファイルはHTMLの メインウィンドウで、 ceroan.jpというドメインに 置かれています。 このサンプルでは、疑似的に 銀行口座にお金を入金することができます。 まず百円を入金してみましょう。 残高のテキストエリアに、１００と入力し 入金ボタンをクリックします。 これで１００円が入金されました。 さらに、２００円を追加で入金し 最後に５０円を 今度は引き出してみましょう。 このように、残高は入金や引き出しを 繰り返すたびに 足されたり、引かれたりしています。 残高を記憶しておくために、 このページにはグローバル変数があります。 さて、この「新しいウィンドウ」ボタンを クリックします。 このボタンを数回クリックしたときに 何が起こるかを見てください。 このようにクリックするたびに、 画面右側に、子ウィンドウが作成されました。 これらのウィンドウは適切な位置に 開かれるように、 内部で計算処理を行っています。 それぞれの新しいウィンドウは、別の ドメインからダウンロードされており これがキーポイントになります。 子ウィンドウは448.jpというメインウィンドウとは 別のドメインに置かれています。 通常、これらのようにドメインを横断して 通信することは、 セキュリティの制約のためにできませんが、 HTML5ではこれが可能になります。 実際にやってみましょう。 「通信」ボタンをクリックすると、 現在の残高を伝えるために、 それぞれの子ウィンドウに メッセージを投げます。 ボタンをクリックすると、 通信が行われ、 それぞれのウィンドウがメッセージを 受信して、 現在の残高が表示されました。 メッセージを投げるための関数は、 メインウィンドウから それぞれの子ウィンドウに 何かを伝えることができます。 また、同じアプローチを使用して、 逆方向にメッセージを投げることもできます。 「手数料」ボタンをクリックすると、 残高から１０円を引くために、 子ウィンドウからメインウィンドウに メッセージを投げます。 ここが重要なポイントです。 メインウィンドウから子ウィンドウに または、子ウィンドウから メインウィンドウに メッセージを投げるたびに、 メッセージの受信側は、 常にメッセージの送信側が 誰なのかを確認しています。 そして信頼されているドメイン化どうかに 基づいて、 メッセージを受け入れるか拒否するかを 決定できます。 これがオリジンと呼ばれ、HTTPなど スキーマを含んだ 448.jpのような、 ドメイン名を示します。 また潜在的に、ポート番号も 含まれているため、 オリジンによって、メッセージの 送信者を識別することができます。 このサンプルでは、送信者は 448.jpで、 メッセージを受け入れるか拒否するかを 受信側が決めることができます。 このコードではメッセージを受け入れる 様になっています。 そのため、残高から１０円が 引かれているはずです。 かつ、自動的にそれぞれの子ウィンドウに 新しい残高が、 再送信されていますので、 子ウィンドウの残高は２��０円から ２４０円になっていることがわかります。 再度手数料ボタンをクリックすると ２４０円から２３０円変わることが わかります。 このサンプルを動作されるためには、 それぞれのHTMLを 別々のサーバーにおく必要があります。 スクリプト内のURLは、説明のためのものになっていますので、 実際にお試しになる場合は、 独自に用意したURL、 あるいはドメインに書き換える必要が あります。 注意してください。 サンプルを動作させるため、 もう一つの重要なポイントがあります。 メインウィンドウが動作するドメインを ceroan.jpの代わりに 別のドメイン、ここではlocalhostに してみましょう。 予め別のタブにlocalhostで開く メインウィンドウの ウェブページを開いています。 ここではローカルに立てた ウェブサーバーを利用していますが、 通常のウェブサーバーでも もちろん大丈夫です。 いったん先ほど開いていた子ウィンドウを 閉じておきます。 Localhostからメインウィンドウを 開いています。 今回は、２万円を預金に 入金してみましょう。 ２万を入力して、「入金」ボタンを クリックします。 そして、先ほどと同様に いくつかの子ウィンドウを開き、 通信ボタンをクリックした時に、 localhostから448.jpで動作する 子ウィンドウにメッセージが 送られます。 ここではメッセージがきちんと表示 されるよう、 少し子ウィンドウのサイズを 大きくしておきます。 それでは実際に「通信」ボタンを、 クリックしてみましょう。 このように、子ウィンドウは 「localhostからのメッセージを 拒否しました。」 というダイアログが表示されました。 この時、子ウィンドウの中では、 メッセージの送信者がチェックされ、 オリジンがceroan.jp以外であれば、 それを拒否するというロジックが 動いています。 メッセージの受信者側では、 常に送信者のオリジンを 確認することができ、 それを信頼するかどうかを 決定することができるのです。 これは異なるドメインから読み込まれた それぞれの子ウィンドウと、 完全に通信することができる、 非常に強力なメカニズムです。 このレッスンでは、 クロスドキュメントメッセージングの 概要について学びました。
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。