<< Visual Studioでスマホのアプリを作る(Cordova)8 | main | Visual StudioでPython(パイソン)を使ってみる1 >>

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