Downloaded 18 times
![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;
});](https://image.slidesharecdn.com/fileapiwriter-110723073240-phpapp01/75/File-API-Writer-Directories-and-System-15-2048.jpg)
![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);
}
}
}](https://image.slidesharecdn.com/fileapiwriter-110723073240-phpapp01/75/File-API-Writer-Directories-and-System-19-2048.jpg)
![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');](https://image.slidesharecdn.com/fileapiwriter-110723073240-phpapp01/75/File-API-Writer-Directories-and-System-23-2048.jpg)
![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;
});](https://image.slidesharecdn.com/fileapiwriter-110723073240-phpapp01/75/File-API-Writer-Directories-and-System-27-2048.jpg)
![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);
}
);
}](https://image.slidesharecdn.com/fileapiwriter-110723073240-phpapp01/75/File-API-Writer-Directories-and-System-31-2048.jpg)
File API: Writer & Directories and System
- 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.
- 5.
- 6.
- 7.
- 8.
- 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.
- 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.
- 17.
- 18.
- 19. Drag and dropAPI 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: Directoriesand 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 & Directoriesand System の使い所 ログの保存 追記していくことができるので "moveTo" などでローテーションもできそう メールアプリケーションのキャッシュ 大きなファイルを保存することができる CMS のオフラインでの下書き機能 ストレージ的な利用
- 33.
- 34.
- 35.
- 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