日記/2011/12/11/MonacaとPhoneGapでファイル操作してみた。 (v1)

日記 / 2011 / 12 / 11 / MonacaとPhoneGapでファイル操作してみた。 (v1)

id: 1044 所有者: msakamoto-sf 作成日: 2011-12-11 21:18:58
カテゴリ: Android

MonacaとPhoneGap触って見ました。使用OSはAndroid。

Monaca - クラウドベースのネイティブアプリ開発環境
- http://monaca.mobi/
PhoneGap
- http://phonegap.com/

で、ローカルファイルシステムはどうなってるんだろうかと。

基本的にW3CのFile APIを使うようになってるみたいです。
こんなのをHTML側の適当なボタンから呼び出して動作を確認してみます。


function showFSInfo(fs) {
    alert(fs.name + "\n" + fs.root.name + "\n" + fs.root.fullPath);
}

function fsdemo01persistent() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, showFSInfo, null);
}

function fsdemo01temporary() {
    window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, showFSInfo, null);
}

function fsdemo02write() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, 
        function(fs){
            fs.root.getFile("foo.txt", {create: true}, 
                function(fileEntry) {
                    alert("fullpath=" + fileEntry.fullPath);
                    fileEntry.createWriter(
                        function(writer) {
                            writer.onwrite = function(evt) { alert("success"); }
                            writer.write("Hello");
                        },
                        function(fileError) { alert(fileError.code); }
                        );
                }, 
                function(fileError) { alert(fileError.code); }
                );
        }, 
        function(fileError) { alert(fileError.code); }
        );
}

function fsdemo03write_temp() {
    window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, 
        function(fs){
            fs.root.getFile("bar.txt", {create: true}, 
                function(fileEntry) {
                    alert("fullpath=" + fileEntry.fullPath);
                    fileEntry.createWriter(
                        function(writer) {
                            writer.onwrite = function(evt) { alert("success"); }
                            writer.write("This is temporary file.");
                        },
                        function(fileError) { alert(fileError.code); }
                        );
                }, 
                function(fileError) { alert(fileError.code); }
                );
        }, 
        function(fileError) { alert(fileError.code); }
        );
}

アプリケーション名：myApp
パッケージ名：your.app.name
でデバッグ版でビルドします。

LocalFileSystem.PERSISTENTで取得したrootは、"/mnt/sdcard"になってました。単にroot.nameだけだと"sdcard"が返されます。
LocalFileSystem.TEMPORARYで取得したrootは、"/mnt/sdcard/Android/data/your.app.name/cache"になってました。単にroot.nameだけだと"cache"が返されます。
foo.txtは"/mnt/sdcard/foo.txt"として無事"Hello"が書きこまれました。
bar.txtは"/mnt/sdcard/Android/data/your.app.name/cache/bar.txt"として無事"This is..."が書きこまれました。
細かい使い方とか、PhoneGap側のDocumentだけじゃ足りなくて、W3Cのサイト見つつになるのが大変。
- File API: Directories and System
  - http://www.w3.org/TR/file-system-api/

この辺、PhoneGapの仕様としてそうなっているのか、Monaca独自のカスタマイズでそうなっているのかは不明です。
ただ、sdcardに保存されるという点から、あんまり重要情報は保存したくないなぁという感じです。他のアプリからも読み書き出来てしまいますので・・・。

FileSystem以外の感想としては、

jQueryとかjQuery Mobileの機能も使うので、調べ物が大変。とはいえ学習曲線での初期コストと考えれば、慣れの問題か。
外部のURLリンクを置いてみてクリックしたところ、Android標準ブラウザが起動した。独自のWebサイトをPhoneGap(Monaca)内のWebViewで表示するとかは出来るか謎。
外部との通信はXHRになるみたいだけど、SameOriginPolicyとかどう扱われるのか謎。
PhoneGapの標準機能で物足りない場合は、Pluginという形でそれぞれのPlatformに応じたNativeコードを組み込んで拡張できるみたいです。Monacaが対応できるのかする予定はあるのかは不明。
- http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
JavaScriptって『簡単』なのかなぁ・・・？
console.log()とかが、自分のHTC S31HT (E-Mobile)では動作しないよぉ・・・。

他、参考サイト：