#前提
①アダプティブカードの基本的な作成ができる方向けに記事を書きます。
以下の記事に基本的な作成方法はまとめていますので、良かったら参考にしてください。
https://qiita.com/rei_441/items/6c93a3cfe3c2b89521a9
②Bot Frameworkを使用したことがある方向けになっています。
(いずれこちらもまとめて記事にしようと思っています。
##早速やっていきます
まず、クライアントはMicrosoftのTeamsを使用しています。
ユーザーからTeamsにてチャットが送信されると、TurnContextというオブジェクトがBot Framework側に送信されます。
この中にはM365のテナント情報やユーザーのIDなど、どのテナントの誰から送信されたメッセージなのかという情報を含んでいます。
実際にお見せしようと思ったのですが、隠さなければならない項目が多かったので割愛しますww
また、この中にはturnContext.Activity.Textという値があり、ここにはユーザーから送られたメッセージのテキストを保持しています。
では、まずアダプティブカードに入力した値をBot Frameworkに送信するにはどうすればよいのかやっていきます。
アダプティブカードのAction.Submitを使用することでInput.Textなどに入力された値を送信することができます。
Inputに使用できるパーツには以下のものがあります。
では、前提に記載した記事の中で試作した以下のアダプティブカードを使用してやっていこうと思います。
この場合まず三つの入力項目があります。
上から
①名前入力する。
②日付を入力する。
③時間を入力する。
そして送信ボタンは"type"にAction.Submitを定義しています
"actions": [
{
"type": "Action.Submit",
"title": "送信する"
}
]
送信ボタンが押下されると入力された値がBot Frameworkへ送信されます。
受信した際にはturnContext.Activity.Valueの中に値が格納されるので、
自分はよく
string testString = TurnContext.Activity.Value.ToString();
JObject details = JObject.Parse(testString);
のようにして値を取得しています。
しかし、このままだと値を取得することはできません。
先ほどのアダプティブカードの入力項目それぞれにIdを設定する必要があり、
そのIdと入力値がKeyとValueの関係になり、turnContext.Activity.Valueに格納されています。
Idを振ったアダプティブカードのJsonがこちらになります。
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"wrap": true,
"text": "デモ版のアダプティブカードです。"
},
{
"type": "Input.Text",
"placeholder": "名前を入力してください",
"id": "inputName"
},
{
"type": "Input.Date",
"id": "inputDate"
},
{
"type": "Input.Time",
"id": "inputTime"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "送信する"
}
]
}
"body"の各項目にIdが定義されています。
このIdはユニークなものである必要があるので重複しないように気をつけてください。
アダプティブカードデザイナーではPreview modeを使用することで実際に送信される値を確認することができます。
送信ボタンを押下後
入力された値がIdと紐づいて送信されていることが確認できます。
これでアダプティブカード側の設定は終わったので、
BotFrameworkで受け取る処理を実装すれば完了です。
//入力された値をJObjectへ詰める
string testString = TurnContext.Activity.Value.ToString();
JObject details = JObject.Parse(testString);
//各項目の値を取得する
var inputName = details["inputName"];
var inputDate = details["inputDate"];
var inputTime = details["inputTime"];
これで値が取得できます。
###まとめ
アダプティブカードの値をBot Frameworkで取得するには
①アダプティブカードのInput項目にIdを定義する。
②アダプティブカードにAction.submitのボタンを定義する。
③Bot FrameworkにTurnContext.Activity.Valueの値を取得する処理を実装する。