HTML5 API入門

メッセージの種類~ワーカー編

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Web Workersを使って素数を探すアプリケーションを使いながら、ワーカーを複数のファイルに分割する方法や、メインページに受け渡すメッセージを分類する方法について学びます。
講師:
08:50

字幕

このレッスンでは Web Workersを使って 素数を探す アプリケーションを使いながら メインページとワーカーで 通信するために メッセージの種類を 利用する方法を学びます メインのウェブページは PrimeNumberApp.htmlという名前で ウェブサーバーを通して 実行する必要があるため ここではローカルホストを通して 実行されるようになっています このサンプルでは ある範囲内にある すべての素数を取得するために ワーカーを使います 最初のテキストボックスに 下限の数として100を 次のテキストボックスに 上限の数として 80000を入力してみましょう そして [素数を探す]ボタンを クリックします すべての素数を探すには 少し時間がかかります この範囲内の すべての素数を取得した時 結果のメッセージが 送り返され そのメッセージには ワーカーの開始時刻と 終了時刻が表示されています そしてその時間の間に 検出された すべての素数も 表示されています 何かがうまくいかなかった場合 それを把握するために ワーカーからエラーメッセージが 送られてくることもあります このサンプルでは 上限の数が 下限の数よりも少ない場合 エラーメッセージが 返されます 上限の数を 8に変更して 再度 [素数を探す] ボタンを クリックすると このように 先ほどとは違う種類の メッセージが表示されました これがエラーメッセージです 下限の数が 上限の数よりも大きくなっています これでは 検索が動作しません そのため 通常の結果メッセージとは別に エラーメッセージを返すことも 必要になります ここでひとつ重要な点として ワーカーの中 でこのように 正常に動作しない場合があるとき 例外をスローしてはいけません ワーカーからメインページに 通信をおこなうための 唯一の方法は postMessage関数を 呼び出すことのみです そして それが通常のメッセージか エラーメッセージかを 区別する方法を決定するのは 開発者次第です また 結果やエラーを示すのとは別に 第3のメッセージを 使うことがあります これはワーカーで どのようなことがおこなわれているのかを 送り返すためのものです このサンプルで 再度 上限の数を 80000に設定して 試してみましょう 100から 80000の間で ワーカーのコードの中では 素数を見つけるたびに 何が起きているでしょうか ある素数が 見つかるたびに ワーカーでは メインページに対して 新しい素数が見つかった という メッセージを送っています そのため それぞれの素数が 個別にpostMessage関数を 実行していることになります メインページでは そのためのハンドラを 設定しています これによりブラウザの コンソールウィンドウに 新しい素数が見つかったことを示す メッセージを表示しています コンソールウィンドウを 開く方法は ブラウザの種類によって 異なります 現在ここで開いている Chromeでは developerツールを経由して コンソールを開くことができます InternetExplorerやFirefoxにも 同じような機能が用意されています Chromeで コンソールを開くには デベロッパーツールを開くために キーボードのF12キーを押します さらに こちらのコンソールタブを クリックすることで コンソールを 表示することができます 現在このコンソールに 表示されているメッセージは すべて メインページで実行中に 出力されたものです いったんこれらのログを クリアしてから 再度試してみましょう 検索の時間を 短縮するために 範囲を狭くしてみましょう そして[素数を探す]ボタンを 再度クリックします ワーカーから戻ってきた すべての診断メッセージは メインページによって ピックアップされ コンソール上に 出力されます これはJavaScriptファイルで ワーカーを動作させているときに 非常に便利な メカニズムです 通常のアプリケーションでは JavaScriptファイルの中に alertを入れたり ブレークポイントを置くなどして デバックすることがあります ワーカーの中では それをおこなうことはできません これはワーカーが メインページのドキュメントオブジェクトに アクセスできないためです これはワーカーが メインページに メッセージをポストする上で 根本的な制限事項になります ここで必要なのは この 出力する情報を 表示するエリアです そこで使うのが 先ほど説明した コンソールです それでは実際に どのような実装になっているのか 構造を見てみましょう このレッスンでは ワーカー側の実装については 説明せず メインページ側のみを 解説していきます エディタではHTML PrimeNumberApp.html を開いています ここまで説明してきた ワーカーから メインページに送られるメッセージの 種類を取得する方法について 解説していきます まずウェブページ自体の レイアウトを確認するために 一番下まで スクロールします 最初にある 2つのテキストボックスは ユーザーが 上限と 下限の数を 入力するために 使っています その後ろにある 2つのボタンは ユーザがワーカーを起動 キャンセル するためのものです メッセージエリアは 青色にスタイリングされています そして最後に すべての素数が表示される テキストエリアです このように とてもシンプルな構造になっています 最初に ページがロードされたとき こちらのonLoad関数が 実行されます onLoad関数の中では ボタンの処理を実行するために イベントリスナを設定しています また先ほどのテキストボックスと テキストエリアにアクセスするために いくつかの グローバル変数に それらを取得し 格納しています 続いて [素数を探す]ボタンを クリックしたときの 処理を見てみましょう 素数を探すボタンを クリックすると 一番上の方にある このfindPrimes関数が 呼び出されます この中では 新しいワーカーオブジェクトを作成し その内容が GetPrimeNumbers.jsという JavaScriptファイルに記述されています そのあと メッセージイベントと エラーイベントを設定します そして 下限の数 上限の数と このワーカーが開始された時刻を パラメータに指定して ワーカーに メッセージをポストします 開始時刻をつけているのは このサンプルの 実行が完了したとき ワーカーの実行にかかった時間を 示すためです これが メインページからワーカーに メッセージをポストするための 実装です 続いて ワーカーから メインページに メッセージが戻ってきた時の 実装について 説明していきましょう メッセージが戻ってきたときは 少し下にあるこちらの onMessage関数が 呼び出されます ここでは あらゆるメッセージを 受け取るので if文によって それが何の種類のメッセージかを 判定していきます メッセージの種類は ワーカー側で タイププロパティに入れるよう 実装しています もし デバック用の メッセージを受信したとき メインページでは そのメッセージを そのまま コンソールに出力しています ブラウザでは このように コンソールに メッセージが 表示されていましたよね エディタに戻ります メッセージの種類が problem 何か問題が起きた という場合では メッセージエリアに その旨を表示します 冒頭で 下限の数より 上限の数が小さかったときに 表示されたメッセージがありましたね 最後に メッセージの種類が result つまり結果である場合には テキストエリアに その旨を含んだメッセージを表示しています そして最後に テキストエリアに すべての素数を表示しています これは非常に強力で 便利なしくみです このレッスンでは バックグラウンドスレッドの ワーカーと メインページが通信するためには ひとつのシンプルな方法をとる ということを学びました postMessage関数を使い メッセージの種類を定義する必要があります メインページではその種類を 解釈する実装をおこないます

HTML5 API入門

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

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

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

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

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