[HTML5] File system API サンプル

カテゴリーから探す

年別から見る

2012/05/31

[HTML5] File system API サンプル

HTML5のFile system APIを試してみた。
現在はChromeしかサポートされていないが、
今後ブラウザがデスクトップになることになればブラウザごと(若しくはブラウザ間共通)のファイル管理が必要となる。
実務では使えないが、知っておいて損はないと思う。
demo

■HTML


<h1>オブジェクト一覧</h1>
<p id="result"></p>

<h1>ファイルを作成</h1>
<div class="f">
    <output id="result_file" ></output>
    <dl><dt>ファイル名：</dt><dd><input type="text" id="fsFilename" value="hoge.txt"></dd></dl>
    <dl><dt>書き込む内容：</dt><dd><textarea cols="30" rows="4" id="fsData">hogehogehogehogehogehogehogehoge!!!!!</textarea></dd></dl>
    <input type="button" value="作成" id="writeFile">
</div>

<h1>ディレクトリを作成</h1>
<div class="d">
    <output id="result_dir" ></output>
    <dl><dt>ディレクトリ名：</dt><dd><input type="text" id="fsDirname" value="hoge"></dd></dl>
    <input type="button" value="作成" id="createDir"> 
</div>

<h1>オブジェクト一覧</h1>

<h1>ファイルを作成</h1>

<dl><dt>ファイル名：</dt><dd><input type="text" id="fsFilename" value="hoge.txt"></dd></dl>

<dl><dt>書き込む内容：</dt><dd><textarea cols="30" rows="4" id="fsData">hogehogehogehogehogehogehogehoge!!!!!</textarea></dd></dl>

</div>

<h1>ディレクトリを作成</h1>

<dl><dt>ディレクトリ名：</dt><dd><input type="text" id="fsDirname" value="hoge"></dd></dl>

</div>

■JS
・オブジェクト取得


viewFileList();
function viewFileList()
{
    window.fsapi.getFiles( "/", function( list )
    {
        var text = "";
        for( var i = 0; i < list.length; i++ ) 
        {
            if ( list[i].isFile )
            {
                text += '<li class="f" onclick=viewFile("'+list[i].name+'")><span class="l">[F]' + list[i].name + '</span><span class="r" onclick=deleteFile("'+list[i].name+'")>[×]</span></li>'
            }
            else
            {
                text += '<li class="d"><span class="l">[D]' + list[i].name + '</span><span class="r" onclick=deleteDir("'+list[i].name+'")>[×]</span></li>'
            }
        }
        $( "#result" ).html( "<ul>" + text + "</ul>" );
    });
}

viewFileList();

function viewFileList()

