設定をすぐにコミットする方法

[アーティクル]
12/22/2015

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

Windows ストアアプリの場合、すべての設定は、ユーザーが値を変更するとすぐに適用されます。このモデルは、ユーザーが WinJS の設定ポップアップとローカルアプリケーションデータを使って設定をすぐにコミットできるため重要です。

必要条件

「アプリ設定のガイドライン」をご覧ください。

設定チャームへの設定ポップアップの追加

設定ポップアップを追加する方法について詳しくは、「クイックスタート: JavaScript 用 Windows ライブラリを使ったアプリ設定の追加」をご覧ください。ここでは、概要を示します。

設定ポップアップの HTML を定義します。

<div aria-label="App Settings Flyout" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'settingsExample', width:'narrow'}">
<!-- Add the background color matching you app tile color to the Settings flyout header. -->
<!-- Use add the win-ui-dark class if the background color requires a white text  -->
<!-- Add the app small logo to the Settings flyout header                         -->
    <div class="win-header win-ui-light" style="background-color: #dbf9ff;">
        <button class="win-backbutton" onclick="WinJS.UI.SettingsFlyout.show()" type="button"></button>
     <div class="win-label">Example</div>
     <img alt="smalllogo" src="/images/smalllogo.png" style="height: 30px; width: 30px; position: absolute; right: 40px;"/>
    </div>
    <div class="win-content">
    <!—Your settings contents go here -->
    </div>
</div>

設定チャームに設定ポップアップをアタッチします。

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = {
        "settingsExample": { title: "Example" }
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

ポップアップへのコントロールの追加

次の例では、設定ポップアップにトグルコントロールと選択コントロールを追加します。これら 2 つは、設定に最もよく使われるコントロールです。

<div class="win-content">
    <div class="win-settings-section">
        <h3>Example settings section</h3>
        <p>Description: toggle and select are common settings controls</p>
        <div id="settingsToggle" data-win-control="WinJS.UI.ToggleSwitch" 
             data-win-options="{title:'Example toggle switch', 
             onchange: settingsToggleChange}"></div>
    </div>
    <div class="win-settings-section">
        <h3>Select control</h3>
        <p>Select controls let users select an item from a set of text only items.</p>
        <label>Example select control</label>
        <select id="settingsSelect" aria-label="Example select control">
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
            <option value="3">Value 3</option>
            <option value="4">Value 4</option>
        </select>
    </div>
</div>

注

settingsToggle の data-win-options に onchange イベントオプションを追加しました。これにより、ToggleSwitch コントロールの onchange イベントが登録されます。詳しくは、「トグルスイッチのガイドラインとチェックリスト」をご覧ください。
この設定は、win-settings-section CSS クラスでラップされます。また、推奨されている要素を使って、設定のガイドラインに従ってスタイルを設定しています (「アプリ設定のガイドライン」をご覧ください)。

ローカルアプリデータストアからのコントロールの初期化

この例では、ローカルアプリケーションデータストアを使います。ユーザーが設定ポップアップを呼び出すたびに、アプリケーションデータから値を読み取って、UI のコントロールに最新の値を反映させます。

function initSettingsControls() {
    // Initialize the toggle control using the current value of settingsToggleValue in the local state store
    var toggleControl = document.getElementById("settingsToggle").winControl;
    toggleControl.checked = (Windows.Storage.ApplicationData.current.localSettings.values["settingsToggleValue"] === "on");

    // Initialize the select control using the current value of settingsSelectValue in the locale state store
    var selectControl = document.getElementById("settingsSelect");
    var settingsSelectValue = Windows.Storage.ApplicationData.current.localSettings.values["settingsSelectValue"];
    for (var i = 0; i < selectControl.options.length; i++) {
        if (selectControl.options(i).value === settingsSelectValue) {
            selectControl.selectedIndex = i;
            break;
        }
    }

    // Add event listener for change event on select control
    selectControl.addEventListener("change", settingsSelectChange, false);
}

注

DOM が読み込まれ、WinJS コントロールが初期化された後にコントロールが初期化されるようにします。独自の HTML ページで定義した設定ポップアップを使う場合は、ページコントロールの ready メソッドを呼び出して、設定ポップアップが使えることの確認が必要になる可能性があります。
この例では、ローカルアプリケーションデータストアを使っています。ローミングアプリケーションデータストアを使って、設定が自動的にローミングされるようにすることもできます。詳しくは、「アプリケーションデータのローミングのガイドライン」をご覧ください。

設定コントロールの変更イベントの処理

実際にコミットをすぐに実行するのは、この部分です。ユーザーがコントロールに関連付けられている値を変更すると、すぐに新しい値がアプリケーションデータストアに書き込まれます。この処理は、コントロールに関連付けられている onchange イベントハンドラーで実行されます。

function settingsToggleChange() {
    var toggleControl = document.getElementById("settingsToggle").winControl;
    // Write new value to the local state store
    Windows.Storage.ApplicationData.current.localSettings.values["settingsToggleValue"] = (toggleControl.checked ? "on" : "off");
}

// To protect against untrusted code execution, all functions are required 
// to be marked as supported for processing before they can be used inside 
// a data-win-options attribute in HTML markup.
WinJS.Utilities.markSupportedForProcessing(settingsToggleChange);

function settingsSelectChange(changedEvent) {
    // Write new value to the local state store
    Windows.Storage.ApplicationData.current.localSettings.values["settingsSelectValue"] = changedEvent.target.options.value;
}

要約

このクイックスタートでは、設定の更新をすぐにコミットする方法について説明しました。