言語: HTML | XAML

クイック スタート: アプリ ヘルプの追加 (HTML)

このクイック スタートでは、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)」を参照してください。

この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください:  Windows ストア アプリ UI の概要

必要条件

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

手順

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 を使ってヘルプ ページにオンライン ヘルプを組み込む方法を説明します。

オンライン コンテンツをヘルプに含める方法

関連トピック

アプリ設定のサンプルのページ
クイック スタート: アプリ設定の追加
WinJS.UI.SettingsFlyout
Windows.UI.ApplicationSettings.SettingsPane
アプリのヘルプのガイドライン
アプリ設定のガイドライン
Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)
アプリのライフサイクルの最適化 (JavaScript と HTML を使った Windows ストア アプリ)

 

 

表示:
© 2015 Microsoft