libro
www.tuyano.com
JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

設定の保存とバインディング (2/3)

作成:2012-12-01 14:07
更新:2012-12-01 14:15

■設定情報を保管してみる

では、実際に設定情報を保管してみましょう。下のリスト欄にそのサンプルを挙げておきます。ここでは、「color」「bgcolor」「size」といった項目の入力フィールドを用意し、これらに値を入力してボタンを押すと、それが設定情報として保存されるようにしています。そして次回アプリを起動した時には、その値が読み込まれ、上のテキストに設定されて表示されます。

ここでは、onactivatedの処理で設定情報の読み込みとメッセージタグへの設定処理を行い、ボタンクリック時のイベント処理で書き込みを行なってます。ただし、設定の読み込み・書き出し部分は関数に切り分けていますので、それぞれの関数部分をチェックすればわかるでしょう。では、重要な部分を抜き出して整理しておきましょう。

●ApplicationDataとApplicationDataContainerの用意
applicationData = Windows.Storage.ApplicationData.current;
localSettings = applicationData.localSettings;
if (!localSettings.containers.hasKey(container_key)) {
    localSettings.createContainer(container_key, 
        Windows.Storage.ApplicationDataCreateDisposition.Always);
    saveProperties({ 'color': 'white', 'bgcolor': 'black', 'fsize': 14 });
}
まずは、先ほど説明したApplicationDataとApplicationDataContainerの準備の部分です。currentでApplicationDataを取得し、localSettingsでApplicationDataContainerを取得します。そして、containers.hasKeyでcontainer_keyのコンテナがあるかどうかチェックし、ない場合にはcreateContainerで指定のキーのコンテナを作成しておきます。

●設定情報の読み込み
function loadProperties() {
    var c = localSettings.containers.lookup(container_key).
        values["color"];
    var bg = localSettings.containers.lookup(container_key).
        values["bgcolor"];
    var s = localSettings.containers.lookup(container_key).
        values["fsize"];
    return {'color':c, 'bgcolor':bg, 'fsize':s};
}
読み込みはloadPropertiesという関数にまとめてあります。containers.lookupでcontainer_keyというキーのコンテナを取得し、そのvaluesで"color"、"bgcolor"、"fsize"という値を取り出し、連想配列にまとめて返します。

●設定情報の書き出し
function saveProperties(props) {
    localSettings.containers.lookup(container_key).
        values["color"] = props.color;
    localSettings.containers.lookup(container_key).
        values["bgcolor"] = props.bgcolor;
    localSettings.containers.lookup(container_key).
        values["fsize"] = props.fsize;
}
書き出しはsaveProperties関数としてまとめてあります。こちらは連想配列で値を受け取り、それらをcontainers.lookup(container_key).valuesの値に保管します。読み込みと逆の操作をしているだけですね。

このように、必要な初期化処理、読み込み、書き出しといった基本がわかれば、設定情報の保存は割と簡単に行えるようになります。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※HTMLの<body>部分

<body>
    <h1 id="title">Sample Page</h1>
    <p id="msg">this is list sample page.</p>
    <table>
        <tr><th>color:</th><td><input type="text" id="color" /></td></tr>
        <tr><th>bgcolor:</th><td><input type="text" id="bgcolor" /></td></tr>
        <tr><th>size:</th><td><input type="text" id="fsize" /></td></tr>
        <tr><th></th><td><button id="button1">Save</button></td></tr>
    </table>
</body>


※JavaScriptのスクリプト

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var applicationData = null;
    var localSettings = null;
    var container_key = "my_sample_app"; // コンテナキーの名前

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.
                ApplicationExecutionState.terminated) {} else {}
            args.setPromise(WinJS.UI.processAll().then(function completed() {
                applicationData = Windows.Storage.ApplicationData.current;
                localSettings = applicationData.localSettings;
                if (!localSettings.containers.hasKey(container_key)) {
                    localSettings.createContainer(container_key, Windows.Storage.ApplicationDataCreateDisposition.Always);
                    saveProperties({ 'color': 'white', 'bgcolor': 'black', 'fsize': 14 });
                }
                var props = loadProperties();
                document.getElementById("color").value = props.color;
                document.getElementById("bgcolor").value = props.bgcolor;
                document.getElementById("fsize").value = props.fsize;
                changeProperties(props);

                document.getElementById("button1").addEventListener("click", button1Action);
            }));
        }
    }

    app.oncheckpoint = function (args) {}

    // ※追加した関数
    function button1Action(event) {
        var c = document.getElementById("color").value;
        var bg = document.getElementById("bgcolor").value;
        var s = document.getElementById("fsize").value;
        var props = { 'color': c, 'bgcolor': bg, 'fsize': s };
        saveProperties(props);
        changeProperties(props);
        new Windows.UI.Popups.MessageDialog("保存しました。").showAsync()
    }

    function loadProperties() {
        var c = localSettings.containers.lookup(container_key).values["color"];
        var bg = localSettings.containers.lookup(container_key).values["bgcolor"];
        var s = localSettings.containers.lookup(container_key).values["fsize"];
        return {'color':c, 'bgcolor':bg, 'fsize':s};
    }

    function saveProperties(props) {
        localSettings.containers.lookup(container_key).values["color"] = props.color;
        localSettings.containers.lookup(container_key).values["bgcolor"] = props.bgcolor;
        localSettings.containers.lookup(container_key).values["fsize"] = props.fsize;
    }

    function changeProperties(props) {
        document.getElementById("msg").style.color = props.color;
        document.getElementById("msg").style.background = props.bgcolor;
        document.getElementById("msg").style.fontSize = props.fsize + "pt";
    }

    app.start();
})();
※関連コンテンツ

「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る