Copilot Studio でアダプティブカードを表示する

[アーティクル]
08/12/2024

注意

Microsoft Copilot Studio では、Composer なしでこれらの機能に対応できるようになりました。

Bot Framework Composer でカスタムダイアログを開発し、Microsoft Copilot Studio のボットに追加することで、ボットを強化できます。

この例では、Composer を使用して Microsoft Copilot Studio にアダプティブカードを表示する方法について説明します。

重要

Composer の統合は、Teams Microsoft Copilot Studio ライセンスのみを持っているユーザーはご利用いただけません。試用版、もしくは Microsoft Copilot Studio ライセンスの完全版が必要です。

前提条件

新しいトピックを作成する

Microsoft Copilot Studio で、Contoso Meal Delivery Service という名前の新しいボットを作成します。
トピックのページに戻り、Meal delivery options という名前で新しいトピックを作成します。

以下のトリガーフレーズをコピーして貼り付けます:

what meals can I order
what meal options do you have
what dishes do you deliver
entrees available for delivery

キャンバスの作成 で、既定の メッセージ ノードを選択します: 縦に並んだ 3 つのドットを選択してから、消去を選択します。
トリガーフレーズ ノードの下にある ノードの追加 (+) を選択してから、質問するを選択します。続いて、質問ノードで:
1. 質問する で、What city are you in? と入力します。
2. 特定では、市区町村を選択します。
応答の保存形式 で、自動的に作成された変数を選択します。続いて、変数のプロパティペインで:
1. 名前に user_city と入力します。
2. 用途では、ボット (任意のトピックがアクセスできます) を選択します。
保存を選びます。

Microsoft Copilot Studio 変数。

アダプティブカードの作成

次に、Composer を使用して、ユーザーの都市で利用可能な食事の選択肢の画像を表示します。

Composer でボットを開きます。この方法の詳細については、Bot Framework Composer を使い始めるを参照してください。
作成ページに移動します。ボットで、その他のオプション ( ...) を選択し、+ ダイアログの追加を選択します。
名前で、Meals を入力し、OK を選択します。
ボットの応答ページを表示します。ボットエクスプローラーで、食事を選択し、コードを表示する を選択します。

コードビューで、次のボット応答をコピーして貼り付けます。次に、3 つの画像 URL の例を独自のものに置き換えます。

# Chicken()
-Chicken

# Steak()
-Steak

# Tofu()
-Tofu

# SteakImageURL()
-https://www.example.com/steak.jpg

# ChickenImageURL()
-https://www.example.com/chicken.jpg

# TofuImageURL()
-https://www.example.com/tofu.jpg

文字列の表示された Composer ボットの応答タブ。

次のコードをコピーして同じコードビューに貼り付け、3 つの画像を表示するアダプティブカードを追加します。

# adaptivecardjson_meals(location)
- ```
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.1",
    "body": [
            {
            "type": "TextBlock",
            "text": "Meal delivery options for ${location}:",
            "size": "Medium",
            "weight": "Bolder"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${SteakImageURL()}",
                            "size": "Stretch",
                            "spacing": "Medium",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${ChickenImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${TofuImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Steak()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"                            
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Chicken()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Tofu()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        }
    ]
}
```

Composer ボットの応答タブ - アダプティブカード JSON。

次のコードをコピーして同じコードビューに貼り付けて、アダプティブカードを表示するアクティビティを追加します。
```
# AdaptiveCardMeals(location)
[Activity
    Attachments = ${json(adaptivecardjson_meals(location))}
]
```

アダプティブカードの表示

作成ページに移動します。ボットエクスプローラーで、食事ダイアログを選択し、BeginDialog トリガーを選択します。
キャンバスの作成で、追加 (+) を選択し、応答の送信 を選択します。
新しい応答の送信ノードを選択し、プロパティペインを開きます。 ボットの応答配下で、コードの表示を選択して、コードエディタに切り替えます。

警告

応答エディタではなく、コードエディタに以下の式を追加すると、アダプティブカードの代わりに生の JSON でボットが応答するようになります。
以下の式をコピーして、コードエディタに貼り付けます:
```
- ${AdaptiveCardMeals(virtualagent.user_city)}
```
Microsoft Copilot Studio Composerでは、virtualagent スコープを使用してグローバル変数にアクセスします。このスコープは Composer のプロパティリファレンスメニューには表示されませんが、式を直接入力することでアクセスできます。

たとえば、${virtualagent.user_city} は、 Microsoft Copilot Studio ボットで作成された user_city グルーバル変数の値を参照します。

コンテンツの公開

Composer コンテンツを公開して、Microsoft Copilot Studio ボットで利用できるようにします。

重要

Composer で公開を選択すると、変更をテストに使用できるようになりますが、ボットは自動的に公開されません。

Microsoft Copilot Studio でボットを公開すると、接続されているすべてのチャネルでボットが更新されます。
Microsoft Copilot Studio トピック のページに移動して、新しい食事トピックの内容を確認します。
食事配達のオプショントピックを開きます。
質問ノードの下にある、ノードの追加 (+) を選択します。 別のトピックにリダイレクトする を選択し、食事を選択します。
トピックへの変更を保存するには、保存を選択します。

ボットのテスト

Microsoft Copilot Studio での変更をテストするには、テストボットペインを開き、トピック間の追跡がオンになっていることを確認してください。メッセージの What meals do you deliver? を入力して、会話を始めます。

ボットは 食事配達オプション トピックをトリガーし、ユーザーに現在の市区町村を尋ねます。次に、ボットはコンポーザーダイアログ食事にリダイレクトして、アダプティブカードを表示します。

Microsoft Copilot Studio 例 1 のテスト。

次のステップ

Copilot Studio で複数選択のオプションリストを表示する。

次の方法で共有

Copilot Studio でアダプティブカードを表示する

前提条件

新しいトピックを作成する

アダプティブカードの作成

アダプティブカードの表示

コンテンツの公開

ボットのテスト

次のステップ

フィードバック

その他のリソース

次の方法で共有

Copilot Studio でアダプティブ カードを表示する

前提条件

新しいトピックを作成する

アダプティブ カードの作成

アダプティブ カードの表示

コンテンツの公開

ボットのテスト

次のステップ

フィードバック

その他のリソース

Copilot Studio でアダプティブカードを表示する

アダプティブカードの作成

アダプティブカードの表示