HTML5のWebローカルファイル(コルドバで)

 

何をテーマにしようか迷っています。

Unityにしようか、Xamarinにしようかとも思いましたが、

初心者には、あまりにも複雑そうです。

(最低でもC#やAndroid,iOSの知識が必要)

コードを書く前に、環境設定で挫折しそうな気がします。

(自信のある人はUnityで作ってみてください。説明をする自信はありませんが、かなり面白いです。)

 

なので、このブログの趣旨にあわないので、基本に戻ってHTML5とjavascriptにしておきます。

現在は、これを使えばかなりのソフトウェアは作ることができますし、

なにしろ、敷居が低い(プラウザさえあればプログラムが動く)のが初心者向けです。

 

コルドバの続きで、ちょっと、書いたCookieのようなローカルファイルの保存方法です。

Webストレージとよばれ、Javascriptで操作することができます。

HTML5の仕様で、最新のプラウザなら使用できます。

前回のものを、ローカルストレージ(永続的なもの)に書き換えてみました。

 

index.html

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" href="css/onsenui.css">
        <link rel="stylesheet" href="css/onsen-css-components.min.css">
        <script src="scripts/frame/onsenui.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
        <title>BlankCordovaApp2</title>
    </head>
<body>
    <ons-page>
        <ons-toolbar fixed-style>
            <div class="center">メモ帳</div>
        </ons-toolbar>
        <ons-tabbar position="bottom">
            <ons-tab page="tab1.html" label="shop" active></ons-tab>
            <ons-tab page="tab2.html" label="name"></ons-tab>
            <ons-tab page="tab3.html" label="other"></ons-tab>
        </ons-tabbar>
    </ons-page>
    <template id="tab1.html">
        <ons-page id="Tab1">
            <div style="background-color:#FFFFCC">
                <ons-button id="readFile1">買 物</ons-button><br>
                <textarea id="myMemo1" rows="17" cols="40"></textarea><br>
                <ons-button id="cls1">画面クリア</ons-button><br><br>
                <ons-button id="writeFile1">保 存</ons-button><br>
            </div>
        </ons-page>
    </template>
    <template id="tab2.html">
        <ons-page id="Tab2">
            <div style="background-color:#FFCCCC">
                <ons-button id="readFile2">名 前</ons-button><br>
                <textarea id="myMemo2" rows="17" cols="40"></textarea><br>
                <ons-button id="cls2">画面クリア</ons-button><br><br>
                <ons-button id="writeFile2">保 存</ons-button><br>
            </div>
        </ons-page>
    </template>
    <template id="tab3.html">
        <ons-page id="Tab3">
            <div style="background-color:#FF99CC">
                <ons-button id="readFile3">そ の 他</ons-button><br>
                <textarea id="myMemo3" rows="17" cols="40"></textarea><br>
                <ons-button id="cls3">画面クリア</ons-button><br><br>
                <ons-button id="writeFile3">保 存</ons-button><br>
            </div>
        </ons-page>
    </template>
</body>
</html>

 

上をコピーアンドペーストすると

 

となります。

続けて、

 

index.jsは、

 

ons.ready(function () {
    document.getElementById("writeFile1").addEventListener("click", writeFile1);
    document.getElementById("writeFile2").addEventListener("click", writeFile2);
    document.getElementById("writeFile3").addEventListener("click", writeFile3);
    document.getElementById("readFile1").addEventListener("click", readFile1);
    document.getElementById("readFile2").addEventListener("click", readFile2);
    document.getElementById("readFile3").addEventListener("click", readFile3);
    document.getElementById("cls1").addEventListener("click", cls1);
    document.getElementById("cls2").addEventListener("click", cls2);
    document.getElementById("cls3").addEventListener("click", cls3);
    function cls1() { myMemo1.value = ""; }
    function cls2() { myMemo2.value = ""; }
    function cls3() { myMemo3.value = ""; }
    function writeFile1() {
        var id = confirm("上書きしてもいい?");
        if (id == true) {
            var key = "kaimono";
            var value = document.getElementById("myMemo1").value;
            if (key && value) {
                localStorage.setItem(key, value);
                ons.notification.alert("保存しました");
            }
        }
        else {
            ons.notification.alert('取り消しました');
        }
    }
    function writeFile2() {
        var id = confirm("上書きしてもいい?");
        if (id == true) {
            var key = "namae";
            var value = document.getElementById("myMemo2").value;
            if (key && value) {
                localStorage.setItem(key, value);
                ons.notification.alert("保存しました");
            }
        }
        else {
            ons.notification.alert('取り消しました');
        }
    }
    function writeFile3() {
        var id = confirm("上書きしてもいい?");
        if (id == true) {
            var key = "sonota";
            var value = document.getElementById("myMemo3").value;
            if (key && value) {
                localStorage.setItem(key, value);
                ons.notification.alert("保存しました");
            }
        }
        else {
            ons.notification.alert('取り消しました');
        }
    }
    function readFile1() {
        var data = localStorage.getItem("kaimono");
        var txtArea = document.getElementById('myMemo1');
        txtArea.value = data;
    }
    function readFile2() {
        var data = localStorage.getItem("namae");
        var txtArea = document.getElementById('myMemo2');
        txtArea.value = data;
    }
    function readFile3() {
        var data = localStorage.getItem("sonota");
        var txtArea = document.getElementById('myMemo3');
        txtArea.value = data;
    }
})

 

上をコピーアンドペーストすると、

 

 

となります。

実行すると、保存方法が変わっただけで、動きは前回とまったく同じです。

 

LocalStorageは、

localStorage.setItem(key, value) はkeyにvalueを保存

localStorage.getItem(key) はkeyのデータを取得

今回使ってませんが、

localStorage.removeItem(key) はkeyのデータを削除

localStorage.clear() は全件削除

localStorage.length はkeyの数を返す

です。

その他の機能については、ネットで調べてください。

 

前と比べてもらえばわかりますが、すごくスッキリしています。

WebStorageを使うと、簡単に端末(ブラウザ)毎にデータを残す事ができます。
データを保存したい時や、ローカル端末にデータを残したい時などに使えそうです。

容量については、いろんな説明がありますが、4MBくらいは大丈夫そうです。

ただ、セキュリティには、問題があり、それなりのプログラマーなら内容を見ることができます。

なので、見られても問題のない場合に使ってください。

 

次は、VisualStudioでダウンロードできる、Python3(パイソン)を使って何か作ってみたいと思います。

 

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

 

 

| Cordova | 09:51 | comments(0) | trackbacks(0) |

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

 

前回からの続きです。

 

前回までで、一通りの説明は終わりましたので、

あとは、自由に好きなプログラミングをするだけです。

 

今回は、応用編ということになります。

なので、あまり説明はつけませんので、わからないところは、

申し訳ありませんが自分で調べてください。

 

前回までは、試験的なプログラム(プロトタイプ)なので、

実際にしばらく自分で使ってみて、使いやすいように直してみました。

 

 

変更点は、上の実行画面を見てもらえばわかるとおり、

表示画面を1つにまとめ、ボタンは2つにしました。

また、メモがひとつでは足りないので、買い物リスト、名前の覚え及びその他の3画面作りました。

これは、高齢者になると忘れやすい(出てきません!)名前や買い物リストを独立させました。

画面クリアのボタンを作りました。

 

上の(買物)ボタンは、ファイルがなければ、エラーメッセージ、あれば保存されているファイルを表示します。

保存ボタンはファイルがなければ、作成しますし、あれば上書きします。

なのでなにも入力せず保存ボタンを押すと内容が消えます。

そのため、保存ボタンを間違って押して消してしまわないように、確認のアラートを付けました。

 

index.htmlは、

 

変更点

12から15行目にscriptを集めました。(Mustではありません。この方がコードがきれい)

25から29行目が画面下のツールバーです。

34行目でバックグラウンドの色を指定しています。(Mustではありません。あった方がきれい)

あとは、画面が3つあるので、2つ追加しました。

長く見えるけど同じものをコピーしただけです。(もちろん名前は変えてありますが)

 

下は2ページ目:

 

 

index.cssはほとんど使わないので、触らなくてもいいです。

(Mustではありませんが、名前だけは残しておいてください。)

 

index.jsは、

 

20から22、33から35行目は、画面クリアです。

38,39,58から60行目はが違って保存しないように確かめます。

 

 

2画面分追加してます。

ただし、2画面目、3画面目は保存ボタンのを押しても確認のアラートはでません

(実際には、何も入力せずに保存ボタンは押しません。心配な人は、38,39,58から60行目と同様に

       var id = confirm("上書きしてもいい?");
        if (id == true) { }

        else { ons.notification.alert('取り消ししました'); }

を入れておいてください。)

これも、長く見えるけど同じものをコピーしただけです。

 

ファイルがの読み込みは、3つにしただけです。

下は、3画面目

 

 

あとは、小技で、アイコンと名前を変えてみます。

 

 

androidの場合は、res,iconsにアイコンが入っていますので、

上書きします。

を、上のアイコンに書き換えました。(これでよければ、右クリックで保存して使ってください。

ただし、名前の変更をしてから上書きしてください。)

 

また、config.xmlの表示名をnewmemoに書き換えました。

 

すると、下のようにアプリらしく表示されます。

 

 

 

ちょっと、プログラムを知っているひとなら、1日もあれば、気軽にスマホのアプリがつくれるはずです。

 

あとは、あなたの発想次第です。

 

次では、Webstorageを使って同じことをしてみます。

 

 

 

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

| Cordova | 07:09 | comments(0) | trackbacks(0) |

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

 

前回の続きです。

 

Visual Studio 2017でのcordovaで、Onsen UIテンプレートの使い方です。

 

別にOnsen UIでなくてもよかったのですが、解説が一番わかりやすかったので、

その解説のまねをして、書いてみました。

 

Onsenの概要については、Onsen UIをはじめよう!のホームページを見てください。

 

まず、上のホームページからOnsen UIをダウンロードしてください。

 

 

OnsenUI-dist-2.5.X.zipのようなフォルダです。(随時バージョンアップしてます)

ダウンロードしたら、解凍しておいてください。

 

あとは、説明にあるように、

css/onsenui.css

css/onsen-css-components.min.css

onsenui.min.js

をindex.htmlの<head>にリンクしていきます。

 

 

上のように配置してください。

CSSに追加の仕方は、ソリューションエクスプローラの

CSSフォルダを右クリックして、追加、既存の項目を選んでください。

 

 

最初にダウンロードした、OnsenUIフォルダのCSSフォルダの

onsen-css-components.min.cssを選んで追加ボタンを押してください。

続いて、同様にonsenui.cssも追加を行ってください。

 

 

同様に、scripsも新規フォルダの作成、

 

 

ここでは、一応、frameという名前をつけてください。(ほんとは何でもいいです)

 

前と全く同じで、作ったframeフォルダに、ダウンロードした、OnsenUIフォルダのjsフォルダの

onsenui.min.jsを追加してください。

 

 

あとは、Onsen-UIのコードを書くだけです。

 

Onsenの解説のとおり、前々回つくったものに付け加えてみます。

 

 

        <link rel="stylesheet" href="css/onsenui.css">
        <link rel="stylesheet" href="css/onsen-css-components.min.css">

        <script src="scripts/frame/onsenui.min.js"></script>

 

では、最初に登録した、onsenui.cssとonsen-css-components.min.cssをリンクして

onsenui.min.jsを実行します。

 

        <ons-page>
            <ons-toolbar>
                <div class="center">メモ帳</div>
            </ons-toolbar>

 

<ons-page>はひとつのページのかたまりの始めを表します。

<ons-toolbar>でツールバーを作ります。

 

                <ons-button modifier="large" id="writeFile">ファイル保存</ons-button><br><br>
                <ons-button modifier="large" id="readFile">ファイル呼込</ons-button>

 

で、Onsen UIのボタンを作っています。

 

</ons-page>

 

でページの終わりを表します。

 

実行すると、次のようになります。

 

 

(上では、タイトルが左よせになっていますが、androidの場合はデフォルトで左寄せになるため

中央になりません。解決策は見つけ次第お知らせします。iPhoneでは大丈夫だと思います。)

なんとなく、アプリっぽくなってきました。

 

Onsenでは、かなりサンプルも充実していますので、

それを自分に合わせて改変すれば、かなりのものができますし

プログラムの初心者でも、スマホのアプリが作れると思います。

 

まとめに、最後は、自分用にカスタマイズしたメモ帳のプログラムを載せておきます。

ちょっと、修正すればだれでも、自分用のアプリになるようにする予定です。

 

次回その8につづく

 

 

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

| Cordova | 15:24 | comments(0) | trackbacks(0) |

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

 

前回までで、一応終わる予定でしたが、またアプリを作るかもしれませんので、

 

Visual Studio 2017のcordovaで、Debug時のChrome Ripplesエミュレータの使い方

 

Visual Studio 2017でのcordovaで、Onsen UIテンプレートの使い方

 

について、自分の覚えとして書いておきます。

 

今回もあまりウェブ上で資料がなかったため、ほかにいい方法があるかもしれません。

 

まず、Visual Studio 2017のcordovaでDebug時のChrome Rippleエミュレータの使い方です。

Visual Studio 2017のcordovaでは、 Rippleエミュレータの表示がありません。

なので、まず、プラウザでのシュミレータを実行します。

 

 

 

Chromeプラウザで表示されますので、その設定を変更します。

 

 

設定を開き、一番下の詳細設定を表示して、ユーザー補助機能を追加を選ぶ、

 

 

 

Chromeウェブストアが表示されます。

 

 

 

ripplesで検索して(拡張機能にして)Ripple Emulator(Beta)をChromeに追加してください。

 

 

 

追加すると、バーにアイコンができますので、クリックしてEnableボタンを押してください。

 

最初にPlatformを設定する画面が出ますので、Apache Cordova 2.0を選んでください。

 

 

これでDebugが、Visual Studio 2015のように実機に近い見た目で使えるようになります。

 

自分のスマホと見た目が違うばあいは、Devicesの画面の表示数を変えてみてください。

 

 

 

その他、いろいろな機能がありますので、試してみてください。

 

思いのほか、説明が長くなりましたので、Onsen UIの説明については、次回とします。

 

その7に続く

 

 

 

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

| Cordova | 16:33 | comments(0) | trackbacks(0) |

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) |

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