Bot Framework で AdaptiveCard を使う (C# の場合)

Bot Framework で大事なのが Activity の理解であることだということを、前回の記事 で紹介しました。

Bot からのメッセージとして、画像やボタンを含むメッセージを送信したいこともあり、
その場合は、大きめのサイズの画像を含む HeroCard、または小さめのサイズの画像を含む ThumbnailCard を使います。

HeroCard と ThumbnailCard は画像のサイズに違いはありますが、

  • タイトル
  • サブタイトル
  • 画像
  • ボタン

を置くことができ、これらの要素はそれぞれのカードで決まった位置に配置されます。
これは別の見方をすると、内容にもレイアウトにも制約があるということです。含める画像は一つです。タイトル・サブタイトル以外の追加の情報を含めることもできません。(Activity 自体の Text プロパティを組み合わせれば、もう一つのテキストを使えることになりますが)


この制約を超えられるのが AdaptiveCard です。Build 2017 で発表されました。

名前からわかる通り、AdaptiveCard もカードの一種です。Acitivity への添付の仕方は他のカードと同じです。

カードに含む要素をどうやって指定するかが、AdaptiveCard のポイントです。
AdaptiveCard に含められる要素(Schema)は、Schema Explorer で確認できます。これらを組み合わせて、よりリッチなカードを作ることができます。

以下では、C# で AdaptiveCard を作り、Bot からのメッセージとして送信してみます。
簡単な例ですが、AdaptiveCard の使い方がわかると思います。


C# のプロジェクトで AdaptiveCard を使うには、AdaptiveCard の NuGet パッケージをインストールします。”Microsoft.AdaptiveCards” がそれです。

nuget_adaptivecard

AdaptiveCard は、まずインスタンスを作り、続いて Body プロパティに必要な要素をd Add していきます。
すべての要素は縦方向に順に並びます。(横に並べる方法は次回のお楽しみ、ColumnSet を使います)

private static AdaptiveCard CreateAdaptiveCard(string title, string subtitle, string imagePath)
{
    var card = new AdaptiveCard();
    card.Body.Add(new TextBlock
    {
        Text = title,
        Size = TextSize.ExtraLarge,
        Color = TextColor.Accent
    });
    card.Body.Add(new TextBlock
    {
        Text = subtitle
    });
    card.Body.Add(new Image
    {
        Url = imagePath,
        AltText = title,
        Size = ImageSize.Large,
    });
    card.Body.Add(new TextBlock
    {
        Text = subtitle,
        Color = TextColor.Warning
    });

    card.Actions.Add(new SubmitAction
    {
        Title = title,
        Data = title
    });

    return card;
}

 

AdaptiveCard ができたら、他の種類のカードとまったく同じように Activity.Attachments に Add します。

private static async Task ReplyAdaptiveCard(IDialogContext context, Activity activity)
{
    var reply = activity.CreateReply();
    reply.Text = "AdaptiveCard は Build 2017 で発表されました";

    var card = CreateAdaptiveCard("正面", "カメラ目線",
        "http://~/botneko_1.jpg");

    var attachment = new Attachment
    {
        Content = card,
        ContentType = "application/vnd.microsoft.card.adaptive",
        Name = "Adaptive Card デモ"
    };

    reply.Attachments.Add(attachment);

    await context.PostAsync(reply);
}

 

これで Bot からリッチな AdaptiveCard を送信できます。(今回はかなりシンプルですが)

AdaptiveCard

現時点での注意としては、AdaptiveCard はまたまだ開発途中の技術であること。残念な点としては、Skype がまだ AdaptiveCard に対応していないことです。

それでも、そう遠くない時期に Skype も AdaptiveCard に対応するはずですし、Bot からリッチで綺麗な情報をユーザーに返せるようになるわけなので、まずは触ってみることをお勧めします。
Bot の活用がもっと進むといいですね。

広告
カテゴリー: Bot Framework, Bot Service, Cogbot, 未分類 タグ: , , パーマリンク

Bot Framework で AdaptiveCard を使う (C# の場合) への3件のフィードバック

  1. ピンバック: Bot Framework の AdaptiveCard で要素を横方向に並べる (C# の場合) | 技術との戯れ

  2. ピンバック: Bot Framework の AdaptiveCard を Visualizer でデザインする | 技術との戯れ

  3. ピンバック: 「Adaptive Card のデザインツール」 LTしました (第7回 Cogbot 勉強会 / 2017年7月28日) | 技術との戯れ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中