Azureの小ネタ (改)

~Azureネタを中心に、色々とその他の技術的なことなどを~

Bot Framework の Dialog で画像を表示させる

Bot Frameworkのチラ裏メモ。Dialog 中に画像を返したかったので、調べたメモ。

画像そのものじゃなくて、Card(という名のよくあるUI部品)を使えば返せるっぽい。

docs.microsoft.com

説明は端折りますが、いくつかカードの種類があります。

HeroCardとかを使うと

A card that typically contains a single large image, one or more buttons, and text.

なので、画像を返せる感。

Bot Emulator で実行すると、以下。 f:id:StateMachine:20170609184941p:plain

下記のようなコードで実現できた。

 var message = context.MakeMessage();
            message.Text = "Hello!";
            message.Locale = "ja";
            message.Attachments.Add(
                new HeroCard
                {
                    Title = $"ライオン",
                    Images = new List<CardImage>
                    {
                        new CardImage
                        {
                            Url = "http://free-photos-ls04.gatag.net/thum01/gf01a201503290600.jpg"
                        }
                    },
                }.ToAttachment());

            await context.PostAsync(message); 

埋め込みイメージの場合、Attachement を以下のようにすれば、大丈夫です。

                var imageData = Convert.ToBase64String(image.ToArray());

                return new Attachment
                {
                    Name = "small-image.png",
                    ContentType = "image/png",
                    ContentUrl = $"data:image/png;base64,{imageData}"
                };

以上