このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第88回

File system APIでブラウザーで動くファイラーを作る

2012年05月28日 10時01分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 Webブラウザー内に独自のファイルやディレクトリを保存できる「File system API」の使い方ついて、前回の記事に続き解説します。ファイルの作成/削除やディレクトリの作成/削除方法については前回紹介しましたので、今回は一覧の取得やファイルへの書き込み/読み込み方法を学び、簡易ファイラーを完成させましょう。

ディレクトリ内のファイル/ディレクトリ一覧を取得する

 ディレクトリ内のファイル/ディレクトリ一覧を取得します。

 ファイル/ディレクトリ一覧を取得するには、ディレクトリエントリーオブジェクトのcreateReader()メソッドを使ってディレクトリリーダーオブジェクトを生成します。

 readEntries()メソッドは、第1引数に指定した関数に、ファイル/ディレクトリの一覧情報を渡します。関数にはファイルエントリーオブジェクト/ディレクトリエントリーオブジェクトを格納した配列が渡されますので、この配列の内容を読み出すことでファイル/ディレクトリの一覧を表示できます。また、readEntries()メソッドの第2引数には、一覧が取得できなかったときに呼び出す関数を指定できます。

 実際のプログラムはサンプル7です。サンプル7ではファイル/ディレクトリ一覧を以下のようにしてページ上に出力しています。


var dirReader = dirEntry.createReader();
dirReader.readEntries(
  function(list){
    // 表示先の内容を消去
    document.getElementById("result").innerHTML = "";
    // ファイル/ディレクトリの数だけ繰り返し
    for(var i=0; i<list.length; i++){
      var text = document.getElementById("result").innerHTML;
      if (list[i].isFile){  // ファイルの場合
        text += "[F]";
      }else{
        text += "[D]";
      }
      text += list[i].name+"<br>";
      document.getElementById("result").innerHTML = text;
    }
  }
【図】fig12.png
ルートディレクトリ内の一覧が表示される。[F]はファイル、[D]はディレクトリを示している

■サンプル7


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content= "initial-scale=1">
    <title>一覧を作成する</title>
  </head>
  <body>
    <h1>一覧を作成する</h1>
    <form>
      <p>ディレクトリ名:<input type="text" id="fsDirname" value="/"></p>
      <input type="button" value="一覧を作成" id="createList">
    </form>
    <output id="result" ></output>
    <script>
      // クリックされたらディレクトリ内の一覧を作成する
      document.getElementById("createList").addEventListener("click", function(){
        window.webkitRequestFileSystem(
          TEMPORARY,  // 一時的(テンポラリ)
          0,    // 確保するサイズ
          function(fs){ // 成功時のコールバック関数
            // 一覧を生成
            var dirname = document.getElementById("fsDirname").value;
            fs.root.getDirectory(dirname, {},
              function(dirEntry){
                var dirReader = dirEntry.createReader();
                dirReader.readEntries(
                  function(list){
                    // 表示先の内容を消去
                    document.getElementById("result").innerHTML = "";
                    // ファイル/ディレクトリの数だけ繰り返し
                    for(var i=0; i<list.length; i++){
                      var text = document.getElementById("result").innerHTML;
                      if (list[i].isFile){  // ファイルの場合
                        text += "[F]";
                      }else{
                        text += "[D]";
                      }
                      text += list[i].name+"<br>";
                      document.getElementById("result").innerHTML = text;
                    }
                  },
                  function(err){  // 失敗時のコールバック関数
                    document.getElementById("result").innerHTML = "一覧エラー!!<br>"+err;
                  }
                );
              },
              function(err){  // 失敗時のコールバック関数
                document.getElementById("result").innerHTML = "一覧取得エラー!!<br>"+err;
              }
            );
          },
          function(err){  // 失敗時のコールバック関数
            document.getElementById("result").innerHTML = "エラー!!<br>"+err;
          }
        );
      }, false);
    </script>
  </body>
</html>

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング