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

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

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

http://platform.html5.org/

http://platform.html5.org/

ところで...

http://platform.html5.org/

File API

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

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

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

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

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

File API を使ったコード

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;
});

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

Drag and drop
は？

http://platform.html5.org/

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);
}
}
}

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

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

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

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');

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

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

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

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;
});

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());

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());
});

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

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);
}
);
}

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

ストレージ
といえば

Web Storage

http://platform.html5.org/

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

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

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

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