2013年7月23日火曜日

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にソースコードを上げました.
記事では,ソースコードの一部分だけ表示しました.完全なソースはこちらにあります.

0 件のコメント:

コメントを投稿