第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

Adaptive Cardのデザインツール