第7回 Cogbot勉強会（2017年7月28日(金) 開催）LT資料 Adaptive Cardのデザインに使えるツールの紹介

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