<< Visual Studioでスマホのアプリを作る(Cordova)4 | main | Visual Studioでスマホのアプリを作る(Cordova)6 >>

Visual Studioでスマホのアプリを作る(Cordova)5

 

前回スマホのアプリを作る4ではいかにも簡単すぎるので、参考にならないと怒られそう

読んでもらっている人に申し訳ないので、もうすこし応用の効くアプリを作ってみます。

 

アプリとしては試験的に作った(プロトタイプ)もので、

完成されたものではありませんしアプリストアにも登録していません

自分だけのアプリを作って楽しみましょう。

 

仕様としては、(メモ帳アプリです)

テキストボックスからボタンを押すことでファイル(ローカルストレージ)に書き込む。

ボタンを押すことでファイルからテキストボックスに表示する。

ボタンを押すことでファイルを消去する。

の単純な機能です。

 

 

index.html

 

 

 

        <div class="app">
            <p id="deviceready" class="event">メモ帳:</p>
            <textarea id="myMemo" rows="10" cols="40">ここに記入してください。</textarea><br>
            <button id="writeFile">ファイル保存</button><br><br>
            <button id="readFile">ファイル呼込</button>
            <p >ファイルの内容:</p>
            <textarea id="textarea" rows="10" cols="40"></textarea>
            <button id="removeFile">ファイル削除</button>

        </div>

 

テキストボックス2つとボタンを3つ作り、javascriptで操作できるように、idを付けておきます。

 

index.css

CSSは最低限の文字の色しか指定していません

(あまりに地味なので、background-colorの色くらい変えた方がいいかも?)

 

index.js

 

 

12行目から14行目で

        document.getElementById("writeFile").addEventListener("click", writeFile);
        document.getElementById("readFile").addEventListener("click", readFile);
        document.getElementById("removeFile").addEventListener("click", removeFile);

 

ここで、index.htmlで作ったボタンを押した(click)ときの、イベント(処理)を書きます。

上から、ファイル保存、ファイル呼込、ファイル削除です。

 

ます、ファイルの書き込みです。

 

 

 

   function writeFile() {

        window.requestFileSystem(window.TEMPORARY, 10 * 1024, successCallback, errorCallback)

        function successCallback(fs) {

            fs.root.getFile('log.txt', { create: true, exclusive: false }, function (fileEntry) {

                fileEntry.createWriter(function (fileWriter) {
                    fileWriter.onwriteend = function (e) {
                        alert('書き込み成功');
                    };

                    fileWriter.onerror = function (e) {
                        alert('書き込み失敗' + e.toString());
                    };

                    var blob = new Blob([myMemo.value],{"type":"text/plain"});
                    fileWriter.write(blob);

                }, errorCallback);

            }, errorCallback);

        }

        function errorCallback(error) {
            alert("エラーです: " + error.code)
        }

    }

 

 

まず、ファイルとアラートを使うので、

cordovaにプラグインを追加します。

 

 

config.xmlをダブルクリックしてください。

 

 

cordova-plugin-fileとcordva-plugin-dialogsを使いますので、

プラグインを選んで、FileとNotificationをインストールしてください。

 

window.requestFileSystem(window.TEMPORARY, 10 * 1024, successCallback, errorCallback)

は、ファイルを使うときの宣言です。

 

window.TEMPORARYが保存形式です。TEMPORARYは一時的、 PERSISTENTが永続的です。

(永続的PERSISTENTにすると、その分のメモリー容量が確保されてしまいますので、一時的にしておいてください。)

10 * 1024は、ファイルの容量です。この場合10KBとなります。

successCallbackはこの命令が成功したときの処理(メソッド)です。

errorCallbackはこの命令が失敗したときの処理(メソッド)です。

 

つぎは、三つ目の成功したときの処理を書きます。

