ボットでダイアログを使用する

アダプティブカードの [ TaskFetchAction ] ボタンを使用して、Microsoft Teams ボットからダイアログ (TeamsJS v1.x のタスクモジュールと呼ばれます) を呼び出します。ダイアログでは、ユーザーのポップアップウィンドウを開いて、複雑なフォームやマルチステップワークフローに最適な対話が提供されます。

ダイアログを呼び出す方法は 2 つあります。

新しい呼び出しメッセージ task/fetch: task/fetchでアダプティブカードのAction.Execute カードアクションを使用すると、HTML またはアダプティブカードベースのダイアログがボットから動的にフェッチされます。
ディープリンク URL: ダイアログにディープリンク構文を使用すると、アダプティブカードのAction.OpenUrl カードアクションを使用できます。ディープリンク URL では、ダイアログ URL またはアダプティブカード本文は、 task/fetchに対するサーバーラウンドトリップを回避するために既に認識されています。

重要

各 url および fallbackUrl は、HTTPS 暗号化プロトコルを実装する必要があります。

注:

Teams クライアント v1 では、ダイアログはタスクモジュールと呼ばれます。場合によっては、同義語で使用される場合があります。

ダイアログ起動ツールを作成する

ボットからダイアログを呼び出すには、 TaskFetchAction ボタンを含むアダプティブカードを送信します。各ボタンには、ボットが返すダイアログコンテンツを決定するために使用するデータが含まれています。

警告

Teams、Outlook、Microsoft 365 ドメインの Web バージョンを含む Microsoft のクラウドサービスは、 *.cloud.microsoft ドメインに移行しています。サポートされている Microsoft 365 Web クライアントホストでアプリが引き続きレンダリングされるように、できるだけ早く次の手順を実行します。

TeamsJS ライブラリを v.2.19.0 以降に更新します。新しいドメインで警告が表示されないようにするには、 microsoftTeams.app.initialize() を呼び出す必要があります。 TeamsJS の最新リリースの詳細については、「 Microsoft Teams JavaScript クライアントライブラリ」を参照してください。
アプリのコンテンツセキュリティポリシー (CSP) ヘッダーを定義している場合は、 frame-ancestors ディレクティブを更新して、 *.cloud.microsoft ドメインを含めます。移行中に下位互換性を確保するには、CSP ヘッダーに既存の frame-ancestors 値を保持します。この方法により、既存および将来の Microsoft 365 ホストアプリケーションの両方でアプリが引き続き動作し、以降の変更の必要性が最小限に抑えられます。

アプリの CSP ヘッダーの frame-ancestors ディレクティブで次のドメインを更新します。

https://*.cloud.microsoft

タスク/フェッチ要求または応答

次の手順では、 task/fetchを使用してダイアログ (TeamsJS v1.x のタスクモジュールと呼ばれます) を呼び出す方法について説明します。

この画像は、購入Action.Execute カードアクションを持つアダプティブカードを示しています。 type プロパティの値は task/fetch であり、残りの data オブジェクトを選択できます。
ボットは、 card.action アクティビティを受け取ります。 Teams SDK では、 OnAdaptiveCardAction ハンドラーを使用してこれを処理します。詳細については、「アクションの実行」を参照してください。
ボットは、 ActionResponse オブジェクトを作成し、それを返します。応答のスキーマの詳細については、タスク/送信に関する説明を参照してください。次のコードは、ラッパーオブジェクトに埋め込まれた TaskInfo オブジェクトを含む応答本文の例を示しています。
```
{
  "task": {
    "type": "continue",
    "value": {
      "title": "Task module title",
      "height": 500,
      "width": "medium",
      "url": "https://contoso.com/msteams/taskmodules/newcustomer",
      "fallbackUrl": "https://contoso.com/msteams/taskmodules/newcustomer"
    }
  }
}
```
task/fetch イベントとそのボットの応答は、Microsoft Teams JavaScript クライアントライブラリ (TeamsJS) のmicrosoftTeams.tasks.startTask()関数に似ています。
Microsoft Teamsダイアログが表示されます。

次のセクションでは、ダイアログの結果を送信する方法の詳細を説明します。

ダイアログの結果を送信する

ユーザーがダイアログを終了すると、結果がアプリに送信されます。申請のしくみは、ダイアログコンテンツタイプによって異なります。

アダプティブカード (TaskInfo.カード): ユーザーが [Action.Submit] ボタンを選択すると、Teams によってダイアログ送信イベントがアプリに送信されます。ダイアログ送信ハンドラーは、カードからフォームデータを受け取ります。 C# で、 [TaskSubmit] 属性を使用します。 TypeScript で、 app.on('dialog.submit', ...)を使用します。 Python では、 @app.on_dialog_submitを使用します。
Web ページ (TaskInfo.url): Web ページは TeamsJS クライアントライブラリから microsoftTeams.tasks.submitTask(formData) を呼び出します。これにより、アプリで同じダイアログ送信イベントがトリガーされます。

