Chromeで実ファイルの読み書きをする[導入編]

みなさん，お久しぶりです．
大学院修士1年の古谷です．

今日はChrome Packaged Apps を使った，ファイルの読み書きを簡単なテキストエディタを例に説明します．
まずは，Packaged Appsについて紹介します．

Packaged Appsとは

Packaged Appsで書かれたアプリケーションは，OSや端末に関わらず利用できます．
MacでもWindowsでもLinuxでもGoogle Chromeが動けば，同じアプリケーションを利用できます．

Chromeで動作するアプリケーションは主に HTMLとJavaScriptで記述します．
manifest.jsonなどの基本的なことは，前回の記事とほぼ同じですので参考にしてくださいね．

実際に作ってみる

簡単なエディタを作成します．
今回はこれらのファイルを作成しました．

application.html

エディタのHTMLです

application.js

ファイルの読み出し、書き込みを行います

backgroud.js

アプリケーションの起動時に呼び出されて、application.htmlを起動します

jquery-1.9.1.min.js

JavaScriptライブラリです

manifest.json

アプリケーションの権限などの設定を指定ます

application.js

application.js の一部からファイルへの書き込み，読み出しについて切り抜いて説明します．

    chrome.fileSystem.chooseEntry({
        type : 'openFile'
    }, function(entry){
        fileEntry = entry;

        entry.file(function(file){
            var reader = new FileReader();
            reader.onerror = function(e){
                console.error("Read failed...");
            };
            reader.onloadend = function(e){
                console.log(e);
                $("#text").val(e.target.result);
            };
            reader.readAsText(file);                
        })
    });
});

chrome.fileSystem.chooseEntry では，ユーザにファイルを選択してもらうダイアログを出します． 第2引数の関数に，ここで選ばれたファイルが渡されています．

entry.file では，fileEntryからファイルを取り出します．これは(俗にいう)HTML5のFile APIを用いて読み出しができます．

text = "abcdef";
chrome.fileSystem.getWritableEntry(fileEntry, function(writableFileEntry) {
    writableFileEntry.createWriter(function(fwriter){
        fwriter.onwriteend = function(e){
            console.log("Ok Writed");
        };
        fwriter.onerror = function(e){
            console.error("Write failed...")
        };
        fwriter.write(new Blob([text], {type: 'text/plain'}));
    }, function(e){
        console.error("Write failed...")
    });
});

chrome.fileSystem.getWritableEntryは，第1引数のfileEntryから書き込み可能なfileEntryを取り出します．
書き込み可能なfileEntryから，Writterを生成し，書き込むことができます．

つかってみる

インストールをするとこのような画面が立ち上がります．

ファイルを選択をクリックしてファイルを選択すると，ファイルの中身を編集できます．
ファイルを開いて，中身を表示したところです．
これで簡単なテキストエディタが実装出来ました．ただし，これはChromeを立ち上げている間のみ有効です．
永続的に書き込めるようにする方法は，次回にしたいと思います．

https://github.com/fuya/chrome-app-filesystem-textにソースコードを上げました．
記事では，ソースコードの一部分だけ表示しました．完全なソースはこちらにあります．