Web Workersによるバックグラウンド処理 (2/5)
作成:2010-12-20 12:58
更新:2010-12-20 12:58
更新:2010-12-20 12:58
■Workerオブジェクトを使ってみる
では、実際にWeb Workerを利用してみましょう。ここでは、HTMLファイルと、バックグラウンドで実行するスクリプトファイルの２つを用意します。
HTMLファイルは適当なファイル名でかまいませんが、スクリプトファイルは「script.js」としておいてください。今回は、このファイル名でスクリプトをロードします。２つのファイルは、同じフォルダ内に配置するようにしてください。
では、下に２つのファイルのスクリプトを掲載しておきます。実際にブラウザからアクセスして動作を確認してみましょう。入力フィールドになにかテキストを書いてボタンを押すと、画面に「こんにちは、○○さん！」と表示されます。
なんてことない単純なサンプルですが、実は「入力したテキストを元に表示用のテキストを生成する」という部分を、別スレッドで実行させています。ま、あまり意味はないですが、「Web Workersの仕組みを理解するためのサンプル」と考えてください。
なお、このサンプルは、ファイルを直接ブラウザで開いても動きません。必ずWebサーバーで公開し、ブラウザからそのページにアクセスをするようにしてください。Web Workersの機能は、ローカルファイルを直接開いた状態ではうまく機能しないことがあります。
今回のスクリプトでは、まず起動時にinit関数が実行されています。この中でWeb Workersのオブジェクトが生成されています。
これで、指定したスクリプトをロードしたWorkerオブジェクトができあがります。これはグローバル変数で常時保持し続けるようにしておきましょう。
HTMLファイルは適当なファイル名でかまいませんが、スクリプトファイルは「script.js」としておいてください。今回は、このファイル名でスクリプトをロードします。２つのファイルは、同じフォルダ内に配置するようにしてください。
では、下に２つのファイルのスクリプトを掲載しておきます。実際にブラウザからアクセスして動作を確認してみましょう。入力フィールドになにかテキストを書いてボタンを押すと、画面に「こんにちは、○○さん！」と表示されます。
なんてことない単純なサンプルですが、実は「入力したテキストを元に表示用のテキストを生成する」という部分を、別スレッドで実行させています。ま、あまり意味はないですが、「Web Workersの仕組みを理解するためのサンプル」と考えてください。
なお、このサンプルは、ファイルを直接ブラウザで開いても動きません。必ずWebサーバーで公開し、ブラウザからそのページにアクセスをするようにしてください。Web Workersの機能は、ローカルファイルを直接開いた状態ではうまく機能しないことがあります。
今回のスクリプトでは、まず起動時にinit関数が実行されています。この中でWeb Workersのオブジェクトが生成されています。
worker = new Worker("script.js");このように、バックグラウンドで動くスレッド（ワーカー）を実行するためのオブジェクトは「Worker」というオブジェクトとして用意されています。これはnewで作成されます。この際、引数には、実行するスクリプトファイル名（またはファイルのパス）を指定してやります。これで、指定したスクリプトをロードしたWorkerオブジェクトができあがります。これはグローバル変数で常時保持し続けるようにしておきましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※HTMLページのソースコード
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Sample Page</title>
<script type="text/javascript">
<!--
var woker;
function init(){
worker = new Worker("script.js");
worker.onmessage = function(e){
alert(e.data);
}
}
function action(){
var s = document.getElementById("text1").value;
worker.postMessage(s);
}
//-->
</script>
</head>
<body onload="init();">
<h1>サンプル</h1>
<p id="msg">message...</p>
<input type="text" id="text1">
<input type="button" onclick="action();" value="send">
</body>
</html>
※script.jsのスクリプト
onmessage = function(e){
var str = e.data;
postMessage("こんにちは、" + str + "さん！");
}
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る