1. File API:
Writer & Directories and System
天野 卓 @ ToI企画
2011.7.23

2. 自己紹介
佐久市でWebアプリケーションを開発しています。
フリーソフトウェアを配布しています
http://tec.toi-planning.net
GitHub
http://github.com/usualoma
jsdo.it
http://jsdo.it/usualoma

3. 今日紹介する JavaScirpt の API
File API: Writer
File API: Directories and System

4. http://platform.html5.org/

5. http://platform.html5.org/

6. ところで...

7. http://platform.html5.org/

8. File API

9. File API とは
ファイルを JavaScript 上で扱うための仕様
ユーザーが指定したファイルの情報を取得
ファイル名
ファイルサイズ
指定されたファイルを読み込み
サポートしているブラウザ
Firefox 3.6以降
Google Chrome 6以降
Opera 11.50で確認
window.URL は利用できない

10. File API のインターフェイス
FileList
Blob
File
FileReader / FileReaderSync
URI scheme

11. File API のインターフェイスの説明 - 1
FileList
<input type="file" multiple /> で指定されたファイル
の一覧
Blob
"データ"を扱うインターフェイス
範囲を指定してバイナリのチャンクを取得できる
Fileの親インターフェイス
File
ファイル名と最終更新日時の取得

12. File API のインターフェイスの説明 - 2
FileReader / FileReaderSync
エンコーディングを指定してテキストとして読み込むこと
ができる
バイナリデータとして読み込むことができる
URI scheme
Blob のURLを生成することができる
選択されたファイルのプレビューなど

13. 注意事項
// プレフィックスが必要な場合があります
var BlobBuilder =
window.BlobBuilder ||
window.MozBlobBuilder ||
window.WebKitBlobBuilder;
var URL = window.URL || window.webkitURL;
var requestFileSystem =
window.requestFileSystem ||
window.webkitRequestFileSystem;

14. File API を使ったコード

15. File API を使ったコード
$('#show_file').submit(function() {
for (var i = 0; i < this.file.files.length; i++) {
var file = this.file.files[i];
print('name:' + file.name);
print('size:' + file.size);
print('type:' + file.type);
if (isImage(file.type)) {
printImage(URL.createObjectURL(file));
}
}
return false;
});

16. File API を使ったコードの実行結果

17. Drag and drop
は？

18. http://platform.html5.org/

19. Drag and drop API
function receive(event, element) {
var data = event.dataTransfer.items;
for (var i = 0; i < data.length; i += 1) {
if (
(data[i].kind == 'file') &&
(data[i].type.match('^image/'))
) {
var img = new Image();
img.src = URL.createObjectURL(data[i].getAsFile());
element.appendChild(img);
}
}
}

20. File API: Writer とは
ファイルに書き込むための仕様
File API で定義されている File/Blob は変更すること
ができなかった
サポートしているブラウザ (全ての機能が使えるわ
けではない)
Firefox 6以降
Google Chrome 9以降 (起動オプションが必要)
--unlimited-quota-for-files
--allow-file-access-from-files

21. File API: Writer のインターフェイス
BlobBuilder
FileSaver
FileWriter
FileWriterSync

22. File API: Writer のインターフェイスの説明
BlobBuilder
バイナリデータの構築
FileSaver
Blob をファイル名を指定して保存
FileWriter / FileWriterSync
length, position
write, seek, truncate

23. File API: Writer を使ったコードのイメージ
var bb = new BlobBuilder();
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
bb.append(createCSVRow(row));
}
// window.saveAs は 2011/7/23 時点ではまだ利用できません
var fileSaver =
window.saveAs(bb.getBlob('text/csv'), 'date.csv');

24. File API: Directories and System とは
ファイルシステムにアクセスするための仕様
ただし、任意のファイルにアクセスすることはできない
データのストレージとして利用することができる
オリジン毎のサンドボックスが用意される
オリジン = プロトコル + ドメイン + ポート
サポートしているブラウザ
Google Chrome 9以降 (オプションを付けると利用可
能)
--unlimited-quota-for-files
--allow-file-access-from-files

25. File API: D & S のインターフェイス
LocalFileSystem / LocalFileSystemSync
FileSystem
Entry
DirectoryEntry
DirectoryReader
FileEntry

26. File API: D & S でファイルを保存

27. File API: D & S でファイルを保存 - 1
$('#save_file').submit(function() {
for (var i = 0; i < this.file.files.length; i++) {
saveFile(this.file.files[i]);
}
return false;
});

28. File API: D & S でファイルを保存 - 2
function saveFile(selected) {
requestFileSystem(PERSISTENT, 1024 * 1024,
function(fs) {
printAnchor(fs.root.toURL());
fs.root.getDirectory('data', { create: true },
function(dir) {
printAnchor(dir.toURL());
dir.getFile(selected.name, { create: true },
function(file) {
printAnchor(file.toURL());

29. File API: D & S でファイルを保存 - 3
file.createWriter(function(writer) {
writer.onwrite = function(e) {
if (isImage(selected.type)) {
printImage(file.toURL());
}
};
writer.onerror = function(e) {
log('error: ' + e);
};
var bb = new BlobBuilder();
bb.append(selected);
writer.write(bb.getBlob());
});

30. File API: D & S でファイルの一覧を取得 - 1
$('#find').click(function() {
requestFileSystem(PERSISTENT, 1024 * 1024,
function(fs) {
traverse(fs.root);
}
);
return false;
});

31. File API: D & S でファイルの一覧を取得 - 2
function traverse(dir) {
var reader = dir.createReader();
reader.readEntries(
function(entries) {
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
printAnchor(entry.toURL());
if (entry.isDirectory) {
traverse(entry);
}
}
},
function(e) {
log('error: ' + e);
}
);
}

32. Writer & Directories and System の使い所
ログの保存
追記していくことができるので
"moveTo" などでローテーションもできそう
メールアプリケーションのキャッシュ
大きなファイルを保存することができる
CMS のオフラインでの下書き機能
ストレージ的な利用

33. ストレージ
といえば

34. Web Storage

35. http://platform.html5.org/

36. Web Storage との比較
モダンなブラウザでは基本的には利用可能
保存できるデータの容量が基本5Mまで
StorageEvent が使える
変更の検知
簡単
setItem / getItem
仕様上はオブジェクトをそのまま保存できる
2011/7/23時点ではオブジェクトを保存できるブラ
ウザはない

37. まとめ
File API: Writer & Directories and System
ファイルシステムをストレージとして利用可能にする
API
ウェブアプリケーションの可能性が広がる
大きなファイルを扱うアプリケーション
オフラインで編集を行うアプリケーション

38. ソースコード
File API
https://gist.github.com/dad2bb6bd1061ab712f7
File API: Writer & Directories and System
https://gist.github.com/f6e62d8416ea4bdd0fe4

39. ご清聴ありがとうご
ざいました。
Powered by Rabbit 0.9.3