設定をすぐにコミットする方法
[ この記事は、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;
}
要約
このクイック スタートでは、設定の更新をすぐにコミットする方法について説明しました。