function successCallback(fs) {

 

ファイルにアクセスする.root.getFile の命令(メソッド)は

fs.root.getFile (ファイル名, オプション, 成功時に呼び出すメソッド[, 失敗時に呼び出すメソッド]);

※[ ]省略可

となってますので、

 

fs.root.getFile('log.txt', { create: true, exclusive: false }, function (fileEntry) {

 

1番目の'log.txt'はファイル名

 

2番目の{ create: true, exclusive: false }はオプションで create: trueは新規作成、

exclusive: false は新規作成するときすでにファイルがあってもエラーとしない(exclusive: trueはエラーとする)

 

3番目の成功時に行う処理(メソッド)はfunction (fileEntry)なので、ファイルにアクセスが成功すると、

fileEntry.createWriter(function (fileWriter) {以降のファイルの書き込みを実行します。

var blob = new Blob([myMemo.value],{"type":"text/plain"});

Blobはファイル形式で[myMemo.value]をセットします。
fileWriter.write(blob);

で書き込みをします。

 

その前の

                    fileWriter.onwriteend = function (e) {
                        alert('書き込み成功');
                    };

                    fileWriter.onerror = function (e) {
                        alert('書き込み失敗' + e.toString());
                    };

は、fileWriter.write(blob);を実行したときに成功(onwriteend)または、

失敗(onerror)したときに実行されるイベントです。

 

                }, errorCallback);

はfileEntry.createWriter(function (fileWriter)の(書き込み時)失敗時に呼び出すメソッド

 

            }, errorCallback);

はfs.root.getFilenの4番目の(アクセス時)失敗時に呼び出すメソッド

 

        function errorCallback(error) {
            alert("エラーです: " + error.code)
        }

は最初のエラーwindow.requestFileSystemのエラーの時の処理です。

 

ややこしくて、すみません

早い話、ファイルの定義、作成、オープン、書き込みです。

 

この「log.txt」ファイルは、ルートフォルダ(superuser)に作成されます。

なので、ルート権限がないと見れません。

 

ファイルの読み込みです。

 

 

    function readFile() {

        window.requestFileSystem(window.TEMPORARY, 10 * 1024, successCallback, errorCallback)

        function successCallback(fs) {

            fs.root.getFile('log.txt', {}, function (fileEntry) {

                fileEntry.file(function (file) {
                    var reader = new FileReader();

                    reader.onloadend = function (e) {
                        var txtArea = document.getElementById('textarea');
                        txtArea.value = this.result;
                    };

                    reader.readAsText(file);

                }, errorCallback);

            }, errorCallback);
        }

        function errorCallback(error) {
            alert("エラーです: " + error.code)
        }

    }   

 

ファイルの書き込みと同じです。

reader.readAsText(file);が成功すると、reader.onloadendの成功したときの処理がされます。

 

ファイルの削除です。

 

 

    function removeFile() {

        window.requestFileSystem(window.TEMPORARY, 10 * 1024, successCallback, errorCallback)

        function successCallback(fs) {
            fs.root.getFile('log.txt', { create: false }, function (fileEntry) {

                fileEntry.remove(function () {
                    alert('ファイル消去');
                    textarea.value = "";
                }, errorCallback);

            }, errorCallback);
        }

        function errorCallback(error) {
            alert("エラーです: " + error.code)
        }

    }   

 

ここも同じです。ファイルの消去が成功したとき、テキストボックスも消去してます。

 

下は、

実機で実行して、買い物リストを入力、保存したのち

ファイルの呼び出した例

 

 

ちょっと、配置が悪い気がします。入力のテキストボックスと出力のテキストボックスを

入れ替えたほうが見やすいかも?

配置や背景色、文字の色や大きさなどは、自由に変えて作ってみてください。

 

このプログラムの問題点:

スマホでの実行では問題ありませんが、

Chromeでデバックすると、前に入力した文字数より、あとで入力文字数が少ないと、

 

前に入力:あああああ

次に入力:いい

 

だと、ファイル呼び出した時:いいあああ

とになってします。

 

どうしても気になる方は、

function writeFile() {

ファイルの書き込みのところの

 

fileWriter.onwriteend = function () { };

fileWriter.truncate(blob.size);

を書き加えてください。

 

fileWriter.truncate(blob.size);はファイルの終わりを書きこみます。

fileWriter.onwriteend = function () { };は上の命令を実行すると

自動的に発生してしまうfileWriter.onwriteend命令を空の関数で実行します。

 

これ以外にも、

ローカルファイルを使う方法で、ストレージ(cookieみたいなもの)

に保存する方法もあります。

 

いずれにしても、ファイルが使えると、プログラミングの幅が広がります。

 

次はgoogle Chromeのrippleやonsen UIについて書いてます。

 

その6に続く

 

 

JUGEMテーマ:プログラミング

| Cordova | 15:00 | comments(0) | trackbacks(0) |
Comment









Trackback
url: トラックバック機能は終了しました。

07
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--
Profile
New entries
Archives
Categories
Recent comment
カウンター


今日
昨日
レンタルサーバ/プロバイダー




ファッション
カタログ通販ベルーナ(Belluna)

イマージュ - IMAGEアウトレットセール
yahoo・その他


買い物
ビックカメラ.com



Mobile
qrcode
Links
Others
無料ブログ作成サービス JUGEM