アダプティブカードに入門する

#アダプティブカードとは

チャットボットの開発などで、ユーザーに送信するメッセージに入力フォーム等を含めたいときに使用します。
例えば日付や時間、入力必須のバリデーションチェックまでもアダプティブカードを使用すれば簡単に実装できます。

例えば、チャットボットの開発でユーザーに日付や時間を入力してほしいケースなどで使用することでユーザー的にも開発側にも実装がしやすくなるメリットがあります。

以下、Microsoftの公式ドキュメントです。
https://docs.microsoft.com/ja-jp/power-automate/overview-adaptive-cards

##アダプティブカードを作成してみよう

アダプティブカード自体はJsonで作成します。
と言っても初めての方に難しいと思うので、試しに一つ作成してみました。

test.json

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "wrap": true,
            "text": "デモ版のアダプティブカードです。"
        },
        {
            "type": "Input.Text",
            "placeholder": "名前を入力してください"
        },
        {
            "type": "Input.Date"
        },
        {
            "type": "Input.Time"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "送信する"
        }
    ]
}

上記のjsonはアダプティブカードとしてこのようにレンダリングされます。

このアダプティブカードでは、以下の三つのことを実現しています。
1、ユーザーが名前を入力する。
2、日付を入力する。
3、時間を入力する。

チャットボットでこのカードをユーザーへ送信するにはBotFrameworkなどプログラム側からメッセージを作成する際このjsonを呼び出します。
(アダプティブカードの送信方法については後日別の記事でまとめようと思います・・・)

ここまでだとアダプティブカードの作成には深い知識がいるのではと思った方もいるかもしれません。
しかし実はアダプティブカードは簡単に作成できます。
それがこのサイトです。
https://adaptivecards.io/designer/

このサイトの左の赤枠の部分にパーツがあるのでそれをカードの上にドラッグするとパーツがカードの上に実装されます。
そして画面下の方にJsonもともに作成されるので、後はそのJson部分をコピーして保存するだけです。

パーツも多く用途にあったアダプティブカードを簡単に作成できます。
しかし、私が今携わっているチャットボットの開発では、少し踏み入った実装をする必要があったのでそこで学んだことについては次回投稿しようと思います。