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.3Powered by Rabbit 0.9.3

ご清聴ありがとうございました。