home ホーム search 検索 -  login ログイン  | reload edit datainfo version cmd icon diff delete  | help ヘルプ

技術/HTML5/FileSystemAPI (v1)

技術/HTML5/FileSystemAPI (v1)

技術 / HTML5 / FileSystemAPI (v1)
id: 1045 所有者: msakamoto-sf    作成日: 2011-12-25 22:08:53
カテゴリ: HTML 

FileSystem API のサンプルとメモ。

参考：

サンプル

2011年末現在、Chromeでしか動作しないものの、サンプルを作って見ました。

習作1

PersistentとTemporaryの二種類のストレージに、"foo.txt"という名前のファイルをRead/Writeします。
PC用(Chrome専用)です。

t_filesystem_01.html: 


<!DOCTYPE html>
<html>
<head><title>File System API demo</title></head>
<body>
<h2>File System API Demos</h2>
<h3>Persistent File System</h3>
<a href="#" onclick="showPersistentRoot();return false;">show Persistent Root</a><br>
<textarea id="p_text" rows="5" cols="40"></textarea><br>
<a href="#" onclick="saveToPersistent();return false;">save to Persistent "foo.txt"</a><br>
<a href="#" onclick="loadFromPersistent();return false;">load from Persistent "foo.txt"</a><br>
<div id="p_content"></div>


<h3>Temporary File System</h3>
<a href="#" onclick="showTemporaryRoot();return false;">show Temporary Root</a><br>
<textarea id="t_text" rows="5" cols="40"></textarea><br>
<a href="#" onclick="saveToTemporary();return false;">save to Temporary "foo.txt"</a><br>
<a href="#" onclick="loadFromTemporary();return false;">load from Temporary "foo.txt"</a><br>
<div id="t_content"></div>

<script>
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

// {{{ errorHandler

function errorHandler(e)
{
  var msg = '';
  switch (e.code) {
    case FileError.QUOTA_EXCEEDED_ERR:
      msg = 'QUOTA_EXCEEDED_ERR';
      break;
    case FileError.NOT_FOUND_ERR:
      msg = 'NOT_FOUND_ERR';
      break;
    case FileError.SECURITY_ERR:
      msg = 'SECURITY_ERR';
      break;
    case FileError.INVALID_MODIFICATION_ERR:
      msg = 'INVALID_MODIFICATION_ERR';
      break;
    case FileError.INVALID_STATE_ERR:
      msg = 'INVALID_STATE_ERR';
      break;
    default:
      msg = 'Unknown Error';
      break;
  };

  console.log('Error: ' + msg);
}

// }}}
// {{{ wrapChromePersistentQuota

function wrapChromePersistentQuota(fun)
{
  window.webkitStorageInfo.requestQuota(
    window.PERSISTENT, 
    1024*1024, 
    function(grantedBytes) {
      window.requestFileSystem(PERSISTENT, grantedBytes, fun, errorHandler);
    },
    errorHandler
    );
}

// }}}

function showFSInfo(fs) {
  alert(fs.name + "\n" + fs.root.name + "\n" + fs.root.fullPath);
}

function showPersistentRoot() {
  wrapChromePersistentQuota(showFSInfo);
}

function showTemporaryRoot() {
  window.requestFileSystem(window.TEMPORARY, 0, showFSInfo, errorHandler);
}

// {{{ saveToPersistent

function saveToPersistent()
{
  wrapChromePersistentQuota(
      function(fs){
      fs.root.getFile("foo.txt", {create: true}, 
        function(fileEntry) {
        alert("fullpath=" + fileEntry.fullPath);
        fileEntry.createWriter(
          function(writer) {
          writer.onwrite = function(evt) { alert("success"); }
          var data = document.getElementById("p_text").value;
          //var bb = new BlobBuilder();
          var bb = new WebKitBlobBuilder();
          bb.append(data);
          writer.write(bb.getBlob('text/plain'));
          },
          errorHandler
          );
        }, 
        errorHandler
        );
      });
}

// }}}
// {{{ loadFromPersistent

function loadFromPersistent()
{
  wrapChromePersistentQuota(
      function(fs){
      fs.root.getFile("foo.txt", {}, 
        function(fileEntry) {
        fileEntry.file(function(file) {
          var reader = new FileReader();
          reader.onloadend = function(e) {
          var txtArea = document.getElementById('p_content');
          txtArea.innerText = this.result;
          };
          reader.readAsText(file);
          }, 
          errorHandler);
        }, errorHandler);
      });
}

// }}}
// {{{ saveToTemporary

function saveToTemporary() {
  window.requestFileSystem(window.TEMPORARY, 1024*1024, 
      function(fs){
      fs.root.getFile("foo.txt", {create: true}, 
        function(fileEntry) {
        alert("fullpath=" + fileEntry.fullPath);
        fileEntry.createWriter(
          function(writer) {
          writer.onwrite = function(evt) { alert("success"); }
          var data = document.getElementById("t_text").value;
          var bb = new WebKitBlobBuilder();
          bb.append(data);
          writer.write(bb.getBlob('text/plain'));
          },
          errorHandler
          );
        }, 
        errorHandler
        );
      }, errorHandler);
}

