Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,763 views

Published on

  • Be the first to comment

  • Be the first to like this

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

×