閲覧ウィンドウが有効になっているか、メッセージが選択されていない状態で Outlook アドインをアクティブ化する

  • [アーティクル]

単純なマニフェスト構成を使用すると、閲覧ウィンドウが有効になっていない作業ウィンドウまたはメールボックスから最初に選択されたメッセージをアクティブ化するメッセージ読み取り画面用の Outlook アドインを作成できます。 この機能は"no item context"と呼ばれます。 チュートリアルに従って、アドインの追加機能の詳細とロックを解除します。 たとえば、ユーザーが OneDrive や顧客関係管理 (CRM) システムなど、さまざまなデータ ソースのコンテンツに Outlook クライアントから直接アクセスできるようにすることができます。

注:

この機能のサポートは 、要件セット 1.13 で導入されました。 この要件セットをサポートする クライアントおよびプラットフォーム を参照してください。

Outlook on the web と 新しい Outlook on Windows (プレビュー) のサポート要件セット 1.13 ですが、閲覧ウィンドウが非表示になっているか、メッセージが選択されていない場合、アドインはアクティブになりません。 詳細については、「 Outlook on the web での機能サポート」および「新しい Outlook on Windows (プレビュー)」を参照してください。

環境を設定する

Office アドイン用 Yeoman ジェネレーターを使用して Outlook アドインを作成する Outlook クイック スタートを完了します。

既存のアドイン プロジェクトでこの機能を有効にするには、「 マニフェストの構成」を参照してください。

マニフェストを構成する

マニフェストを構成する手順は、アドインで使用するマニフェストの種類によって異なります。

  1. 任意のコード エディターで、作成した Outlook クイック スタート プロジェクトを開きます。

  2. プロジェクトのルートにある manifest.json ファイルを開きます。

  3. "extensions.runtimes" 配列の最初のオブジェクトで、次の操作を行います。

    1. "requirements.capabilities.minVersion" を "1.13" に変更します。
    2. "actions" 配列の オブジェクトに "supportsNoItemContext" プロパティを追加し、その値を に true設定します。
    3. "multiselect" プロパティを同じオブジェクトに追加し、 に true設定します。
    4. 同じオブジェクトの "pinnable" プロパティを に変更します true。

    完了すると、次のようになります。

    "runtimes": [
    {
        "requirements": {
            "capabilities": [
                {
                    "name": "Mailbox",
                    "minVersion": "1.13"
                }
            ]
        },
        "id": "TaskPaneRuntime",
        "type": "general",
        "code": {
            "page": "https://localhost:3000/taskpane.html"
        },
        "lifetime": "short",
        "actions": [
            {
                "id": "TaskPaneRuntimeShow",
                "type": "openPage",
                "view": "dashboard",
                "pinnable": true,
                "supportsNoItemContext": true,
                "multiselect": true
            }
        ]
    }
]

  4. "extensions.runtimes" 配列内の 2 番目のオブジェクトを削除します。"id" は "CommandsRuntime" です。

  5. "extensions.ribbons.tabs.groups.controls" 配列には 2 つのオブジェクトがあります。 "id" が "ActionButton" である 2 つ目のオブジェクトを削除します。

作業ウィンドウを構成する

  1. プロジェクトで、 taskpane フォルダーに移動し、 taskpane.html開きます。

  2. body> 要素全体<を次のマークアップに置き換えます。

    <body class="ms-font-m ms-welcome ms-Fabric">
    <header class="ms-welcome__header ms-bgColor-neutralLighter">
        <img width="90" height="90" src="../../assets/logo-filled.png" alt="logo" title="Add-in logo" />
        <h1 class="ms-font-su">Activate your add-in without enabling the Reading Pane or selecting a message</h1>
    </header>
    <section id="sideload-msg" class="ms-welcome__main">
        <h2 class="ms-font-xl">Please <a target="_blank" href="https://video2.skills-academy.com/office/dev/add-ins/testing/test-debug-office-add-ins#sideload-an-office-add-in-for-testing">sideload</a> your add-in to see app body.</h2>
    </section>
    <main id="app-body" class="ms-welcome__main" style="display: none;">
        <ul class="ms-List ms-welcome__features">
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--CheckList ms-font-xl"></i>
                <span class="ms-font-m">Item multi-select is automatically enabled when the <b>SupportsNoItemContext</b> manifest element is set to <code>true</code>. You can test this by selecting multiple messages in Outlook, then choosing <b>Show Taskpane</b> from the ribbon.</span>
            </li>
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--Pin ms-font-xl"></i>
                <span class="ms-font-m">Support to pin the task pane is also automatically enabled. You can test this by selecting the <b>pin</b> icon from the top right corner of the task pane.</span>
            </li>
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--DockRight ms-font-xl"></i>
                <span class="ms-font-m">This feature can only be implemented with a task pane.</span>
            </li>
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--Design ms-font-xl"></i>
                <span class="ms-font-m">Implement your scenario using this feature today! For example, enable your users to access content from different data sources, such as OneDrive or your customer relationship management (CRM) system, without first selecting a message.</span>
            </li>
        </ul>
    </main>
</body>

  3. 変更内容を保存します。

作業ウィンドウの JavaScript ファイルを更新する

  1. taskpane フォルダーから、taskpane.jsを開きます。

  2. 関数に Office.onReady 移動し、その内容を次のコードに置き換えます。

    if (info.host === Office.HostType.Outlook) {
    document.getElementById("sideload-msg").style.display = "none";
    document.getElementById("app-body").style.display = "flex";
}

  3. 変更内容を保存します。

試してみる

  1. ターミナルから、プロジェクトのルート ディレクトリで次のコードを実行します。 これにより、ローカル Web サーバーが起動し、アドインがサイドロードされます。

    npm start

    ヒント

    アドインが自動的にサイドロードされない場合は、「 テスト用の Outlook アドインをサイドロード する」の手順に従って、Outlook で手動でサイドロードします。

  2. 受信トレイに移動し、次のいずれかの操作を行います。

    • 閲覧ウィンドウをオフにします。 ガイダンスについては、「メッセージをプレビューするように閲覧ウィンドウを 使用して構成する」の「閲覧ウィンドウのオン、オフ、または移動」セクションを参照してください。
    • 該当する場合は、メッセージの選択を解除します。 メッセージの選択を解除するには、 Ctrl キーを押しながらメッセージを選択します。

  3. リボンから [ タスクウィンドウの表示 ] を選択します。

  4. 作業ウィンドウに表示されている候補を調べてテストします。

アイテムの複数選択およびピン留め可能な作業ウィンドウ機能のサポート

マニフェストで項目コンテキストなしのサポートを有効にすると、マニフェストでこれらの機能が明示的に構成されていない場合でも、 アイテムの複数選択 および ピン留め可能な作業ウィンドウ 機能のサポートが自動的に有効になります。

Outlook on the web および新しい Outlook on Windows での機能サポート (プレビュー)

Outlook on the web と新しい Outlook on Windows (プレビュー) では、アイテム コンテキストを実装するアドインは、閲覧ウィンドウが非表示になっている場合やメッセージが選択されていない場合はアクティブになりません。 これは、Outlook on the web のアドイン コマンドがリボンに表示されないためです。 メッセージ読み取り画面からアドインをアクティブにするには、最初にメッセージを選択してから、メッセージ アクション バーからアドイン コマンドを選択する必要があります。

アイテム コンテキストを有効にしないと、アイテムの複数選択機能が自動的に有効になるため、Outlook on the web と新しい Outlook on Windows で複数のメール アイテムでアドインをアクティブ化できます。

関連項目