みなさん,お久しぶりです.
大学院修士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 件のコメント:
コメントを投稿