Nylon WebWorkersについて

WebWorkers

HTML5で導入されたWebWorkersは，JavaScriptで書かれたプログラムをバックグラウンドで動作させるAPIです．これがまたシンプルなAPIで，(1)Worker（バックグラウンドで動作するプログラム）を起動する，(2)Workerにメッセージを送る（postMessageメソッド），(3)Workerからメッセージが届いた際に実行する処理を記述する（onmessageやaddEventListener）のみでWorkerを制御します．メッセージがほとんど行き交わないような単純な処理であれば混乱は少ないのですが，メッセージが行き交うような処理になると，届いたメッセージの内容を元に処理を分岐させるなどの記述が多くなり，プログラム全体の見通しが悪くなります．

この問題点に対応したフレームワークとして，すでにAlexServiceが公開されています．（リリース記事：HTML5 Web Workersを超簡単に使えるようにするAlexService0.5を公開）一方，我々の開発しているNylonをWebWorkersに対応させたモジュールが「Nylon WebWorkers」です．

Nylon WebWorkers

Nylon WebWorkersはメイン側のモジュール「nylon.webworkers.js」とバックグラウンド側のモジュール「nylon.webworkers.client.js」から構成されたシンプルなモジュールです．これらのモジュールを使うと，Nylonの流儀に従って「キーワードに対する処理の記述」と「キーワード付きのメッセージ送信」のみによるモジュール間通信が可能になります．もちろん，nylon.coe.jsを併用した上でキーワードとして「server」を指定すればNylonサーバまでメッセージが届きますし，「broadcast」を指定すればNylonサーバを経由して，同時に接続されているWebブラウザ上のNylonモジュールまでメッセージが届きます．Nylonを通じてWorkerと通信するために必要なことはWorkerとして動作させるJSファイルを指定するだけです．以下に例を示します．

この記述だけで，worker.jsが読み込まれてバックグラウンドで実行され，キーワードベースの通信が可能になります．後はnylon.client.createで作成したオブジェクトにonメソッドでキーワードに対する処理を記述したり，emitメソッドでメッセージを送るのみです．

それでは，実際のプログラムを見てみましょう．今回のプログラムは，こちらのページに掲載されている，1から指定された数値までの和を計算するプログラムを改造したものです．

用意するファイルは以下のとおりです
worker_test.html・・・HTMLファイル
nylon.client.js・・・Nylon本体
nylon.webworkers.js・・・WebWorkersとやりとりするクラス
worker.js・・・わざわざWebWorkersを使うまでもありませんが，合計値を計算するプログラム
nylon.webworkers.client.js・・・ワーカ側のライブラリ（クラス化とか面倒なことはしていません）

以下に示すファイルはworker_test.htmlです．9〜11行目は「worker_set」を受け取った際の処理で，無事にWorkerと接続された場合に画面上に「connect」と表示しています．12〜14行目は「result」により計算結果を受け取り，アラートを表示します．18〜22行目はボタンがクリックされた際に「worker」と共に計算範囲をWorkerに渡します．16行目は，「worker.js」を読み込む処理です

続いて，以下に示すファイルは，Workerとして動作する「worker.js」です．4〜9行目はキーワード「worker」が届いた場合の処理です．具体的には入力された数値までの数値を足して，その結果を「result」で送っています．

11行目は「worker_set」を送っています．必須ではありませんが，通信できる状態になったことをメイン側に示します．

13行目はWorkerが受け取るキーワードをメイン側Nylonに送ってキーワード登録を行います．この処理が無いとWorker側にメッセージが届かないので重要なのですが，onメソッドに含める方がスマートなので近い内に削ります．（たぶん）

このように，onとemitのみでメイン側とWorker側の通信を記述できるので，通信が煩雑になっても混乱しなくてすみますし，通信するモジュールを限定しないので，様々なモジュールと組み合わせることが可能となります．今のところ，MeSHで使用するシミュレータ教材はSilverlight，Java，Flashを想定していますが，将来的にCPU速度が向上しJavaScriptでシミュレータ教材を記述できるようになった際には，Nylon WebWorkersを利用していこうと考えています．

動かし方

HTMLファイルをWebブラウザに放り込むと，URLの先頭が「file://」となります．この状態ではWebWorkersは使えません．必ずHTTP経由でアクセスしてください．今回の例ではすべての通信はクライアント内で完結しているのでNylonサーバは不要です．

HTTP経由で読み込むと，即座に画面上の「not connect」が「connect」に変わるはずです．この状態で入力欄に数値を入力してください．10や100ではすぐに結果が表示されてしまうので，もっと大きな数値が良いです．具体的な数値はCPUと相談して決めた上，お試しください． ツイート