ダイアログ送信イベントを処理する

ユーザーがダイアログを送信すると、ボットは task/submit 呼び出しメッセージを受け取ります。応答する場合は、いくつかのオプションがあります。

応答の種類	シナリオ
応答なし	最も単純な応答は、まったく応答がないことです。ボットは、ユーザーがダイアログで終了したときに応答する必要はありません。
`MessageTask`	Teams では、ダイアログのポップアップメッセージボックスにメッセージが表示されます。
`ContinueTask`	アダプティブカードのシーケンスをウィザードまたはマルチステップエクスペリエンスで連結できます。

次のタブは、.NET、TypeScript、Python でダイアログ送信イベントを処理する方法を示しています。

using System.Text.Json;
using Microsoft.Teams.Api.TaskModules;
using Microsoft.Teams.Apps;
using Microsoft.Teams.Apps.Activities.Invokes;
using Microsoft.Teams.Apps.Annotations;
using Microsoft.Teams.Common.Logging;

[TaskSubmit]
public async Task<Microsoft.Teams.Api.TaskModules.Response> OnTaskSubmit([Context] Tasks.SubmitActivity activity, [Context] IContext.Client client, [Context] ILogger log)
{
    var data = activity.Value?.Data as JsonElement?;
    if (data == null)
    {
        log.Info("[TASK_SUBMIT] No data found in the activity value");
        return new Microsoft.Teams.Api.TaskModules.Response(
            new Microsoft.Teams.Api.TaskModules.MessageTask("No data found in the activity value"));
    }

    var submissionType = data.Value.TryGetProperty("submissiondialogtype", out var submissionTypeObj) && submissionTypeObj.ValueKind == JsonValueKind.String
        ? submissionTypeObj.ToString()
        : null;

    string? GetFormValue(string key)
    {
        if (data.Value.TryGetProperty(key, out var val))
        {
            if (val is JsonElement element)
                return element.GetString();
            return val.ToString();
        }
        return null;
    }

    switch (submissionType)
    {
        case "simple_form":
            var name = GetFormValue("name") ?? "Unknown";
            await client.Send($"Hi {name}, thanks for submitting the form!");
            return new Microsoft.Teams.Api.TaskModules.Response(
                new Microsoft.Teams.Api.TaskModules.MessageTask("Form was submitted"));
        default:
            return new Microsoft.Teams.Api.TaskModules.Response(
                new Microsoft.Teams.Api.TaskModules.MessageTask("Unknown submission type"));
    }
}

import { App } from '@microsoft/teams.apps';
// ...

app.on('dialog.submit', async ({ activity, send, next }) => {
  const dialogType = activity.value.data?.submissiondialogtype;

  if (dialogType === 'simple_form') {
    const name = activity.value.data.name;
    await send(`Hi ${name}, thanks for submitting the form!`);
    return {
      task: {
        type: 'message',
        value: 'Form was submitted',
      },
    };
  }

  if (dialogType === 'webpage_dialog') {
    const name = activity.value.data.name;
    const email = activity.value.data.email;
    await send(`Hi ${name}, thanks for submitting the form! We got that your email is ${email}`);
    return {
      status: 200,
    };
  }
});

from typing import Optional, Any
from microsoft_teams.api import TaskSubmitInvokeActivity, InvokeResponse, TaskModuleResponse, TaskModuleMessageResponse
from microsoft_teams.apps import ActivityContext

@app.on_dialog_submit
async def handle_dialog_submit(ctx: ActivityContext[TaskSubmitInvokeActivity]):
    data: Optional[Any] = ctx.activity.value.data
    dialog_type = data.get("submissiondialogtype") if data else None

    if dialog_type == "webpage_dialog":
        name = data.get("name") if data else None
        email = data.get("email") if data else None
        await ctx.send(f"Hi {name}, thanks for submitting the form! We got that your email is {email}")
        return InvokeResponse(
            body=TaskModuleResponse(task=TaskModuleMessageResponse(value="Form submitted successfully"))
        )

複数ステップのダイアログチェーン

送信ハンドラーから ContinueTask 応答を返すことで、アダプティブカードを複数ステップウィザードに連結できます。各ステップは新しいカードを返し、最後のステップはダイアログを閉じるMessageTaskを返します。

using System.Text.Json;
using Microsoft.Teams.Api;
using Microsoft.Teams.Api.TaskModules;
using Microsoft.Teams.Cards;

