Firefox3.6βで利用できるFile APIの可能性について

FileAPIとは？

HTML5関連のAPIです。これ。
http://www.w3.org/TR/FileAPI/

こんなことが出来る

• バイナリーで読み込める
• 文字列としても読み込める
• ただしローカルのファイルには保存が出来ない

フローの変化

１）今まで

1. ファイルをサーバに上げる
2. サーバで処理する
3. クライアントに表示
4. サーバを更新

２）FileAPIを使うと？

1. クライアントでファイルを処理
2. サーバを更新

シンプルなフローを実現することが可能になりますね。

サンプル

サンプルは、ソースファイルをただ表示するだけというシンプルなものです。

File APIでソースコードを表示するサンプル
※文字コードはUTF-8限定。

実はこのスクリプト、1秒おきに表示を更新しています。 書いている人が保存をするたびに表示が更新されるので、同じファイルを読み込める環境であればチームメンバーのコードの進捗状況を監視できるという素敵な（？）ツールとなっております。

それはさておき。

どうやってファイルを取得しているのか？

まずファイルを読み込むためのフォームを設置。

<input type="file" id="readfile" multiple="true" />

イベントか何かで以下を実行する。

var files = document.getElementById("readfile").files;
for (var i = 0; i < files.length; i++) {
	alert("[name]" + file[i].name + ", [text]" + file[i].getAsText("UTF-8"));
}

ファイル名とファイルの中身がアラートで表示されます。ファイル操作では定番のclose処理やロックなども不要です。CSVを取り込んで、そのままtable要素で表示するなども簡単。

ローカルに直接ファイルを保存することはできませんが、ローカルストレージを使うなど工夫することで、ブラウザ単体＋オフラインでも動くアプリは作れます。

File APIはブラウザの可能性（とJavaScriptプログラマーの負担）を大きく広げる仕様といえそうですね（でも楽しみ）。