サンプル
サンプル１とサンプル２を実行する際には、最後に掲載したサンプル共通ファイルcode.jsとlib.jsを同じディレクトリに配置する必要があります。
また、Google Chromeではセキュリティ上、ローカルのHTMLファイルから他のローカルファイルの内容にアクセスする場合には、
ファイル読み込み自体を許可する「--allow-file-access」フラグと、
ローカルファイルからのファイル読み込みを許可する「--allow-file-access-from-files」フラグの両方を付けて起動する必要があります。
そのため、サンプル１とサンプル２をローカルファイルとして実行する場合は、Google Chromeについては上記フラグを付けて起動したうえで実行してください。
Windowsの場合は以下のようになります。
＜Google Chromeのインストールフォルダ＞\chrome.exe --allow-file-access --allow-file-access-from-files
サンプル１ 専用ワーカーの利用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>専用ワーカーとの接続サンプル(同期API FileReaderSync使用)</title>
</head>
<body>
<p>
専用ワーカーとの接続サンプル(同期API FileReaderSync使用)
</p>
<p>
選択したファイルの読み込みがバックグラウンドのワーカーで行われ、<br>
動的に上に追加されていきます。
</p>
<p>
テキストファイルの場合は最初の半角10文字が表示され、<br>
画像の場合はその画像が表示され、<br>
それ以外のファイルの場合はファイル名が表示されます。<br>
＊Safariの場合はFileReaderSyncに未対応のためつねにファイル名になります<br>
＊OperaはFileオブジェクトをワーカーへ送信できないため未対応です。
</p>
<input type="file" id="fileInput">
<div id="output"></div>
<script type="text/javascript">
// HTML要素の参照を取得
var input = document.getElementById('fileInput');
var output = document.getElementById('output');
// 専用ワーカーとの接続開始
var worker = new Worker('code.js');
// 受信したデータを表示領域に設定
worker.onmessage = function(event) {
output.innerHTML = event.data;
}
// エラー時にエラーメッセージをデバッグコンソールに出力
worker.onerror = function(event) {
console.log(event.message);
console.log(event.filename);
console.log(event.lineno);
}
// ファイル選択時に、選択されたファイルの情報を専用ワーカーへ送信
input.onchange = function(event){
// Fileオブジェクトの参照を取得
var file = event.target.files[0];
// 専用ワーカーへFileオブジェクトを送信
worker.postMessage(file);
};
// 念のためwindowアンロード時に接続をクローズ
window.onunload = function(event){
worker.terminate();
}
</script>
</body>
</html>
サンプル２ 共有ワーカーの利用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>共有ワーカーとの接続サンプル(FireFoxは共有ワーカー未実装)</title>
</head>
<body>
<p>共有ワーカーを利用したチャット<br>
複数ウィンドウ、タブ間でチャットを行うことができます。
</p>
<hr>
<div id="output"></div>
<input type="input" id="input">
<input type="submit" value="送信" onclick="onSend()">
<script type="text/javascript">
// HTML要素の参照を取得
var output = document.getElementById('output');
var input = document.getElementById('input');
// 共有ワーカーとの接続開始
var worker = new SharedWorker('code.js');
// 共有ワーカーとの接続用ポートを取得
var port = worker.port;
// 受信したデータを表示領域に設定
port.onmessage = function(event) {
// ワーカーから現在の全発言を配列で取得
var comments = event.data;
// 発言を上から新しい順に表示
comments.reverse();
output.innerHTML = "";
for(var i = 0; i < comments.length; i++){
output.innerHTML += "" + comments[i] + "<br>";
}
}
// エラー時にエラーメッセージをデバッグコンソールに出力
port.onerror = function(event) {
console.log(event.message);
console.log(event.filename);
console.log(event.lineno);
}
// クライアントを識別するためのIDを生成
var id = new Date().getTime();
// チャットの発言を共有ワーカーへ送信
function onSend(){
port.postMessage(id + ":" + input.value);
}
// 念のためwindowアンロード時に接続をクローズ
window.onunload = function(event){
port.close();
}
</script>
</body>
</html>
サンプル共通ファイル
ワーカー上で実行するファイル code.js
// code.js
// 別スクリプトの読み込み
importScripts('lib.js');
var images = "";
var ports = new Array();
var comments = new Array();
// 専用ワーカーの場合について、メッセージ受信時のイベントハンドラを定義
onmessage = function(event){
// 別スクリプトから読み込んだ、ファイル読み込み関数を呼び出す
images = convertFile(event.data) + "<br>" + images;
// 読み込み結果を返信
event.target.postMessage(images);
}
// 共有ワーカーの場合について、接続時のイベントハンドラを定義
onconnect = function(event){
// 接続元と通信するためのMessagePortオブジェクトを取得
var port = event.ports[0];
// 接続元とのポートを配列に格納して保持
ports.push(port);
// 共有ワーカーの場合はこのMessagePortに対してメッセージ受信時のイベントハンドラを定義
port.onmessage = function(event){
// 送信されてきた発言を配列に追加
comments.push(event.data);
// 保持しているすべての接続元へ再配信
for(var i = 0; i < ports.length;i++){
ports[i].postMessage(comments);
}
}
}
code.jsから読み込むファイル lib.js
// lib.js
var convertFile;
if ( "FileReaderSync" in self) {
var reader = new FileReaderSync();
// ファイルタイプで返す値を変える
convertFile = function(file){
if(file.type.match(/image\/.*/)){
// 画像ならば読み込んでimgタグ文字列を生成
var data = reader.readAsDataURL(file);
return "<img src = '" + data + "'>";
} else if (file.type.match(/text\/.*/)){
// テキストならば読み込んで最初の10文字を返す
return reader.readAsText(file).substring(0,10);
} else {
// それ以外の場合はファイル名を返す
return file.name;
}
}
} else {
// FileReaderSync未実装ブラウザ用定義
convertFile = function(file){
// 常にファイル名を返す
return file.name;
}
}
関連項目
（関連する項目はありません）
