このページの本文へ

ブラウザーにファイルを残せるFile system APIの使い方 (3/5)

2012年04月17日 11時00分更新

文●古籏一浩

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

ファイルを作成する

 新しいファイルを作成してみましょう。最初に空のファイルを作成し、その後、ファイルに内容を書き込む方法を解説します。

 ファイル/ディレクトリ処理には、window.webkitRequestFileSystem()メソッドを使い、以下の順番で引数を指定します。処理する内容によっては引数が意味をなさないものもあります。

  1. 種類(TEMPORARYかPERSISTENT)
  2. 容量をバイト数で指定
  3. 成功時に呼び出される関数
  4. 失敗時に呼び出される関数

 今回は永続的にデータを保存する意味がないので、すべて一時的(TEMPORARY)とします。ファイルの作成は、3.に指定する関数内で処理します。成功時に呼び出される関数にはファイルシステムオブジェクトが渡されるので、このファイルシステムオブジェクトをベースにしてさまざまメソッドを使って処理をしていきます。

 ルートディレクトリにファイルを作成してみましょう。ファイルはfs.root.getFile()で作成します。fsはファイルシステムオブジェクト、rootはルートディレクトリを示します。

 fs.root.getFile()メソッドには以下の順番で引数を指定します。

  1. 作成するファイル名
  2. オプション。新規作成は{ create: true }
  3. 成功時に呼び出される関数
  4. 失敗時に呼び出される関数

 作成するファイル名は拡張子を含みます。新規にファイルを作成する場合は2番目の引数に{ create: true }を指定します。exclusiveオプションにtrueを指定すると、すでにファイルが存在する場合にファイルを作成しません(エラー処理の関数が呼び出されます)。falseを指定するとファイルの有無にかかわらず作成されます。

 3.で指定した関数には、ファイルエントリー(オブジェクト)が渡されます。ファイルエントリーオブジェクトには以下のプロパティ/メソッドがあります。

プロパティ

isFile ファイルかどうか。ファイルならtrue。そうでなければfalse
isDirectory ディレクトリかどうか。ディレクトリならtrue。そうでなければfalse
name ファイル名(拡張子含む)
fullPath ファイルのフルパス
filesystem ファイルシステムオブジェクト

メソッド

getMetadata() メタデータの取得
moveTo() ファイルの移動
copyTo() ファイルのコピー
toURL() filesystem:~形式に変換
remove() ファイル削除
getParent() 親ディレクトリの取得
createWriter() ファイルへの書き込み
file() ファイルオブジェクトを取得

 実際にファイルを作成するプログラムはサンプル3です。サンプル3では以下のように作成したファイルのファイルパスとファイル名を表示しています。


fs.root.getFile(filename, { create: true },
  function(fileEntry){
    var text = "ファイルパス:"+fileEntry.fullPath+"<br>";
    text += "ファイル名:"+fileEntry.name+"<br>";
    document.getElementById("result").innerHTML = text;
  },
  function(err){  // 失敗時のコールバック関数
    document.getElementById("result").innerHTML = "ファイル生成エラー!!<br>"+err;
  }
);
【図】fig6.png

ファイル名とサイズを入力しボタンをクリックするとファイルが作成される。ファイルが作成されるとファイル名とフルパスが表示される

■サンプル3


<!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="fsFilename" value="abc.txt"></p>
      <p>サイズ:<input type="text" id="fsSize" value="1024" size="8">バイト</p>
      <input type="button" value="ファイルを作成" id="createFile">
    </form>
    <output id="result" ></output>
    <script>
      // クリックされたらファイルを作成する(中身は空っぽ)
      document.getElementById("createFile").addEventListener("click", function(){
        var size = document.getElementById("fsSize").value;
        window.webkitRequestFileSystem(
          TEMPORARY,  // 一時的(テンポラリ)
          size,  // 確保するサイズ
          function(fs){ // 成功時のコールバック関数
            // ファイルを生成
            var filename = document.getElementById("fsFilename").value;
            fs.root.getFile(filename, { create: true },
              function(fileEntry){
                var text = "ファイルパス:"+fileEntry.fullPath+"<br>";
                text += "ファイル名:"+fileEntry.name+"<br>";
                document.getElementById("result").innerHTML = text;
              },
              function(err){  // 失敗時のコールバック関数
                document.getElementById("result").innerHTML = "ファイル生成エラー!!<br>"+err;
              }
            );
          },
          function(err){  // 失敗時のコールバック関数
            document.getElementById("result").innerHTML = "エラー!!<br>"+err;
          }
        );
      }, false);
    </script>
  </body>
</html>

この連載の記事

一覧へ

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