Bot Framework の AdaptiveCard を Visualizer でデザインする

Bot Framework の AdaptiveCard 関連の第3回です。
(1回目は こちら、2回目は こちら。Bot Framework の Activity のまとめは こちら

今回は、AdaptiveCard のポータルサイトにある Visualizer で開発してみます。
実際の見た目を確認しながら開発できるので C# よりも簡単にデザインできます。(だったら、最初からこれを紹介すればいいのにという声は今回はスルー)

Visualizer


AdaptiveCard に配置できる要素は、Adaptive Card ポータルSchema Explorer で確認できます。
その上で Visualizer で開発しますが、イメージを膨らませるにはまずサンプルを見てみるのがいいと思います。

今回は Visualizer の操作やデザイン自体には踏み込まず、サンプルの Weather Large をそのまま C# の Bot アプリケーションに組み込むことにします。

  1. Visualizer でカードをデザインし(今回はサンプルそのままですが)、JSON のコードを丸ごとクリップボードにコピーします。
    Visualizer Copy
  2. Bot アプリケーションのプロジェクトで、App_Data フォルダーを作り、ここに空の JSON ファイルを一つ作ります。
    (※App_Data フォルダーでなくてもいいですが)
    Create JSON File
  3. 今作った JSON ファイルに、Visualizer でコピーしたソースを貼り付けます。
    adaptivecard_json_source
  4. RootDialog.cs に以下のようなメソッドを追加します。(もちろん、MessageReceivedAsync メソッドに、以下のメソッドを呼び出すコードの追加も忘れずに)
    private static async Task ReplyJsonAdaptiveCard(IDialogContext context, Activity activity)
    {
        var directory = HttpContext.Current.Server.MapPath("~/app_data/");
        var jsonpath = Path.Combine(directory, "weather.json");
    
        string json;
        using (var sr = new StreamReader(jsonpath))
        {
            json = await sr.ReadToEndAsync();
        }
    
        var card = JsonConvert.DeserializeObject<AdaptiveCard>(json);
    
        var reply = activity.CreateReply();
        reply.Text = "CardのレイアウトはJsonで定義できます";
    
        var attachment = new Attachment
        {
            Content = card,
            ContentType = "application/vnd.microsoft.card.adaptive",
            Name = "Jsonデモ"
        };
    
        reply.Attachments.Add(attachment);
    
        await context.PostAsync(reply);
    }
    

手順は以上です。

実行するとこんな見た目になります。

AdaptiveCard Json

現時点ではまだ Preview です。またChannel ごとの制約(Coming soon だったり、レンダリングに特徴があったり)もありますが、工夫次第でユーザーに分かりやすい応答を行う Bot が作れそうです。

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

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中