カードで応答する
カードは、通常は画像、ボタン、添付ファイルをダウンロードするためのリンクを備えたUI要素です。チャットボットの会話でプレーンテキストよりもリッチなエクスペリエンスを提供します。OutSystemsのOutSystems.AI Chatbotコンポーネントのデータストラクチャは、Azure Bot Frameworkのカードの必要なストラクチャに基づいています。
Azure Bot ServiceとOutSystemsの両方とやりとりするロジックを追加するには、チャットボットWebhookモジュールを追加して構成する必要があります。
利用可能なカード
チャットボットUIは、以下のタイプのカードをサポートしています。
- サムネイルカード
- カードコレクション
カード内では要素を組み合わせることができます。以下のような要素があります。
- サムネイル画像
- Text
- ボタン
- 添付ファイル
カードの構造
チャットボットカードは、Azure Bot Frameworkの設計に基づいています。データストラクチャは、フレームワークが必要とするJSON値に対応しており、［Data］のStructures > AzureBotFrameworkConnectorで参照することができます。
GetMessageResponseサーバーアクションでレスポンスを作成して、カードを作成します。GetMessageResponseアクションで、コネクタがAzure Bot Serviceに送信するJSONカードストラクチャを作成します。これにより、メッセージがボットのUIに表示されます。カードの詳細については、Microsoftデベロッパーセンターの以下のページをご覧ください。
- 「Cards Reference」。カードの詳細が示されています。ただし、OutSystemsで使用できないカードもあります。
- 「カードのアクション」では、カードで使用できるアクションの一覧が示されています。
ファイルをダウンロードするカードで応答する
チャットウィンドウでPDF添付ファイルを送信するチャットボットロジックの例を以下に示します。ユーザーがチャットウィンドウ内のテキストをクリックすると、ブラウザがPDFファイルを読み込みます。
ボットロジックには複数のブランチが含まれることが一般的ですが、この簡単な例では、ダウンロードカードの作成のロジックを重点的に説明するために、1つのフローのみを使用しています。
-
GetMessageResponseアクションには以下のパラメータがあります。
- Message - GetMessageResponseのデフォルトの入力パラメータ。
- ResponseMessage - GetMessageResponseのデフォルトの出力パラメータ。なお、ResponseMessageのデータ型の1つはAttachmentsです。
- Attachment - Azure Bot Frameworkコネクタのデータストラクチャ（［Data］のStructures > AzureBotFrameworkConnector）から得られるAttachmentデータ型のローカル変数。
-
AssignツールでAttachmentローカル変数のプロパティを設定します。この例では以下のとおりです。
- ContentType - メディアのタイプを識別します。ここではPDFです。
- Name - 添付ファイルの名前。チャットウィンドウのファイルのラベルです。
- ContentUrl - ファイルへのリンク。この例では、このファイルはモジュール内のリソースであり、リンクは相対リンクです。
-
アクションによってAttachmentがResponseMessage.Attachmentsリストに追加されます。Systemプロデューサ（Ctrl+Qを押して
(System)を検索します）のListAppendサーバーアクションを参照する必要がある場合があります。 -
Response MessageというラベルのAssignツールは、共通する値を割り当てる汎用ノードです。Webhookモジュールに含まれており、デフォルトのGetMessageResponseサーバーアクションを含んでいます。
この例のロジックを実行すると、チャットボットは以下のメッセージで応答します。
画像やボタンを含むカードで応答する
以下に示す別の例では、ロジックの概要とデータストラクチャを重点的に説明します。ボットロジックには複数のブランチが含まれることが一般的ですが、この簡単な例では、概要をわかりやすく示すために、1つのフローのみを使用しています。
- CardActionデータ型のCardActionローカル変数はクリックできるボタンに対応し、このAssignツールで値を割り当てます。
- ListAppendアクションは、CardAction変数をAttachment.Content.Buttonsのボタンのリストに追加します。
- Attachment.Content.TextとAttachment.Content.Titleは、カードのテキスト本文とタイトルを定義します。
- Attachment.ThumbnailUrlは画像のURLを参照し、
Attachment.ContentType="thumbnail"とすることによって画像がサムネイルとして表示されます。 - ListAppendアクションは、Attachment変数をResponseMessage.Attachmentsの添付ファイルのリストに追加します。
- Response Messageは汎用ノードで、ResponseMessageの共通する値を割り当てます。
チャットボットを実行すると、ユーザーに以下のメッセージが返されます。
複数のサジェスチョンカードで応答する
以下は、複数のサジェスチョンをユーザーに示すカードです。詳細については、チャットボットのデモアプリをご覧ください。
