2011/5/18

Javascript API のパワーアップ

File API

JS からファイル情報を取得することが可能になりました。
対応ブラウザ：Firefox、opera、chrome、safari

ファイル
ファイルの内容	ファイルの内容が表示されます

Drag&Drop API

Drag & Drop 処理を手軽に記述できるようになりました。
対応ブラウザ：Firefox、chrome、safari、IE

Message :
Event :

HTML の記述

<div class="dragdrop_sample bgRed" draggable="true">#f00</div> <div class="dragdrop_sample bgGrn" draggable="true">#0f0</div> <div class="dragdrop_sample bgBlu" draggable="true">#00f</div> <div class="bgArw">→</div> <div class="drop_sample bgDott" draggable="true">dotted</div>

使い方としては、ドラッグさせたい要素に draggable="true" の属性を追加させます。

Javascriptの解説

dragstart

要素がドラッグされる際に発生するイベントです。

dragend

要素がドロップされた際に発生するイベントです。

dragenter

ドラッグされている要素が要素内に入る際に発生するイベントです。

dragover

要素に対して、オブジェクトがドラッグされている間に発生するイベントです。
イベント関数の戻り値として true を返却することで、drop イベントの抑制が可能です。(発生させる場合は, false を返却する必要があります。)

drop

要素に対してドロップ処理が発生した際に発生するイベントです。

PostMessage API

クロスドメイン通信を実行するためのAPIです。
対応ブラウザ：Firefox、chrome、opera、safari、IE

Web Workers API

JS でバックグラウンド処理ができるようになりました。
通常、Javascript で処理負荷の高い計算処理を実行すると、処理が実行されている間はブラウザの操作ができない状態になってしまっていましたが、Web Workers API を使用して、負荷の高い処理をバックグラウンドで実行させることによって、ブラウザ側の操作をブロックせずに、負荷の高い処理を実行できるようになりました。

以下は、入力した数値のフィボナッチ数を計算するサンプルになります。
フィボナッチ数に関しては、フィボナッチ数 - Wikipediaを参照下さい。
対応ブラウザ：Firefox、chrome、safari、opera

HTML 解説

var w = new Worker("js/worker.js");

ワーカーを作成しています。
worker.js は外部JSファイルです。こちらに関しては後述します。

w.onmessage = function(e) { $('#webworker_sample_result').text(e.data); }; w.onerror = function(e) { alert(["error!! : ", e.lineno, e.filename, e.message].join("")); };

ワーカーからのメッセージを受け取った後の処理と、ワーカー側での処理実行中にエラーが発生した場合の処理を設定しています。

$('#webworker_sample').click(function() { $('#webworker_sample_result').text("calculating..."); w.postMessage($('#webworker_sample_fib').val()); });

ボタンクリック時の処理です。
ボタンがクリックされた場合 webworker_sample_result のID要素に calculating... のメッセージを表示し、postMessage メソッドを使用して、ワーカー側にメッセージを送信しています。

worker.js の解説

var fib = function(n) { if (n < 0) throw new Error("illegal arguments"); if (n == 0) return 0; if (n == 1) return 1; var callback = arguments.callee; var n1 = callback(n-1); var n2 = callback(n-2); return n1 + n2; }

フィボナッチ数を計算するためのメソッドです。
ちなみに、処理負荷をかけたかったので、あえてこういうコードにしてあります。
遅いコードですので、フィボナッチ数を求める処理の参考にはしないでください。。。

self.addEventListener('message', function(e) { var n = parseInt(e.data); var res = fib(n); postMessage("fib[" + n + "]:" + res); }, false);

ワーカーに対してメッセージが送信された際の処理を記述します。
引数で渡される e 変数の data プロパティに画面側から送信されたメッセージが格納されています。
ワーカー側→呼び出し側にメッセージを送信するには、postMessage 関数を用いて通知を行います。
ここで postMessage 関数を呼び出すと、Worker オブジェクトの onmessage メソッドが呼ばれます。