HTML5 API入門

ワーカーの実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Web Workersを使って、実際にワーカーをどのように実装すればよいのかについて学びます。
講師:
10:24

字幕

このレッスンでは HTML5 の Web Workers を使って 実際にワーカーをどのように 実装すればよいのかについて学びます 画面はサンプルを ブラウザで開いているところです 「ワーカーを開始」 ボタンをクリックすると バックグラウンド スレッドに メッセージをポストするワーカーが 作成されます そしてそのバックグラウンド スレッドでは 5秒を費やした後 投稿されたメッセージを基にしたレスポンスが メインページに戻ってきます 実際にどのような実装になっているのかを 確認しましょう エディタでこの HTML を開いています Web Workers は ワーカーが始まって 終わるまでの間に 2 つのイベントを持っています 一つはバックグラウンド スレッドの 作業が完了して データが返ってきた時の message イベントです HTML の中に JavaScript で記述されています そしてもう一つは 何かが上手くいかなかった時の error イベントです こちらもこの行に定義されています ワーカーを作成したら 次のステップは この 2 つのイベントを処理することです ここでは message イベントを使って バックグラウンドで作業したワーカーから 返ってくるデータを処理しています そして返ってきたデータは onMessage 関数を呼び出し その関数の中で処理されます error イベントが発生すると onError 関数が実行されます このように作成した ワーカーオブジェクトに対し イベントを制御しています 続いてワーカーをキャンセルしたい時のために あらかじめ作っておいた allWorkers という配列にそのワーカーを 格納します そしてワーカーによってデータを ポストするための準備を行います ワーカーオブジェクトに対して postMessage 関数を実行します postMessage 関数は ポストしたいメッセージ 任意のデータを単一のパラメータとして 受け取ります このサンプルの場合 データは 単純な文字列で hi from worker という文字列に続いて 0 1 といった数字が続きます 「ワーカーを開始」ボタンをクリックすると 毎回 この数字がカウントアップされるため 複数のワーカーを作成すると 各ワーカーごとに異なるメッセージ 異なる数字が示されます ブラウザでこのサンプルを実行した時 表示されるメッセージに 数値の変化があることがわかります エディタに戻りましょう さてこれがバックグラウンド スレッドに 送信するデータになります そして実際に何が行われているのかを わかりやすくするために データとそれを送信した日付を ウェブページ上にメッセージとして 表示しています 次にワーカーのキャンセルについて 説明していきましょう いったん ブラウザに戻ります ワーカーを開始して 「最後に開始したワーカーをキャンセル」 ボタンをクリックすると コードでは この少し下にある cancelWorker 関数が 呼び出されます この中では まず配列から 最後に作成したワーカーを取得します 仮にこの配列に何かが入っていれば それを取得することでワーカーの動作を キャンセルできるわけです ワーカーオブジェクトに対して terminate 関数を呼び出すと そのワーカーが実行している バックグラウンド スレッドを すぐに終了します 続いてワーカーをキャンセルせずに 正常に実行された時の処理を見てみましょう ワーカーの動作が完了して 何らかのデータが返ってきた時 onMessage 関数が 実行されることになっていました ワーカーを作成した後 31 行目でデータが返ってきた時 message イベントで処理するよう EventListener 関数である onMessage 関数を設定しています この EventListener 関数 onMessage 関数は イベントオブジェクトを引数として 受け取ります このイベントオブジェクトには バックグラウンド スレッドから 戻ってきたデータが含まれています データを取得する方法を説明しましょう まずイベントオブジェクトを取得し データプロパティを参照します これがバックグラウンド スレッドから 返ってきたデータになります ブラウザに戻って確認すると このサンプルでは バックグラウンド スレッドから 返ってきたのは 英語の文字列が元々 小文字だったものが 大文字になって返ってきていますよね エディタに戻ります さてもう一つのイベントとして エラーが発生した時のイベントがあります 例えばワーカーの内容を記述した JavaScript ファイルが 読み込めなかったり 構文エラーになっているなど 何らかの問題が生じる可能性があります そのため error イベントは 必ず処理する必要があります onError 関数では イベントオブジェクトを引数として受け取り そこには 3 つの情報が入っています 一つ目はファイル名です エラーが起きた JavaScript の ファイル名や URL などが入っています 二つ目は行番号 どの行が問題かが わかります 三つ目はメッセージ どのようなエラーが起きているのかが わかります 例えば 構文エラーになっている といった情報です ここまでがメインページ側の 実装になります 今度はワーカー側でどのような処理が 行われているのかを確認してみましょう ワーカーオブジェクトを作成した時 こちらですね このワーカーオブジェクトの作成時に いくつかのイベントハンドラを作成し postMessage 関数でワーカーに データを送信するようになっていました ワーカーはその内容が記述されたファイルが ブラウザに非同期で読み込まれます ここでは SimpleEchoWorker.js というファイルです このファイルをエディタで開いてみましょう ワーカーに対してメッセージを ポストした時 ワーカーはそのメッセージを どのように処理しているでしょうか ワーカーのためのファイル つまり JavaScript ファイルの中で message イベントを使うことで 処理しています この EventListener の 中のコードこそが バックグラウンド スレッドで 実行されるコードです そしてここで受け取る引数に 格納されているのが メインページからポストされたデータです ブラウザに戻って確認してみましょう ポストされるメッセージは この部分 hi from worker という文字列に ワーカーそれぞれに生成される 数字が付加された文字列でしたよね JavaScript に戻って このイベントオブジェクトの中には データプロパティを持っていて データプロパティの中に 先ほどの hi from worker と数字で 構成された文字列を持っています 実際にこの messageHandler 関数の中では 何が行われているでしょうか ユーザーによって「ワーカーを開始」ボタンを クリックされると この関数の中でメッセージを受け取った後 5 秒間スリープしています このスリープは意味を持ちませんが Web Workers の機能がわかりやすいように あえて 5 秒間のスリープを設けています そして 5 秒が経過した後 受け取ったデータを 大文字に変換した上で メインページに返しています メインページへの送信は postMessage 関数を呼び出し 返したいデータを指定するだけです これがバックグラウンド スレッドで 実行されている仕事の内容です サンプルの解説は以上になります このレッスンで学んだポイントを おさらいしましょう HTML5 JavaScript では ワーカーオブジェクトを 作成することができます ワーカーオブジェクトを作成する時には そこで実行したい JavaScript ファイルのパスを設定します message イベントおよび error イベントを処理し その後 ワーカーで処理させるための メッセージをポストします ワーカーでは message イベントで それを処理します 必要であれば EventListener の中で メインページにメッセージを 返すことができます ここではイベントオブジェクトの データプロパティに含まれる メッセージを大文字にして返しています メインページではそのメッセージを同じように message イベントハンドラで 受け取っています

HTML5 API入門

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

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

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

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

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