Text Write & Read & Delete

Chrome でサーバーから起動して下さい。
"/hoge.txt" が「出力/入力/削除」されます。


【Source Code】
<button onclick="TextWrite()">Text Write</button>
<button onclick="TextRead()">Text Read</button>
<button onclick="Delete()">File Delete</button>

<script type="text/javascript">
function TextWrite()
{   writeToLocal("/hoge.txt", "Write Text File\nhoge.txt\nTest Data");
}
function TextRead()
{   readToLocal("/hoge.txt");
}
function Delete()
{   deleteToLocal("/hoge.txt");
}
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;
    };
    window.alert('Error: ' + msg);
}
function writeToLocal(filename, content)
{   // chrome以外は弾く
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf('chrome') == -1)
    {   alert("This Page is Google Chrome only!");
    }
    // クオータを要求する。TEMPORARYの場合は直接 webkitRequestFileSystem を呼んでよい
    webkitStorageInfo.requestQuota(PERSISTENT, 1024,
        webkitRequestFileSystem(PERSISTENT, 1024, fsCallback, errorHandler), errorHandler);
    function fsCallback(fs)
    {   fs.root.getFile(filename, {create: true},
            function(fileEntry)
            {   fileEntry.createWriter(function(fileWriter)
                {   fileWriter.onwriteend =
                        function(e)
                        {   alert("Success! : " + fileEntry.fullPath);
                        };
                    fileWriter.onerror = function(e)
                                         {   alert("Failed: " + e);
                                         };
                    var output = new Blob([content], {type: "text/plain"});
                    fileWriter.write(output);
                }, errorHandler);
            }, errorHandler);
    }
}
function readToLocal(filename)
{   window.webkitRequestFileSystem(window.PERSISTENT, 0,
        function(fs)
        {   fs.root.getFile(filename, {},
                function(fileEntry)
                {   fileEntry.file(
                        function(file)
                        {   var reader = new FileReader();
                            reader.onload =
                                function()
                                {   window.alert(this.result);
                                }
                            reader.readAsText(file);
                        });
                }, errorHandler);
        }, errorHandler);
}
function deleteToLocal(filename)
{   window.webkitRequestFileSystem(window.PERSISTENT, 0,
        function(fs)
        {   fs.root.getFile(filename, {create: false},
                function(fileEntry)
                {   fileEntry.remove(
                        function()
                        {   window.alert("File Delete! : " + filename);
                        },
                        errorHandler);
                },
                errorHandler);
        },
        errorHandler);
}
</script>

