home Glamenv-Septzen(ぐらめぬ・ぜぷつぇん)(archive)

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

作成日: 2011-12-11 21:18:58   /   last updated at: 2011-12-11 21:44:18
カテゴリ: Android 

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

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

基本的に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のサイト見つつになるのが大変。

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

FileSystem以外の感想としては、

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

他、参考サイト：

なんというか、N88-BASIC触ってるような感触を受けました。単純といえば単純なんだけど、アイデア次第で結構面白いの出来るんじゃないか、とか、プログラミングの入り口としても良さそうだな、とか。PhoneGapという制限範囲の中でどんな「捻り」を思いつくのかとか、そんな面白さがある気がします。

original url: https://www.glamenv-septzen.net/view/1044