クイック スタート: アプリ ヘルプの追加 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
このクイック スタートでは、JavaScript (WinJS) 用 Windows ライブラリの SettingsFlyout オブジェクトと HTML を使って設定ウィンドウにヘルプ ポップアップを追加する方法について説明します。完成したアプリでヘルプ ポップアップを表示するには、アプリ設定のサンプルのページをご覧ください。
次の例では、HTML ファイル (HelpUI.html) で Help と呼ばれる設定ポップアップを定義します。設定ポップアップを初期化し、JavaScript を使って設定ウィンドウに表示します。
C#/Visual Basic/C++ と XAML の使用 「Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)」を参照してください。
必要条件
「アプリのヘルプのガイドライン」と「アプリ設定のガイドライン」をご覧ください。
手順
1. ヘルプ ポップアップを定義します。
"HelpUI.html" という名前の HTML ファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<title>Help Settings flyout</title>
</head>
<body>
<!-- BEGINTEMPLATE: Template code for an empty Help flyout. -->
<!-- Each Settings flyout should be defined in its own HTML file. -->
<!-- Set data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" to create
a wide flyout. -->
<!-- Set the background color for the header to the background color defined
for your app tile in the manifest. -->
<div data-win-control="WinJS.UI.SettingsFlyout"
data-win-options="{settingsCommandId:'helpDiv', width:'wide'}">
<div class="win-ui-dark win-header" title="Help">
<button type="button"
onclick="WinJS.UI.SettingsFlyout.show()"
class="win-backbutton"></button>
<div class="win-label">Help</div>
</div>
<div class="win-content">
<!-- Help content here -->
</div>
</div>
<!-- ENDTEMPLATE -->
</body>
</html>
注 既定では、このポップアウトの幅は"狭く" (346 ピクセル) なります。幅の広いポップアップ (646 ピクセル) を作るには、data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" を設定します。
2. 設定ポップアップを処理し、[設定] ウィンドウに表示します。
次のコードは、設定ポップアップを処理し、JavaScript を使って SettingsPane の値を設定します。アプリをアクティブ化するときにこの関数を呼び出します。
function initializeSettings() {
// Initialize Settings flyout(s) and WinJS controls.
WinJS.UI.processAll();
// Populate Settings pane and tie commands to Settings flyouts.
WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = {
"helpDiv": { href: "HelpUI.html", title: "Help"}
};
WinJS.UI.SettingsFlyout.populateSettings(e);
}
WinJS.Application.start();
}
注 この関数は、DOM が初期化された後に呼び出す必要があります。ただし、onactivated 関数から initializeSettings を呼び出している場合は、DOM の初期化について心配する必要はありません。activated イベントは、DOMContentLoaded イベントの後に発生します。詳しくは、「アプリのライフサイクルの最適化 (JavaScript と HTML を使った Windows ストア アプリ)」をご覧ください。
要約と次のステップ
このクイック スタートでは、JavaScript 用 Windows ライブラリと HTML を使ってアプリ ヘルプを [設定] ウィンドウに追加する方法について説明しました。
次に、iframe を使ってヘルプ ページにオンライン ヘルプを組み込む方法を説明します。
関連トピック
Windows.UI.ApplicationSettings.SettingsPane
Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)