ファイル出力

  1. HTML5 から File API が使えるようになり、ローカルのファイルをブラウザ上で直接取り扱えるようになりました。
    ファイルの入力は比較的簡単ですが作成するのは結構面倒で、最初の難所が RequestFileSystem() 関数です。
    RequestFileSystem() 関数の説明は RequestFileSystem を参照して下さい。
    私は 2015/09/27 Windows8 & Chrome 45.0.2454.99 でこのページの実行を確認しました。
  2. errorHandler(e) 関数では、エラーが発生した状況を多少なりとも解析して表示しています。
    function errorHandler(e)
    {   var msg = '';
        switch(e.code)
        {   case FileError.QUOTA_EXCEEDED_ERR:
                msg = 'QUOTA_EXCEEDED_ERR';
                  ・
                  ・
                  ・
    
  3. Text Write ボタンをクリックすると TextWrite() 関数が呼ばれて、ローカルファイルが作成されます。
    "/hoge.txt" がファイル名で、"Write Text File\nhoge.txt\nTest Data" が書き込まれるテキストデータです。
    <button onclick="TextWrite()">Text Write</button>
    
    function TextWrite()
    {   writeToLocal("/hoge.txt", "Write Text File\nhoge.txt\nTest Data");
    }
    
  4. 2015/09/27 現在の所、動くのは chrome だけのようなのでそれ以外は弾いています。
    function writeToLocal(filename, content)
    {   // chrome以外は弾く
        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf('chrome') == -1)
        {   alert("This Page is Google Chrome only!");
        }
    
  5. TEMPORARY の場合は必要ありませんが、PERSISTENT で出力する場合はクオータを要求する必要があります。
    最初に承認されれば、次回からは不要です。
    承認が得られれば webkitRequestFileSystem() 関数を実行します。
    1024 がファイルのサイズで、fsCallback が成功したときの関数で、errorHandler が失敗したときの関数です。
        // クオータを要求する。TEMPORARYの場合は直接 webkitRequestFileSystem を呼んでよい
        webkitStorageInfo.requestQuota(PERSISTENT, 1024,
            webkitRequestFileSystem(PERSISTENT, 1024, fsCallback, errorHandler), errorHandler);
    
  6. fsCallback() 関数で、RequestFileSystem が成功したときの処理を記述します。
    HTML5 の File API で扱うファイルは、ウイルスの感染や不正なファイルアクセスに対応するためにサンドボックス化された特殊な形式です。
    サンドボックス化された環境内のファイルは、FileEntry インターフェースによって表されます。
    fileEntry.createWriter() でファイルを作成します。
    成功すると alert("Success! : " + fileEntry.fullPath); が、失敗すると alert("Failed: " + e); が表示されます。
        function fsCallback(fs)
        {   fs.root.getFile(filename, {create: true},
                function(fileEntry)
                {   fileEntry.createWriter(function(fileWriter)
                    {   fileWriter.onwriteend =
                            function(e)
                            {   alert("Success! : " + fileEntry.fullPath);
                            };
                        fileWriter.onerror = function(e)
                                             {   alert("Failed: " + e);
                                             };
                        var output = new Blob([content], {type: "text/plain"});
                        fileWriter.write(output);
                    }, errorHandler);
                }, errorHandler);
        }
    }
    

ファイル入力

  1. Text Read ボタンをクリックすると TextRead() 関数が呼ばれて、ローカルファイルからデータが読みだされます。
    "/hoge.txt" がファイル名です。
    <button onclick="TextRead()">Text Read</button>
    
    function TextRead()
    {   readToLocal("/hoge.txt");
    }
    
  2. webkitRequestFileSystem() 関数を実行します。
    入力なので、ファイルサイズは 0 で構いません。
    new FileReader(); で FileReader を生成してファイルから入力します。
    入力した TEXT を window.alert(this.result); で表示します。
    function readToLocal(filename)
    {   window.webkitRequestFileSystem(window.PERSISTENT, 0,
            function(fs)
            {   fs.root.getFile(filename, {},
                    function(fileEntry)
                    {   fileEntry.file(
                            function(file)
                            {   var reader = new FileReader();
                                reader.onload =
                                    function()
                                    {   window.alert(this.result);
                                    }
                                reader.readAsText(file);
                            });
                    }, errorHandler);
            }, errorHandler);
    }
    

ファイル削除

  1. File Delete ボタンをクリックすると Delete() 関数が呼ばれて、ローカルファイルが削除されます。
    TEMPORARY の場合は放っておいてもブラウザが勝手に削除してくれますが、PERSISTENT の場合はクライアントが削除しなければ何時までも残っています。
    "/hoge.txt" がファイル名です。
    <button onclick="Delete()">File Delete</button>
    
    function Delete()
    {   deleteToLocal("/hoge.txt");
    }
    
  2. webkitRequestFileSystem() 関数を実行します。
    削除なので、ファイルサイズは 0 で構いません。
    fileEntry.remove() 関数でファイルを削除します。
    成功したときは window.alert("File Delete! : " + filename); を実行します。
    失敗したときは errorHandler を呼び出します。
    function deleteToLocal(filename)
    {   window.webkitRequestFileSystem(window.PERSISTENT, 0,
            function(fs)
            {   fs.root.getFile(filename, {create: false},
                    function(fileEntry)
                    {   fileEntry.remove(
                            function()
                            {   window.alert("File Delete! : " + filename);
                            },
                            errorHandler);
                    },
                    errorHandler);
            },
            errorHandler);
    }
    
  3. HTML5 の File API で扱うファイルは、ウイルスの感染や不正なファイルアクセスに対応するためにサンドボックス化された特殊な形式で、通常の Windows のファイルとは性質が異なります。
    このページではファイル(hoge.txt)を作成しているのですが、ウインドウ・エクスプローラでファイル名で検索しても見つかりません。
    サンドボックス化された環境内のファイルは、FileEntry インターフェースによって表されます。
    ファイル操作(出力/入力/削除/複製 etc)は、FileEntry インターフェースを通じて操作します。
  4. TEMPORARY ファイルの入出力は TEMPORARY FILE を参照して下さい。
    通常の Windows ファイルの入力は Read Text File を参照して下さい。
    jQuery Get で jQuery(ジェイクエリー)を使ったファイル入力を説明しています。
    File I-O で ActiveX を使ったファイルの入出力を説明しています。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)