HTML5 API入門

クロスドキュメントメッセージングを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5のクロスドキュメントメッセージングのためのAPIについて説明します。
講師:
13:19

字幕

このレッスンではHTML5の クロスドキュメントメッセージングの為の APIについて説明します これは別々のドメインに置かれた ウェブページでも片方からもう片方に メッセージを送信出来る様にするものです サンプルには2つのファイルがあります 最初のファイルは現在ブラウザーで開いている "MainWindow" のHTMLで 銀行口座にお金を入金したり 引き出したりする事が出来ます 1000円を入金してみましょう 入力フィールドに "1000" と入力し "入金" ボタンをクリックします これで残高に1000円が入金されました 続いて "新しいウィンドウ" ボタンを 数回クリックするとその度に その度に新しい子ウィンドウが開きます "MainWindow" は "ceroan.jp" というドメインに置かれていますが それぞれの子ウィンドウは "448.jp" という 異なるドメインに置かれています 尚スクリプトの中のURLは 説明の為のものになっていますので 実際に試される場合は 独自に用意したURL或いは ドメインに書き換える必要があります 注意して下さい "通信" ボタンをクリックすると "MainWindow" から子ウィンドウに メッセージを投げます クリックしてみましょう 子ウィンドウはそのメッセージを処理し それぞれのウィンドウの残高表示を更新します ここでは1000円がそれぞれの ウィンドウに表示されている事が分かります "手数料" ボタンをクリックすると 先程とは別の方法でメッセージを投げます 具体的には子ウィンドウから "MainWindow" に手数料を引く というメッセージを投げ "MainWindow" がそれを承諾し 10円が引かれた新しい残高を それぞれのウィンドウに戻す という流れです "手数料" ボタンをクリックすると 子ウィンドウから "MainWindow" に メッセージが投げられ "MainWindow" から子ウィンドウに メッセージが戻され 残高の表示が更新された事が分かります それではエディターで "MainWindow" と子ウィンドウの 2つのHTMLを見てみましょう 既にエディターで"MainWindow" と 子ウィンドウのHTMLを開いています このサンプルを実行する場合は クロスドキュメントメッセージングの 効果を確認する為に これら2つのHTMLを異なるサーバーに アップロードする必要があります それではページが実際に どの様に見えるかを確認する為に メインウィンドウのHTMLの 末尾に移動します 一番下までスクロールしました ここには口座に対して入金又は 引き出す金額を入力出来る テキストボックスがあります その後の2つのボタンは 実際に入金をしたり 引き出したりする為に使います 更にその後にある2つのボタンは 新しいウィンドウを開くボタンと それぞれにメッセージを送信するものです ページの上部に戻り 幾つかのグローバル変数を含む スクリプトを表示します 始めにグローバル変数の "balance" つまり残高に0を格納します "childWindowUrl" は 子ウィンドウとして開くURLです メインウィンドウと異なるドメインにする為 "448.jp" というドメインに置いています 又 "通信" ボタンをクリックした時 全ての子ウィンドウに メッセージを送信出来る様に 開いたウィンドウを "childWindows" という変数に 全て保持しています 又子ウィンドウを見やすくレイアウトする 計算処理の為に幾つかの変数も 用意しています 又子ウィンドウを見やすくレイアウトする 計算処理の為に幾つかの変数も 用意しています 始めに紹介する3つの関数は 比較的簡単なものです 最初の "deposit()" 関数は テキストボックスに入力された値を 取得し残高にその値を足し算します その後それが口座に入金されている事を 示すアラートを表示します 次の "withdraw()" 関数は 反対に残高からテキストボックスに 入力された金額を引き出して引き算します 新しいウィンドウをクリックした時は "newWindow()" 関数が実行されます ここでは子ウィンドウが表示される 場所を指定する為の計算処理を行っています そして勿論ウィンドウを開く為の "window.open()" 関数を実行します 子ウィンドウのURLは "448.jp" に置かれている "ChildWindow.html" でしたよね 同時にウィンドウを配置する為の 場所を指定しています 又それぞれのウィンドウに メッセージを送信する事が出来る様に 配列の中にウィンドウを保持しています メッセージの送信は "MainWindow" で "通信" ボタンを クリックすると実行されます この時実行される "broadcast()" 関数には それがどの様に動作するかを記述しています 全てのウィンドウに対して反復処理をし "postMessage()" 関数で メッセージを送信しています "window" オブジェクトを受け取り "postMessage()" 関数を実行します "postMessage()" 関数は 2つの引数を受け取ります 最初の引数は他のウィンドウに 渡す為の任意のデータです このサンプルでは残高として シンプルに数字が指定されています 必要であれば複雑な ジェイソンオブジェクトを渡す事も出来ます 2つ目の引数では子ウィンドウが どのドメインで実行されているかを指定します ここで指定しているアスタリスク "*" は 子ウィンドウがどのドメインで 実行されているかを気にしない事を意味します 必要な場合はここにドメインを指定し 子ウィンドウがそのドメインから 実行されていなければならない と規定する事が出来ます もしスラッシュ "/" を指定すると 子ウインドウが メインウィンドウと同じドメインに 置かれる必要がある事を意味します 子ウインドウが メインウィンドウと同じドメインに 置かれる必要がある事を意味します 従ってこの "postMessage()" 関数は 子ウィンドウにデータを送信します それでは子ウィンドウが 送られてきたメッセージを どの様に処理するかを確認してみましょう 子ウィンドウのHTMLに切り替えて 少し下にスクロールし 画面に表示される "UI" を確認します 始めに "div" 要素があり 現在の残高の箇所は デフォルトでは "未定義" となっています さてここからが受信したメッセージを 処理する為の重要なポイントです まず "window" オブジェクトに対し イベントリスナーを追加し "message" イベントが発生した時 "onMessage" 関数を 呼び出す様にしています その為 "MainWindow" で メッセージを送信すると 子ウィンドウのこの関数が呼び出され 送信者のオリジンを確認する事が出来ます 殆どの場合ではメッセージの送信者が 誰なのか確認する事になるでしょう "onMessage" ハンドラーは引数に イベントオブジェクトを持っており このイベントオブジェクトは "origin" プロパティを持っています "origin" プロパティに 含まれるオリジンは "スキーマ" "ドメイン名" に加えて 必要に応じて "ポート番号" も含んでいます 必要な場合は "origin" が あるドメインである事が保障される様に 設定する事が出来ます 必要な場合は "origin" が あるドメインである事が保障される様に 設定する事が出来ます 又は受け入れる必要のある複数のドメインを 配列等で用意しておき比較する事も出来ます その為送信されたメッセージを受け入れるか 拒否するかどうかを決定するのは 常に受信者側 つまりここでは 子ウィンドウになるという事です メッセージを受信した時に 何を行っているでしょうか? このサンプルでは送信者のオリジンが "http://ceroan.jp" というドメインであれば データを取得します そして新しい残高を画面に表示します ここではこの "span" 要素に 新しい残高が表示される事になります オリジンが "ceroan.jp" 以外であった場合 メッセージを拒否し その旨を通知するアラートを表示します これが "MainWindow" から子ウィンドウに データを送信する方法です 又メッセージを逆方法に投げる事も出来ます 子ウィンドウで "手数料" ボタンを クリックした時には スクリプトの中では 何が起こっているでしょうか? 子ウィンドウから元のページ つまり "MainWindow" に メッセージを送ります ここで指定している "window.opener" は 子ウィンドウを開いた 元のページを指定しています 続いて逆方向に 残高から10円を引いてください というメッセージを送信しています アスタリスクは "MainWindow" が どの様なオリジンで実行されているのかを 気にしない事を意味します これは子ウィンドウから "MainWindow" に メッセージを送信する時の設定です "MainWindow" では同様に メッセージイベントを処理します "MainWindow" のHTMLの68行目に メッセージイベントの ハンドラーについて書かれています "MainWindow" は 子ウィンドウとは別の "onMessage()" 関数を持っており ここに定義されています "MainWindow" の "onMessage()" 関数でも 送信者のオリジンを確認しています 誰がデータを送信しているのでしょうか? もしメッセージが "448.jp" の 子ウィンドウから来たなら メッセージを受け入れ その旨をアラートで表示します そしてそれが10円である というデータを受け取り 残高から引き算を行い 再度通信を行います "broadcast()" 関数は 新たな残高を 再び全ての子ウィンドウに送信します "broadcast()" 関数は 新たな残高を 再び全ての子ウィンドウに送信します これでレッスンは終わりです 私たちは "postMessage()" 関数を使って 異なるドメインに置かれた 異なるウィンドウに メッセージを伝える方法を見てきました 別のウィンドウから メッセージを受信した時に "message" イベントによって それを処理します "message" イベントは 他のウィンドウによって 送信されたメッセージを 受け入れるかどうかを 確認する事が出来る オリジンプロパティを持っています このレッスンではHTML5の クロスドキュメントメッセージングの為の APIについて学びました

HTML5 API入門

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

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

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

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

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