SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Cloud SQLで学ぶ業務・基幹系アプリ再入門

HTML5のWeb Workersを追加してさらに高速仕訳入力

Cloud SQLで学ぶ業務・基幹系アプリ再入門(3)

  • X ポスト
  • このエントリーをはてなブックマークに追加

Web Workersプログラミングの基本

ワーカを呼び出すJavaScriptスクリプト

リスト1 Web Workers呼び出しJavaScriptの基本パターン
<script type="text/javascript">
// (1)ワーカの実装チェック
if (window.Worker){
  $("#stat").text("このブラウザはWeb Workersを使用できます。");
} else {
  alert("このブラウザはWeb Workersを使用できません。");
}
// (2)ワーカの生成
var worker1 = new Worker("worker1.js");
// (3)ワーカに処理依頼
function send() { 
  var val1 = $("#val1").val();
  var val2 = $("#val2").val();
  worker1.postMessage({ "val1": val1, "val2": val2 });     
}
// (4)ワーカ処理結果の受信(非同期)と表示
worker1.onmessage = function (e) {
  $("#out").text(e.data);
}

ブラウザの対応確認

 (1)では使用しているブラウザでWeb Workersが使用できるかを確認しています。なお、詳細な対応状況はcaniuse.comに記載されていますが、この連載で使用しているChromeのほか、FireFox、Safariなどの主要ブラウザでは使用できますが、IEではバージョン10.0からになります。また、スマートフォンなどモバイル版のブラウザではまだ対応にバラツキがあります。

ワーカの使用手順

  • ワーカを使用する場合、最初にワーカインスタンスを生成します。生成は(2)のように、JavaScriptで記述されたワーカ(worker1.js)を引数指定して行います。インスタンスの名前(ここではworker1)はなんでもよく、また複数のワーカインスタンスを生成して並行使用することもできます。
  • JavaScriptプログラムからのワーカへの処理依頼は、生成したワーカインスタンスにpostMessageメソッドを適用して行い(3)、メソッド実行と同時でワーカのバックグラウンド処理が開始されます。ワーカに渡すデータは引数に指定します。ここではJSONフォーマットのデータになっていますが、それ以外のフォーマットでも問題ありません。
  • ワーカでの処理が完了すると、(4)のように.onmessageイベントで知らされ、匿名関数内でワーカからのレスポンスに対する処理を行います。匿名関数は、イベントオブジェクト(ここではe)がセットされた状態で起動され、このオブジェクトのdataプロパティ値(e.data)がワーカから返される値になります。

 ここで(4)はイベント駆動型の処理なので、(3)(4)のプログラム記述はどちらが先でも問題ありません。

ワーカスクリプト

リスト2 Web Workersスクリプトの基本パターン
onmessage = function (e) {
  var dat = e.data;
  // ワーカ内処理
          :
          :
  var wval = Web Workersでの処理結果;
  postMessage(wval);
}

 メインのJavaScriptプログラムでpostMessageが実行されると、リスト2、Web Workersスクリプトのonmessageイベントから匿名関数が起動されます。匿名関数はイベントオブジェクト(e)がセットされた状態で起動され、プロパティdata(e.data)に渡された引数がセットされています。

 Web Workersでの処理か完了から、その結果をpostMessageの引数にセットして実行すると、リスト1、(4)の匿名関数が起動されます。

次のページ
Web Workersを使用した簡単なサンプル

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Cloud SQLで学ぶ業務・基幹系アプリ再入門連載記事一覧

もっと読む

この記事の著者

清野 克行(セイノ カツユキ)

慶應義塾大学工学部電子物理専攻卒。日本IBM、日本HPで、製造装置業を中心とした業務系/基幹業務系システムのSE/マーケティングや、分散アプリケーションによる社内業務システム開発などに携わる。現在は、クラウドやAjax関連の/ソフト開発/書籍執筆/セミナー講師/コンサルティング、などを行っている。情...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6714 2012/08/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング