月別: 2013年1月

ワーカーから他のスクリプトの読み込み
従来のJavascriptでは、
ほかのJavascriptファイルの読み込みができなかったけど
Web Workersを使えば
importScripts()へファイルパスを指定して読み込むことができる
読み込むファイルは、複数指定することも可能で
　,て区切って記述する　
例えば
importScripts(“game.js”,”login.js”);
読み込みの順番は左から、つまり今回なら
game.jsから
となる

Web Worksが使えるか確認
WebWorkersが使えるかは
windowオブジェクトに
Workerオブジェクトがあるか調べる
var ele=document.getElementById(“result”);
//WebWorkersが使えるか確認
if(!window.Worker){
ele.innerHTML=”WebWorkersが使えません”;
return;
}
次に、ワーカー作成
今回は、句読点変換ボタンがクリックされたときの処理
document.getElementById(“convert1”).addEventListener(“click”,fuction(){
var text=document.getElementById(“sourcetext”).value;
var myworker=new Worker(“js/convert1.js”);
myworker.onmessage=fuction(evt){
ele.innerHTML=evt.data;
}
myworker.postMessage(text);
},true);
では、解説
イベントハンドラでは、
テキストエリアに入力された文字列を読み出す
ソースは
var text=document.getElementById(“sourcetext”).value;
次に、new Worker()で
Workerオブジェクトを作成して
引数へ、Javascriptのパス
もしくは、URLを指定する
ソースは
var myworker=new Worker(“js/convert1.js”);
ここで指定するJavascriptは、
Worker専用にすること
理由は、DOM操作のコードがあると
エラーが発生するため
注意すべきは、Workerオブジェクトを作成した時点で
すぐに、ファイルが読みこまれ、実行までされること
ライブラリ指定のように、読み込みだけではないところに注意
読み込んだ時点で実行されるため
Workerオブジェクトへデータを渡すこともできないし
呼び出し元にデータや結果を、渡すこともできない
そのため、読み込みに指定するファイルは
イベントハンドラだけ定義して
何も処理しないようにしている
ちなみに、worker内で定義した関数や変数は
呼び出し元とは違う扱いになるため
名前が同じでも違うものとして認識されるらしい
関数のスコープの区切りの感覚にちかいかもしれない
　　　　　　

Web WorksのJavascriptの機能制限
バックグラウンドで動かすため、いくつか機能制限がついてしまう
特に大きいのがHTMLページ内の
要素へアクセスできないということ
つまり、DOM制御ができない
ちなみに、DOMは
Document
Object
Model
の略
DOMでは、要素で囲まれた範囲を
ひとつのオブジェクトとして
扱う
オブジェクトなので
メソッド、プロパティがあり、
これらを使い、要素の操作ができる
Web Worksでは、このDOMが使えない
Web Worksで使えるオブジェクトは
ECMAScript-262で定義されてるオブジェクト
Array
Boolean
Data
Error
Fuction
Math
Number
Object
RegExp
String
navigatorオブジェクト
locationオブジェクト
というように
Web Worksでは、純粋なロジック部分のみ
処理する
DOM操作ができないため
並列実行される複数の処理が原因
で
ページを書き換えることがない
DOM処理は、Web Worksの呼び出しもとで行う
また、Web WorksからJavascriptファイルを
読み込んで実行できるので
ライブラリみたいな感覚で
Javascriptが使えるようになる

Web Worksとは
Web Worksは、Javascriptをバックグラウンドで複数同時に実行する機能
かつて、Javascriptは、簡単名処理が多く
瞬時に終わるものだったけど
HTML5あたりから
アプリが作れるぐらい要求されたりする
実際、ハイブリッドアプリ
phone gap
titanium studio
などで作成されるものは
HTML5
Javascript
CSS3
で作成されるものもある
こうなると、問題はJavascriptの処理速度
画像ファイル
ファイル解析
これらは、非常に時間がかかる
このため、ブラウザーが止まったり
反応しない時間が長いと、
ブラウザーでscriptを中止しますか？
とダイアログがでたりする
こんなときに、使えるのが
バックグラウンドで並列処理する
Web Works
これならブラウザーが、停止しないし
処理に時間がかかっても
停止するダイアログが表示かれない
これは、Web Worksが処理がおわったら
呼び出し音もとに伝達する仕組みのため

デスクトップからドラッグ&ドロップ
ウィンドウのdropイベントと
dragoverイベントのみ、イベントハンドラを設定し
ブラウザーでのデフォルトアクションが動作しないようにする
evt.preventDefault();
のとこが該当
次に、デスクトップからの画像のドロップについて
デスクトップからファイルがドロップされると
dataTransferオブジェクトのfiles配列へ
ドロップされたファイルのオブジェクトが入る
今回は、画像ファイルのみを対象にした
ソースは
var fileList=evt.dataTransfer.files;
//ドロップされたファイル数
for(var i=0;i