// Add these cases to your OnTaskSubmit method
case "webpage_dialog_step_1":
    var nameStep1 = GetFormValue("name") ?? "Unknown";
    var nextStepCardJson = $$"""
    {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
            {
                "type": "TextBlock",
                "text": "Email",
                "size": "Large",
                "weight": "Bolder"
            },
            {
                "type": "Input.Text",
                "id": "email",
                "label": "Email",
                "placeholder": "Enter your email",
                "isRequired": true
            }
        ],
        "actions": [
            {
                "type": "Action.Submit",
                "title": "Submit",
                "data": {"submissiondialogtype": "webpage_dialog_step_2", "name": "{{nameStep1}}"}
            }
        ]
    }
    """;

    var nextStepCard = JsonSerializer.Deserialize<AdaptiveCard>(nextStepCardJson)
        ?? throw new InvalidOperationException("Failed to deserialize next step card");

    var nextStepTaskInfo = new TaskInfo
    {
        Title = $"Thanks {nameStep1} - Get Email",
        Card = new Attachment
        {
            ContentType = new ContentType("application/vnd.microsoft.card.adaptive"),
            Content = nextStepCard
        }
    };

    return new Response(new ContinueTask(nextStepTaskInfo));

case "webpage_dialog_step_2":
    var nameStep2 = GetFormValue("name") ?? "Unknown";
    var emailStep2 = GetFormValue("email") ?? "No email";
    await client.Send($"Hi {nameStep2}, thanks for submitting the form! We got that your email is {emailStep2}");
    return new Response(new MessageTask("Multi-step form completed successfully"));

import { cardAttachment } from '@microsoft/teams.api';
import { AdaptiveCard, TextInput, SubmitAction } from '@microsoft/teams.cards';

// Return from dialog.submit handler to chain to the next step
const dialogCard = new AdaptiveCard(
  {
    type: 'TextBlock',
    text: 'This is a multi-step form',
    size: 'Large',
    weight: 'Bolder',
  },
  new TextInput()
    .withLabel('Name')
    .withIsRequired()
    .withId('name')
    .withPlaceholder('Enter your name')
)
  .withActions(
    new SubmitAction()
      .withTitle('Submit')
      .withData({ submissiondialogtype: 'webpage_dialog_step_1' })
  );

return {
  task: {
    type: 'continue',
    value: {
      title: 'Multi-step Form Dialog',
      card: cardAttachment('adaptive', dialogCard),
    },
  },
};

# In your on_dialog_submit handler, return a ContinueTask to show the next step
from microsoft_teams.api import TaskModuleResponse, TaskModuleContinueResponse, CardTaskModuleTaskInfo
from microsoft_teams.cards import AdaptiveCard, TextInput, SubmitAction, Attachment

next_card = AdaptiveCard(
    body=[
        {"type": "TextBlock", "text": "Step 2: Enter Email", "size": "Large", "weight": "Bolder"},
        {"type": "Input.Text", "id": "email", "label": "Email", "placeholder": "Enter your email", "isRequired": True}
    ],
    actions=[
        {"type": "Action.Submit", "title": "Submit", "data": {"submissiondialogtype": "webpage_dialog_step_2", "name": name}}
    ]
)

return InvokeResponse(
    body=TaskModuleResponse(
        task=TaskModuleContinueResponse(
            value=CardTaskModuleTaskInfo(
                title=f"Thanks {name} - Get Email",
                card=Attachment(content_type="application/vnd.microsoft.card.adaptive", content=next_card)
            )
        )
    )
)

Bot Framework カードアクションと Adaptive Card Action.Submit アクション

Bot Framework カードアクションのスキーマは、アダプティブカードのAction.Submitアクションとは異なり、ダイアログを呼び出す方法も異なります。 Action.Submitの data オブジェクトにはmsteams オブジェクトが含まれているため、カード内の他のプロパティと干渉しません。次の表は、各カードアクションの例を示しています。

Bot Framework カードアクション	Adaptive Card Action.Submit アクション
{ "type": "invoke", "title": "Buy", "value": { "type": "task/fetch", <...> } }	{ "type": "Action.Submit", "id": "btnBuy", "title": "Buy", "data": { <...>, "msteams": { "type": "task/fetch" } } }

コードサンプル

サンプルの名前	説明	.NET	Node.js	マニフェスト	Python
ダイアログサンプル bots-V4	このサンプルアプリでは、Bot Framework v4 を使用してダイアログ (TeamsJS v1.x のタスクモジュールと呼ばれます) を使用する方法を示します。	表示	表示	該当なし	表示

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-07-30

ボットでダイアログを使用する

ダイアログ 起動ツールを作成する

ダイアログの結果を送信する

ダイアログ送信イベントを処理する

複数ステップのダイアログ チェーン

Bot Framework カード アクションと Adaptive Card Action.Submit アクション

コード サンプル

関連項目

フィードバック

その他のリソース

ダイアログ起動ツールを作成する

複数ステップのダイアログチェーン

Bot Framework カードアクションと Adaptive Card Action.Submit アクション

コードサンプル