File API:Writer & Directories and System      天野 卓 @ ToI企画        2011.7.23
自己紹介佐久市でWebアプリケーションを開発しています。フリーソフトウェアを配布しています  http://tec.toi-planning.netGitHub  http://github.com/usualomajsdo.it  http:...
今日紹介する JavaScirpt の APIFile API: WriterFile 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 ...
File API のインターフェイスFileListBlobFileFileReader / FileReaderSyncURI scheme
File API のインターフェイスの説明 - 1FileList  <input type="file" multiple /> で指定されたファイル  の一覧Blob  "データ"を扱うインターフェイス       範囲を指定してバイナリの...
File API のインターフェイスの説明 - 2FileReader / FileReaderSync  エンコーディングを指定してテキストとして読み込むこと  ができる  バイナリデータとして読み込むことができるURI scheme  Bl...
注意事項// プレフィックスが必要な場合がありますvar BlobBuilder =  window.BlobBuilder ||  window.MozBlobBuilder ||  window.WebKitBlobBuilder;var ...
File API を使ったコード
File API を使ったコード$(#show_file).submit(function() {   for (var i = 0; i < this.file.files.length; i++) {      var file = thi...
File API を使ったコードの実行結果
Drag and drop    は?
http://platform.html5.org/
Drag and drop APIfunction receive(event, element) {  var data = event.dataTransfer.items;  for (var i = 0; i < data.length...
File API: Writer とはファイルに書き込むための仕様 File API で定義されている File/Blob は変更すること ができなかったサポートしているブラウザ (全ての機能が使えるわけではない) Firefox 6以降 Go...
File API: Writer のインターフェイスBlobBuilderFileSaverFileWriterFileWriterSync
File API: Writer のインターフェイスの説明 BlobBuilder   バイナリデータの構築 FileSaver   Blob をファイル名を指定して保存 FileWriter / FileWriterSync   length...
File API: Writer を使ったコードのイメージvar bb = new BlobBuilder();for (var i = 0; i < rows.length; i++) {   var row = rows[i];   bb....
File API: Directories and System とは ファイルシステムにアクセスするための仕様  ただし、任意のファイルにアクセスすることはできない  データのストレージとして利用することができる  オリジン毎のサンドボックス...
File API: D & S のインターフェイスLocalFileSystem / LocalFileSystemSyncFileSystemEntryDirectoryEntryDirectoryReaderFileEntry
File API: D & S でファイルを保存
File API: D & S でファイルを保存 - 1$(#save_file).submit(function() {   for (var i = 0; i < this.file.files.length; i++) {      sa...
File API: D & S でファイルを保存 - 2function saveFile(selected) {  requestFileSystem(PERSISTENT, 1024 * 1024,    function(fs) {   ...
File API: D & S でファイルを保存 - 3   file.createWriter(function(writer) {      writer.onwrite = function(e) {         if (isImag...
File API: D & S でファイルの一覧を取得 - 1  $(#find).click(function() {     requestFileSystem(PERSISTENT, 1024 * 1024,       function...
File API: D & S でファイルの一覧を取得 - 2     function traverse(dir) {       var reader = dir.createReader();       reader.readEntri...
Writer & Directories and System の使い所   ログの保存    追記していくことができるので    "moveTo" などでローテーションもできそう   メールアプリケーションのキャッシュ    大きなファイルを...
ストレージといえば
Web Storage
http://platform.html5.org/
Web Storage との比較モダンなブラウザでは基本的には利用可能保存できるデータの容量が基本5MまでStorageEvent が使える 変更の検知簡単 setItem / getItem仕様上はオブジェクトをそのまま保存できる 2011/...
まとめFile API: Writer & Directories and System  ファイルシステムをストレージとして利用可能にする  API  ウェブアプリケーションの可能性が広がる    大きなファイルを扱うアプリケーション    ...
ソースコードFile API  https://gist.github.com/dad2bb6bd1061ab712f7File API: Writer & Directories and System  https://gist.github...
ご清聴ありがとうご  ざいました。      Powered by Rabbit 0.9.3
Upcoming SlideShare
Loading in …5
×

File API: Writer & Directories and System

5,490 views
5,234 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,490
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

File API: Writer & Directories and System

  1. 1. File API:Writer & Directories and System 天野 卓 @ ToI企画 2011.7.23
  2. 2. 自己紹介佐久市でWebアプリケーションを開発しています。フリーソフトウェアを配布しています http://tec.toi-planning.netGitHub http://github.com/usualomajsdo.it http://jsdo.it/usualoma
  3. 3. 今日紹介する JavaScirpt の APIFile API: WriterFile API: Directories and System
  4. 4. http://platform.html5.org/
  5. 5. http://platform.html5.org/
  6. 6. ところで...
  7. 7. http://platform.html5.org/
  8. 8. File API
  9. 9. File API とはファイルを JavaScript 上で扱うための仕様 ユーザーが指定したファイルの情報を取得 ファイル名 ファイルサイズ 指定されたファイルを読み込みサポートしているブラウザ Firefox 3.6以降 Google Chrome 6以降 Opera 11.50で確認 window.URL は利用できない
  10. 10. File API のインターフェイスFileListBlobFileFileReader / FileReaderSyncURI scheme
  11. 11. File API のインターフェイスの説明 - 1FileList <input type="file" multiple /> で指定されたファイル の一覧Blob "データ"を扱うインターフェイス 範囲を指定してバイナリのチャンクを取得できる Fileの親インターフェイスFile ファイル名と最終更新日時の取得
  12. 12. File API のインターフェイスの説明 - 2FileReader / FileReaderSync エンコーディングを指定してテキストとして読み込むこと ができる バイナリデータとして読み込むことができるURI scheme Blob のURLを生成することができる 選択されたファイルのプレビューなど
  13. 13. 注意事項// プレフィックスが必要な場合がありますvar BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder;var URL = window.URL || window.webkitURL;var requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
  14. 14. File API を使ったコード
  15. 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. 16. File API を使ったコードの実行結果
  17. 17. Drag and drop は?
  18. 18. http://platform.html5.org/
  19. 19. Drag and drop APIfunction 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. 20. File API: Writer とはファイルに書き込むための仕様 File API で定義されている File/Blob は変更すること ができなかったサポートしているブラウザ (全ての機能が使えるわけではない) Firefox 6以降 Google Chrome 9以降 (起動オプションが必要) --unlimited-quota-for-files --allow-file-access-from-files
  21. 21. File API: Writer のインターフェイスBlobBuilderFileSaverFileWriterFileWriterSync
  22. 22. File API: Writer のインターフェイスの説明 BlobBuilder バイナリデータの構築 FileSaver Blob をファイル名を指定して保存 FileWriter / FileWriterSync length, position write, seek, truncate
  23. 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. 24. File API: Directories and System とは ファイルシステムにアクセスするための仕様 ただし、任意のファイルにアクセスすることはできない データのストレージとして利用することができる オリジン毎のサンドボックスが用意される オリジン = プロトコル + ドメイン + ポート サポートしているブラウザ Google Chrome 9以降 (オプションを付けると利用可 能) --unlimited-quota-for-files --allow-file-access-from-files
  25. 25. File API: D & S のインターフェイスLocalFileSystem / LocalFileSystemSyncFileSystemEntryDirectoryEntryDirectoryReaderFileEntry
  26. 26. File API: D & S でファイルを保存
  27. 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. 28. File API: D & S でファイルを保存 - 2function 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. 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. 30. File API: D & S でファイルの一覧を取得 - 1 $(#find).click(function() { requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) { traverse(fs.root); } ); return false; });
  31. 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. 32. Writer & Directories and System の使い所 ログの保存 追記していくことができるので "moveTo" などでローテーションもできそう メールアプリケーションのキャッシュ 大きなファイルを保存することができる CMS のオフラインでの下書き機能 ストレージ的な利用
  33. 33. ストレージといえば
  34. 34. Web Storage
  35. 35. http://platform.html5.org/
  36. 36. Web Storage との比較モダンなブラウザでは基本的には利用可能保存できるデータの容量が基本5MまでStorageEvent が使える 変更の検知簡単 setItem / getItem仕様上はオブジェクトをそのまま保存できる 2011/7/23時点ではオブジェクトを保存できるブラ ウザはない
  37. 37. まとめFile API: Writer & Directories and System ファイルシステムをストレージとして利用可能にする API ウェブアプリケーションの可能性が広がる 大きなファイルを扱うアプリケーション オフラインで編集を行うアプリケーション
  38. 38. ソースコードFile API https://gist.github.com/dad2bb6bd1061ab712f7File API: Writer & Directories and System https://gist.github.com/f6e62d8416ea4bdd0fe4
  39. 39. ご清聴ありがとうご ざいました。 Powered by Rabbit 0.9.3

×