第7回 Cogbot 勉強会2017年7月28日

瀬尾佳隆 (@seosoft)Microsoft MVP for Windows Dev

Adaptive Card のデザインツール

自己紹介

瀬尾佳隆 (せおよしたか)•MVP for Windows Development• http://yseosoft.wordpress.com/• 乃木坂46 / 欅坂46 と、仏像 / 屏風絵が好き

Cogbot コミュニティ スタッフ

Techfair 主宰2

Adaptive Card

“カード” のリッチなデザインと表示を行う仕組み•カード = ひとかたまりの情報

• ChatBotの吹き出し、タイル、トースト、・・・

•マルチプラットフォーム

3

スキーマ

4

スキーマ

5

• http://adaptivecards.io/explorer/

• Adaptive Card に配置できる要素• 最初にざっと見る、開発中に随時見る

Visualizer

6

Visualizer

7

• http://adaptivecards.io/visualizer/

• リアルタイムで見た目を確認しながら開発• Adaptive Card 開発の基本

Visual Studio

8

Visual Studio

9

• Intellisense 最強

• 適宜 Visualizer にコピペしてレイアウトチェック

Visual Studio Code

10

Visual Studio Code

11

• IntelliSense + リアルタイムのデザインチェック

• “Adaptive Card Viewer” 拡張機能をインストール• Shift + Ctrl + V → A でビューアー表示

続きは Web で

https://yseosoft.wordpress.com/• Bot Framework の Activity•カード• Adaptive Card

などをまとめました

12