HTML5 API入門

オブジェクトを受け渡す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Web Workersにオブジェクトを受け渡す方法について学びます。
講師:
10:28

字幕

Web Workers を使う時 メインのウェブページから ワーカーに対して 複雑なオブジェクトを渡すことができます 同様に Web Workers は その結果として 複雑なオブジェクトをメインのウェブページに 返すこともできます このレッスンでは このように Web Workers とオブジェクトを 受け渡す方法について学びます サンプルのウェブページは ObjectEcho.html という名前で ワーカーに渡すために いくつかの情報を設定できます 一つ目のテキストボックスは ワーカーからどのくらいの数の 返信を得たいのかを示す整数で ここでは 5 を入力します 二つ目は返信と返信の間の ギャップについて定義します ここでは 2000 ミリ秒 を指定します [ワーカーを開始] ボタンをクリックして ワーカーにメッセージをポストします ここでポストされるメッセージは オブジェクトであり オブジェクトには 3 つのプロパティが含まれています 最初のプロパティは このように hi from worker 1 というあらかじめ決められた文字列です 二つ目のプロパティは 先ほど HTML で設定した numReplies という返信の数で ここでは 5 という数字になります 三つ目のプロパティは こちらも HTML で設定した gap という返信と返信の間の ギャップの長さです 実際にこれらのプロパティが 確認できるようになっています これら 3 つのプロパティを含む オブジェクトを作成し postMessage 関数に パラメータとしてそのオブジェクトを渡します 同様に Web Workers から 返ってくるレスポンスも オブジェクトになっています そこには元のメッセージを 大文字に変換したものも含まれています 後ろの数字は 全体の返信の数に対して いくつめの返信か を示しています それでは どのようにして Web Workers に オブジェクトを渡したり 返したりしているのかを見ていきましょう 実際のコードを開きます このサンプルのコードは 2 つのファイルで 構成されており メインのウェブページである Object.html と バックグラウンドで実行されるワーカーである ObjectEchoWorker.jsです このサンプルはウェブサーバーを通して 実行する必要があるため ここではローカルホストを通して 実行されるようになっています それでは始めに HTML を見てみましょう 始めに HTML がブラウザ上で どのように見えるかを確認するため コードの一番下までスクロールします このテキストボックスは 受け取りたい返信の数を設定します そのため numReplies という名前が付けられています そして二つ目のテキストボックスは 返信と返信の間のギャップを 設定するものです 先ほどは 2000 ミリ秒に 設定していましたよね そしてワーカーを開始 またはキャンセルするためのボタンがあります さらにワーカーから返ってくる結果を 表示するためのテキストエリアです ウェブページはこのような構成になっています そしてこの少し上にあるスクリプト この部分ですね この部分が onLoad 関数 これがページを最初に読み込んだ時に 実行されるコードです ここで 2 つのボタンについて EventListener を 設定しています またテキストボックスやテキストエリアに アクセスできるように これらを取得して グローバル変数に格納しています それではページ上部にあるスクリプトの 先頭部分を見てみましょう 22 行目には いくつかのグローバル変数が 定義されています また 29 行目には [ワーカーを開始]ボタンをクリックした時に 呼び出される関数が書かれています この関数ではブラウザが Web Workers を サポートしているかどうかをチェックし もし Web Workers を サポートしている場合 新しい Web Workers を作成し それを実行するための JavaScript ファイルへのパスを 渡します さらに message イベントと error イベントを設定します 続いてワーカーをキャンセルしたい時のために あらかじめ作っておいた allWorkers という配列にそのワーカーを格納します このレッスンで最も重要な部分は ワーカーにオブジェクトを渡すことを 示している 51 行目から 54 行目です オブジェクトはシンプルなものでも 複雑なものでも 望むような構成にできます このサンプルではオブジェクトは 3 つのプロパティ 順に メッセージ 返信の数 ギャップを持っています メッセージとは "HI FROM WORKER 1" のような文字列です numReplies は 最初のテキストボックスで 5 と入力したように返信の数を表します そしてギャップは二つ目のテキストボックスで 2000 と入力したように 返信と返信の間のギャップを示します この 3 つのプロパティを含んだ オブジェクトが ワーカーにポストされます さて ワーカー側では このデータを どのように処理しているでしょうか ObjectEchoWorker.js を開いて ファイルの一番下を見てみましょう ここではメインページからポストされた メッセージが 届いた という メッセージイベントハンドラを設定しています 設定した messageHandler 関数は こちらです messageHandler 関数の中では 受け取ったメッセージから オブジェクトの各パーツを取得しています イベントオブジェクトの e の中にある データプロパティには 受け取ったオブジェクトの各パーツが 入っています そのため e.data.msg というプロパティには HI FROM WORKER 1 のようなパーツが入っているのです ここではそのメッセージを 大文字に変換し いったん グローバル変数に格納しています このファイルの冒頭では いくつかのグローバル変数を定義しています また送られてきたデータから numReplies プロパティも 取得します この値には 5 が入っていましたよね ギャップも同じように取得し グローバル変数に格納します これで受信したメッセージから データを取得できましたので SetInterval 関数で 処理を実行します SetInterval 関数では 指定した間隔 ここではギャップの値を使って 指定した関数を複数回呼び出します そのためこの doReply 関数は 複数回呼び出されます ここではそのインターバル 間隔は 2000 ミリ秒です doReply 関数の中身を 見てみましょう doReply 関数は こちらに定義されています 関数が呼び出されるために ワーカーからメインページに メッセージを投稿します メッセージの中身は 先ほどと同じように オブジェクトになっています ここでは postMessage 関数を使って メインページに オブジェクトを返しているのです オブジェクトは msg メッセージプロパティを持っています これは先ほど messageHandler 関数の中で hi from worker 1 という文字列を 大文字にしたものでした さらに何番目の返信かがわかるように 1 2 3 という数字も含めています 返信の数がカウントできるように count という変数を持っています そして返信の総数ですが これはメインページから受け取った 5 という数字になります このオブジェクトには メインページへのレスポンスに必要な すべての情報が含まれていることになります すべての返信の数だけ メッセージをポストし終えたら インターバルをキャンセルする必要があります そのため返信の数をチェックし それを超えたら clearInterval 関数で インターバルをクリアします 最後にワーカーから メインページにポストされたメッセージを 処理するにはどうなるでしょうか 再度 ObjectEcho.html に 戻ってみましょう onMessage 関数の中を見てみます onMessage 関数は ここに定義されていますね onMessage 関数では ワーカーから戻ってきたデータを 処理しています 先ほどと同様のアプローチになっており イベントオブジェクトの e の中に データプロパティがあり このデータプロパティには ワーカーから渡されたオブジェクトが 含まれています つまり msg メッセージプロパティ replyNumber プロパティ そしてtotalRepliesプロパティが 含まれています このレッスンでは メインページとワーカーの間で オブジェクトを受け渡す方法を学びました これにより二者間で 様々なデータを通信することができます

HTML5 API入門

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

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

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

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

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