Bot Framework の AdaptiveCard で要素を横方向に並べる (C# の場合)

Bot Framework でリッチなレイアウトを実現できるのが AdaptiveCard です。

要素を縦に並べるのであれば、AdaptiveCard.Body に順に Add していきます。

では、要素を横に並べたい場合はどうするかというと、

  1. Body に ColumnSet を Add
  2. その ColumnSet に Column を Add
  3. さらにその Column の中に要素を Add

していきます。文章だと分かりづらいですね・・・。


具体的にコードを見ていきます。

private static async Task ReplyColumnSetAdaptiveCard(IDialogContext context, Activity activity)
{
    var reply = activity.CreateReply();
    reply.Text = "要素を横に並べるにはColumnSetを使います";

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

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

    reply.Attachments.Add(attachment);

    await context.PostAsync(reply);
}

private static AdaptiveCard CreateColumnSetAdaptiveCard(string title, string subtitle, string imagePath)
{
    var card = new AdaptiveCard();

    var columnSet = new ColumnSet();
    card.Body.Add(columnSet);

    var leftColumn = new Column();
    leftColumn.Items.Add(new Image
    {
        Url = imagePath,
        AltText = title,
        Size = ImageSize.Medium,
    });
    leftColumn.Size = "auto";
    columnSet.Columns.Add(leftColumn);

    var rightColumn = new Column();
    rightColumn.Items.Add(new TextBlock
    {
        Text = title,
        Size = TextSize.ExtraLarge,
        Color = TextColor.Accent
    });
    rightColumn.Items.Add(new TextBlock
    {
        Text = subtitle
    });
    columnSet.Columns.Add(rightColumn);

    card.Body.Add(new TextBlock
    {
        Text = subtitle,
        Color = TextColor.Warning
    });

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

    return card;
}

Activity の作り方、カードの Attach の仕方などは、他の種類のカードColumnSet を使用しない AdaptiveCard と全く同じです。

ColumnSet を AdaptiveCard.Body に Add するのも、他の要素と同じです。
ColumnSet に Column を複数個置けますが、置きすぎには注意です。Bot はフルスクリーンで動かすようなアプリではないので、カードのサイズ(幅も高さも)には気を付ける必要があります。

AdaptiveCard_ColumnSet_act

Column の使い方で一つ覚えておくといいのは、Size プロパティですね。”auto” を指定すると自動的にサイズを調整してくれます。
上のコードでいうと、画像のサイズに合わせて Column も最小のサイズにしてくれます。この指定がないと、例えば 2個の Column ならば、それぞれ Card の半分の幅になるので、他の要素の配置にもよりますが「間延び」して見えることもありそうです。


AdaptiveCard の Visualizer を使うと、リアルタイムで視覚的にレイアウトを確認しながら AdaptiveCard を開発できます。それについてはまた改めて。

今回のカードも簡単な構造ですが、サンプルを参考に凝った(=ユーザーに伝わりやすい)、でも、やりすぎないレイアウトを考えてみてください。

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

Bot Framework の AdaptiveCard で要素を横方向に並べる (C# の場合) への1件のフィードバック

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

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中