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

アダプティブカードの 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 ボタン付きのアダプティブカードを送信します。各ボタンには、ボットが返すダイアログコンテンツを決定するために使用するデータが含まれています。

警告

Web バージョンの Teams、Outlook、Microsoft 365 ドメインを含む 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 オブジェクトを作成し、それを返します。応答のスキーマの詳細については、 task/submitに関するディスカッションを参照してください。次のコードは、ラッパーオブジェクトに埋め込まれた 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.Apps;
using Microsoft.Teams.Apps.TaskModules;

teams.OnTaskSubmit(async (context, cancellationToken) =>
{
  var data = context.Activity.Value?.Data as JsonElement?;
    if (data == null)
    {
    return TaskModuleResponse.CreateBuilder()
      .WithType(TaskModuleResponseTypes.Message)
      .WithMessage("No data found in the activity value")
      .Build();
    }

    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 context.SendAsync($"Hi {name}, thanks for submitting the form!", cancellationToken);
            return TaskModuleResponse.CreateBuilder()
              .WithType(TaskModuleResponseTypes.Message)
              .WithMessage("Form was submitted")
              .Build();
        default:
            return TaskModuleResponse.CreateBuilder()
              .WithType(TaskModuleResponseTypes.Message)
              .WithMessage("Unknown submission type")
              .Build();
    }
      });

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.Apps;
using Microsoft.Teams.Apps.Schema;
using Microsoft.Teams.Apps.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");

    TeamsAttachment nextStepAttachment = TeamsAttachment.CreateBuilder()
      .WithAdaptiveCard(JsonSerializer.SerializeToElement(nextStepCard))
      .Build();

    return TaskModuleResponse.CreateBuilder()
      .WithType(TaskModuleResponseTypes.Continue)
      .WithTitle($"Thanks {nameStep1} - Get Email")
      .WithCard(nextStepAttachment)
      .Build();

case "webpage_dialog_step_2":
    var nameStep2 = GetFormValue("name") ?? "Unknown";
    var emailStep2 = GetFormValue("email") ?? "No email";
    await context.SendAsync($"Hi {nameStep2}, thanks for submitting the form! We got that your email is {emailStep2}", cancellationToken);
    return TaskModuleResponse.CreateBuilder()
      .WithType(TaskModuleResponseTypes.Message)
      .WithMessage("Multi-step form completed successfully")
      .Build();

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
ダイアログサンプルボット - V4	このサンプルアプリでは、Bot Framework v4 を使用してダイアログ (TeamsJS v1.x ではタスクモジュールと呼ばれます) を使用する方法を示します。	表示	表示	該当なし	表示

フィードバック

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

最終更新: 2026-10-15

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

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

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

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

マルチステップ ダイアログ チェーン

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

コード サンプル

関連項目

フィードバック

その他のリソース

マルチステップダイアログチェーン

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

コードサンプル