2011/5/18

Javascript API のパワーアップ

File API

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

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

Drag&Drop API

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

#f00
#0f0
#00f
dotted

Message :
Event :


HTML の記述

使い方としては、ドラッグさせたい要素に 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 解説

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

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

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

worker.js の解説

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

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

この記事に関するお問い合せ

株式会社クーシー 担当:三上
TEL:019-656-0003 E-mail:mikami@coosy.co.jp

HTML5の研究活動一覧へ戻る
COOSY Inc. Head Office : F Nissei Ebisu Bldg.7F 3-16-3 Higashi Shibuya-ku,Tokyo,Japan Laboratory : IPU Innovation Center 2-7, 152-409 Sugo Takizawa-shi,Iwate,Japan

Top of Page