• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
File API: Writer & Directories and System
 

File API: Writer & Directories and System

on

  • 5,252 views

 

Statistics

Views

Total Views
5,252
Views on SlideShare
5,249
Embed Views
3

Actions

Likes
0
Downloads
15
Comments
0

1 Embed 3

http://us-w1.rockmelt.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    File API: Writer & Directories and System File API: Writer & Directories and System Presentation Transcript

    • File API:Writer & Directories and System 天野 卓 @ ToI企画 2011.7.23
    • 自己紹介佐久市でWebアプリケーションを開発しています。フリーソフトウェアを配布しています http://tec.toi-planning.netGitHub http://github.com/usualomajsdo.it http://jsdo.it/usualoma
    • 今日紹介する 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 Chrome 6以降 Opera 11.50で確認 window.URL は利用できない
    • File API のインターフェイスFileListBlobFileFileReader / FileReaderSyncURI scheme
    • File API のインターフェイスの説明 - 1FileList <input type="file" multiple /> で指定されたファイル の一覧Blob "データ"を扱うインターフェイス 範囲を指定してバイナリのチャンクを取得できる Fileの親インターフェイスFile ファイル名と最終更新日時の取得
    • File API のインターフェイスの説明 - 2FileReader / 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 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); } }}
    • File API: Writer とはファイルに書き込むための仕様 File API で定義されている File/Blob は変更すること ができなかったサポートしているブラウザ (全ての機能が使えるわけではない) Firefox 6以降 Google Chrome 9以降 (起動オプションが必要) --unlimited-quota-for-files --allow-file-access-from-files
    • File API: Writer のインターフェイスBlobBuilderFileSaverFileWriterFileWriterSync
    • 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 / LocalFileSystemSyncFileSystemEntryDirectoryEntryDirectoryReaderFileEntry
    • 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 でファイルを保存 - 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());
    • 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/dad2bb6bd1061ab712f7File API: Writer & Directories and System https://gist.github.com/f6e62d8416ea4bdd0fe4
    • ご清聴ありがとうご ざいました。 Powered by Rabbit 0.9.3