// }}}
// {{{ loadFromTemporary

function loadFromTemporary()
{
  window.requestFileSystem(window.TEMPORARY, 1024*1024, 
      function(fs){
      fs.root.getFile("foo.txt", {}, 
        function(fileEntry) {
        fileEntry.file(function(file) {
          var reader = new FileReader();
          reader.onloadend = function(e) {
          var txtArea = document.getElementById('t_content');
          txtArea.innerText = this.result;
          };
          reader.readAsText(file);
          }, 
          errorHandler);
        }, errorHandler);
      }, errorHandler);
}

// }}}

</script>
</body>
</html>

習作2

スマホ用のブラウザでの検証。
日記/2011/12/11/MonacaとPhoneGapでファイル操作してみた。 参照。

メモ

  • 習作1では、PersistentとTemporaryで同じファイル名にRead/Writeしてみたが、それぞれ独立していた。
    • Persistentではリロードしてもファイル内容が維持されていたが、Temporaryのファイルはリロードにより消去される。
    • Chrome上では「高度な設定」→「コンテンツの設定」→「全てのCookitとサイトのデータ...」で「ファイルシステム」として確認できる。
  • 習作1を異なるドメインに配置してアクセスしてみたところ、同じファイル名にRead/Writeしているが、それぞれ独立していた。
    • サブドメインを使ったアクセス制御が可能かどうかは未調査・未検証。iframe中での使用についても同様。
  • 習作1では fullpath が PersistentもTemporaryも "/" となっていたが、習作2では "/sdcard" などローカルのパス名が露出している。
  • スマホでは"LocalFileSystem.PERSISTENT", "LocalFileSystem.TEMPORARY"としてアクセスしたが、PC用では"window."に直す必要があったり、Chrome用では window.webkitRequestFileSystem を使用する必要があったりと、ブラウザの対応状況によってオブジェクトの階層がずれている。

感想：

  • callback関数を多段で渡していくので、プログラミングが直感的でなく、可読性が落ちる。
    • 将来的にjQueryなどでスマートにラップされるようにはなると思うが・・・というか、なってほしい。
  • スマホの場合にSDカード領域にかなり自由にアクセスできそうなので、悪意のあるJavaScriptを考慮すると、将来的にはPC用Chromeと同様のSandBox化を行なって欲しい。というかぶっちゃけありえなーい。

プレーンテキスト形式でダウンロード
表示中のバージョン : 1
現在のバージョン : 2
更新者: msakamoto-sf
更新日: 2013-07-28 16:33:55
md5:7a9bf04325829ecb213980690813fdaf
sha1:c6497995cffa32e636545e5e03d9619397e3bfea
コメント
コメントを投稿するにはログインして下さい。
2020-09-05
技術/"暗号技術入門"読書メモ
2019-05-06
日記/2019/05/06/減量終了、4/18時点の結果
2019-05-03
技術/Security/OAuth
2019-03-31
日記/2019/03/31/AC7の攻略メモ
2019-02-09
技術/HTML/SVG参考メモ
2019-01-13
日記/2019/01/13/ソースコードの内面化
2019-01-12
Java/JREをバンドルしたJavaのパッケージング、あるいはインストーラの作成(2019-01時点参考URLメモ)
日記/2019/01/12/"HTTPS" Proxy (クライアントとプロキシの間もSSL使うタイプ)
2019-01-06
Java/diff(差分検出アルゴリズム)のJava実装調査メモ
2019-01-05
Java/Markdown処理系, asciidoc処理系のURLメモ
2019-01-04
Java/Maven3/Version Range "[3.0.0, 3.1.0)" などの表記について
Java/Quartz Job Scheduler 参考メモ
技術/Security/mitmproxy (Python製 HTTP/1, HTTP/2, WebSocket プロキシ) (URLメモ)
2019-01-03
日記/2019/01/03/Slackへのソフトウェアリリース情報収集の勉強メモ
2019-01-02
Java/"Google Java Style" とビルドシステムからの一括フォーマッタ "Spotless" 関連メモ
Java/Java8u60でのラムダ式引数名のリフレクション対応を活用したクールなMapビルダーの参考URLメモ
日記/2019/01/02/IntelliJ IDEA の雰囲気を掴む
日記/2019/01/02/ブログとYakiBikiの今後について
2019-01-01
Java/IntelliJ IDEA/プラグイン参考メモ(2018-12時点調査段階)
Java/Springでの Server-Sent Events, WebSocket 参考メモ(2018-12月頃)
最新コメント10件
2009-03-21 by msakamoto-sf

プレーンテキスト形式でダウンロード