{

window.fsapi.getFiles( "/", function( list )

{

var text = "";

for( var i = 0; i < list.length; i++ )

{

if ( list[i].isFile )

{

text += '<li class="f" onclick=viewFile("'+list[i].name+'")><span class="l">[F]' + list[i].name + '</span><span class="r" onclick=deleteFile("'+list[i].name+'")>[×]</span></li>'

}

else

{

text += '<li class="d"><span class="l">[D]' + list[i].name + '</span><span class="r" onclick=deleteDir("'+list[i].name+'")>[×]</span></li>'

}

$( "#result" ).html( "<ul>" + text + "</ul>" );

});

}

・ファイルの中身を取得


function viewFile( filename )
{
    window.fsapi.readText( filename, function()
    {
        $( "#fsFilename" ).val( filename );
        $( "#fsData" ).val( this.result );
    });
}

function viewFile( filename )

{

window.fsapi.readText( filename, function()

{

$( "#fsFilename" ).val( filename );

$( "#fsData" ).val( this.result );

});

}

・ファイル削除


function deleteFile( filename )
{
    if ( !confirm( "本当に削除しますか？" ) ) return;

    window.fsapi.removeFile(filename, function(){
        alert( "ファイルを削除しました" );
        viewFileList();
    });
}

function deleteFile( filename )

{

if ( !confirm( "本当に削除しますか？" ) ) return;

window.fsapi.removeFile(filename, function(){

alert( "ファイルを削除しました" );

viewFileList();

});

}

・ディレクトリ削除


function deleteDir( dirname )
{
    if ( !confirm( "本当にディレクトリ内を全て削除しますか？" ) ) return;

    window.fsapi.removeDir( dirname, function(){
        alert( "ディレクトリ内を全て削除しました" );
        viewFileList();
    });
}

function deleteDir( dirname )

{

if ( !confirm( "本当にディレクトリ内を全て削除しますか？" ) ) return;

window.fsapi.removeDir( dirname, function(){

alert( "ディレクトリ内を全て削除しました" );

viewFileList();

});

}

・ファイル更新と新規作成


    $( "#writeFile" ).click(function ()
    {
        window.webkitRequestFileSystem(
            TEMPORARY,
            1024,
            function( fs )
            {
                var filename = $( "#fsFilename" ).val();
                fs.root.getFile( filename, { create: true },
                    function( fileEntry )
                    {
                        fileEntry.createWriter(  // ファイル書き込み
                            function( fileWriter )
                            {
                                //成功
                                fileWriter.onwrite = function()
                                {
                                    $( "#result_file" ).html( "書き込み完了" );
                                    $( "#result_file" ).css( "display", "block" );
                                }
                                / エラー
                                fileWriter.onerror = function( err )
                                {
                                    $( "#result_file" ).html( "書き込みエラー：" + err );
                                    $( "#result_file" ).css( "display", "block" );
                                }

                                var blobData = new WebKitBlobBuilder();
                                var text = $( "#fsData" ).val();
                                blobData.append( text );
                                fileWriter.write( blobData.getBlob( "text/plain" ) ); // 標準テキストで書き込む
                            },
                            function( err )
                            {
                                $( "#result_file" ).html( "書き込み前エラー!!
" + err );
                                $( "#result_file" ).css( "display", "block" );
                            }
                        );
                    },
                    function( err )
                    {
                        $( "#result_file" ).html( "ファイル生成エラー!!
" + err );
                        $( "#result_file" ).css( "display", "block" );
                    }
                );
                viewFileList();
            },
            function( err )
            {  
                $( "#result_file" ).html( "エラー!!
" + err );
                $( "#result_file" ).css( "display", "block" );
            }
        );
    });

$( "#writeFile" ).click(function ()

{

window.webkitRequestFileSystem(

TEMPORARY,

1024,

function( fs )

{

var filename = $( "#fsFilename" ).val();

fs.root.getFile( filename, { create: true },

function( fileEntry )

{

fileEntry.createWriter( // ファイル書き込み

function( fileWriter )

{

//成功

fileWriter.onwrite = function()

{

$( "#result_file" ).html( "書き込み完了" );

$( "#result_file" ).css( "display", "block" );

}

/ エラー

fileWriter.onerror = function( err )

{

$( "#result_file" ).html( "書き込みエラー：" + err );

$( "#result_file" ).css( "display", "block" );

}

var blobData = new WebKitBlobBuilder();

var text = $( "#fsData" ).val();

blobData.append( text );

fileWriter.write( blobData.getBlob( "text/plain" ) ); // 標準テキストで書き込む

function( err )

{

$( "#result_file" ).html( "書き込み前エラー!!

" + err );

$( "#result_file" ).css( "display", "block" );

}

);

function( err )

{

$( "#result_file" ).html( "ファイル生成エラー!!

" + err );

$( "#result_file" ).css( "display", "block" );

}

);

viewFileList();

function( err )

{

$( "#result_file" ).html( "エラー!!

" + err );

$( "#result_file" ).css( "display", "block" );

}

);

});

・ディレクトリ新規作成


    $( "#createDir" ).click(function ()
    {
        var arr = $( "#fsDirname" ).val().split( "/" );
        if ( arr.length > 1 )
        {
            alert( "階層制御はできません。でも絶対できるようになります！" );
            return false;
        }

        window.webkitRequestFileSystem(
            TEMPORARY,
            0,
            function( fs ){
                var dirname = $( "#fsDirname" ).val();
                fs.root.getDirectory( dirname, { create: true },
                    function( dirEntry ){
                        var text = "ディレクトリパス：" + dirEntry.fullPath + "
";
                        text += "ディレクトリ名：" + dirEntry.name + "
";
                        $( "#result_dir" ).html( text );
                        $( "#result_dir" ).css( "display", "block" );
                    },
                    function( err )
                    {
                        $( "#result" ).html( "ディレクトリ生成エラー
" + err );
                        $( "#result_dir" ).css( "display", "block" );
                    }
                );
            },
            function( err ){
                $( "#result_dir" ).html( "なんかエラー!!
" + err );
                $( "#result_dir" ).css( "display", "block" );
            }
        );
        viewFileList();
    });

$( "#createDir" ).click(function ()

{

var arr = $( "#fsDirname" ).val().split( "/" );

if ( arr.length > 1 )

{

alert( "階層制御はできません。でも絶対できるようになります！" );

return false;

}

window.webkitRequestFileSystem(

TEMPORARY,

function( fs ){

var dirname = $( "#fsDirname" ).val();

fs.root.getDirectory( dirname, { create: true },

function( dirEntry ){

var text = "ディレクトリパス：" + dirEntry.fullPath + "

text += "ディレクトリ名：" + dirEntry.name + "

$( "#result_dir" ).html( text );

$( "#result_dir" ).css( "display", "block" );

function( err )

{

$( "#result" ).html( "ディレクトリ生成エラー

" + err );

$( "#result_dir" ).css( "display", "block" );

}

);

function( err ){

$( "#result_dir" ).html( "なんかエラー!!

" + err );

$( "#result_dir" ).css( "display", "block" );

}

);

viewFileList();

});

・APIと定義


window.fsapi = {};
window.fsapi.error = function( e ){ console.log( e ); }
window.fsapi.readText = function( filename, successFunc )
{
    window.webkitRequestFileSystem(
        TEMPORARY,
        0,
        function( fs )
        {
            fs.root.getFile( filename, {},
                function( fileEntry )
                {
                    fileEntry.file( function( file )
                    {
                        var reader = new FileReader();
                        reader.onload = successFunc;
                        reader.readAsText( file );
                    });
                },
                window.fsapi.error
            );
        },
        window.fsapi.error
    );
}

// ファイル削除
window.fsapi.removeFile = function( filename, successFunc )
{
    window.webkitRequestFileSystem(
        TEMPORARY,
        0,
        function( fs )
        { 
            fs.root.getFile( filename, {},
                function( fileEntry )
                {
                    fileEntry.remove( successFunc, window.fsapi.error );
                },
                window.fsapi.error
            );
        },
        window.fsapi.error
    );
}

// ディレクトリ一覧
window.fsapi.getFiles = function( dirname, successFunc )
{
    window.webkitRequestFileSystem(
        TEMPORARY,
        0,
        function( fs )
        {
            fs.root.getDirectory( dirname, {},
                function( dirEntry )
                {
                    var dirReader = dirEntry.createReader();
                    dirReader.readEntries( successFunc, window.fsapi.error );
                },
                window.fsapi.error
            );
        },
        window.fsapi.error
    );
}

// ディレクトリ削除
window.fsapi.removeDir = function( dirname, successFunc )
{
    window.webkitRequestFileSystem(
        TEMPORARY,
        0,
        function( fs )
        {
            fs.root.getDirectory( dirname, {},
                function( dirEntry )
                {
                    dirEntry.removeRecursively( successFunc, window.fsapi.error );
                },
                window.fsapi.error
            );
        },
        window.fsapi.error
    );
}

window.fsapi = {};

window.fsapi.error = function( e ){ console.log( e ); }

window.fsapi.readText = function( filename, successFunc )

{

window.webkitRequestFileSystem(

TEMPORARY,

function( fs )

{

fs.root.getFile( filename, {},

function( fileEntry )

{

fileEntry.file( function( file )

{

var reader = new FileReader();

reader.onload = successFunc;

reader.readAsText( file );

});

window.fsapi.error

);

window.fsapi.error

);

}

// ファイル削除

window.fsapi.removeFile = function( filename, successFunc )

{

window.webkitRequestFileSystem(

TEMPORARY,

function( fs )

{

fs.root.getFile( filename, {},

function( fileEntry )

{

fileEntry.remove( successFunc, window.fsapi.error );

window.fsapi.error

);

window.fsapi.error

);

}

// ディレクトリ一覧

window.fsapi.getFiles = function( dirname, successFunc )

{

window.webkitRequestFileSystem(

TEMPORARY,

function( fs )

{

fs.root.getDirectory( dirname, {},

function( dirEntry )

{

var dirReader = dirEntry.createReader();

dirReader.readEntries( successFunc, window.fsapi.error );

window.fsapi.error

);

window.fsapi.error

);

}

// ディレクトリ削除

window.fsapi.removeDir = function( dirname, successFunc )

{

window.webkitRequestFileSystem(

TEMPORARY,

function( fs )

{

fs.root.getDirectory( dirname, {},

function( dirEntry )

{

dirEntry.removeRecursively( successFunc, window.fsapi.error );

window.fsapi.error

);

window.fsapi.error

);

}

全ては
fileEntry
を理解出来ればマスターできる。

ファイルを読み込むときは
fileEntry.file(成功した時の処理, エラー処理)
とすれば良い。

削除するときは
FileEntry.removeすれば良い。
FileEntryはmoveTo、copyToなどよくあるメソッドを含んでいるので大変わかり易い。

ここに全部かいてあります。
http://dev.w3.org/2009/dap/file-system/pub/FileSystem/#the-fileentry-interface

■おまけ
ブラウザファイルシステム以外でローカルに値を保持できるのは、現在はクッキーだけだが、
イギリスでWebサイト運営者がユーザーにクッキーを埋め込む際、ユーザーの同意が必要になるらしい。
http://japan.cnet.com/news/service/35017539/

確かにそのほうがマナーが保たれる。
既存のアクセス解析やアフィリエイトシステムは改修が必要になる。

Author Profile

HOSHINO

ECのことを中心に書きたいと思います。ネタが無いときはプログラムやデザインのことも書きます。

2024/11/15

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

2024/10/25

Gulpを使ったプロジェクトの基本設定とSass導入手順

2024/10/11

Difyを用いたチャットボットを作成してみた

2024/09/13

Cloudflare Workersの実践的サンプルの紹介

Company

Our Solutions

Support

News

Blog

カテゴリーから探す

年別から見る

[HTML5] File system API サンプル

合わせて読みたい

2024/09/13

2024/08/30

2024/08/02

2024/07/19

2024/11/15

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/07/19

2024/11/15

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/07/19