1.
第7回 Cogbot 勉強会
2017年7月28日
瀬尾佳隆 (@seosoft)
Microsoft MVP for Windows Dev
Adaptive Card の
デザインツール

2.
自己紹介
瀬尾佳隆 (せおよしたか)
• MVP for Windows Development
• http://yseosoft.wordpress.com/
• 乃木坂46 / 欅坂46 と、仏像 / 屏風絵が好き
 Cogbot コミュニティ スタッフ
 Techfair 主宰
2

3.
Adaptive Card
“カード” のリッチなデザインと表示を行う仕組み
• カード = ひとかたまりの情報
• ChatBotの吹き出し、タイル、トースト、・・・
• マルチプラットフォーム
3

4.
スキーマ
4

5.
スキーマ
5
• http://adaptivecards.io/explorer/
• Adaptive Card に配置できる要素
• 最初にざっと見る、開発中に随時見る

6.
Visualizer
6

7.
Visualizer
7
• http://adaptivecards.io/visualizer/
• リアルタイムで見た目を確認しながら開発
• Adaptive Card 開発の基本

8.
Visual Studio
8

9.
Visual Studio
9
• Intellisense 最強
• 適宜 Visualizer にコピペしてレイアウトチェック

10.
Visual Studio Code
10

11.
Visual Studio Code
11
• IntelliSense + リアルタイムのデザインチェック
• “Adaptive Card Viewer” 拡張機能をインストール
• Shift + Ctrl + V → A でビューアー表示

12.
続きは Web で
https://yseosoft.wordpress.com/
• Bot Framework の Activity
• カード
• Adaptive Card
などをまとめました
12