HTML5 API入門

クロスドキュメントメッセージングとは

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クロスドキュメントメッセージングの概要について学びます。
講師:
08:10

字幕

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

HTML5 API入門

HTML5は今やインタラクティブコンテンツを作るうえでかかせないものです。このコースでは膨大なHTML5の仕様の中からWebアプリケーションを作成するうえで便利な機能を紹介していきます。コミュニケーション系APIの使い方のほか、Web WorkersやWebSocket、モバイル用アプリの制作で使うjQuery Mobileなどについても解説します。

3時間19分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年03月03日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。