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

1 件のコメント:

  1. Mohon ijin berpromosi. service Ac segala jenis merk. kami service Ac mencakup wilayah coverage seluruh Surabaya, Gresik, Sidoarjo. kami juga menerima jasa service perbaikan AC bongkar dan pasang AC. pekerjaan kami cepat, tepat, profesional, harga kompetitif di banding harga jasa luaran.
    service ac split sidoarjo
    tukang service ac sidoarjo
    service ac surabaya sidoarjo
    service ac surabaya selatan
    service ac surabaya timur
    service ac surabaya barat
    service ac surabaya utara
    service ac kota surabaya

    SPLIT-TYPE AIR CONDITIONERS
    MULTI-SPLIT AIR CONDITIONERS
    CHILLED WATER FAN COIL UNITS
    VRF AIR CONDITIONERS
    CHILLERS
    WINDOW-TYPE AIR CONDITIONERS

    http://jualjasaacsurabaya.blogspot.com
    Segera hubungi kami, dan kami akan datang kerumah Anda 24 Jam Non Stop.
    (Hari Sabtu / Minggu / Hari Libur buka)
    PIN BBM : 54BE0B4B / 5474CD93 / TELP : 085645475574

    返信削除