Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adaptive Cardのデザインツール

2,706 views

Published on

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

Published in: Technology
  • Login to see the comments

Adaptive Cardのデザインツール

  1. 1. 第7回 Cogbot 勉強会 2017年7月28日 瀬尾佳隆 (@seosoft) Microsoft MVP for Windows Dev Adaptive Card の デザインツール
  2. 2. 自己紹介 瀬尾佳隆 (せおよしたか) • MVP for Windows Development • http://yseosoft.wordpress.com/ • 乃木坂46 / 欅坂46 と、仏像 / 屏風絵が好き  Cogbot コミュニティ スタッフ  Techfair 主宰 2
  3. 3. Adaptive Card “カード” のリッチなデザインと表示を行う仕組み • カード = ひとかたまりの情報 • ChatBotの吹き出し、タイル、トースト、・・・ • マルチプラットフォーム 3
  4. 4. スキーマ 4
  5. 5. スキーマ 5 • http://adaptivecards.io/explorer/ • Adaptive Card に配置できる要素 • 最初にざっと見る、開発中に随時見る
  6. 6. Visualizer 6
  7. 7. Visualizer 7 • http://adaptivecards.io/visualizer/ • リアルタイムで見た目を確認しながら開発 • Adaptive Card 開発の基本
  8. 8. Visual Studio 8
  9. 9. Visual Studio 9 • Intellisense 最強 • 適宜 Visualizer にコピペしてレイアウトチェック
  10. 10. Visual Studio Code 10
  11. 11. Visual Studio Code 11 • IntelliSense + リアルタイムのデザインチェック • “Adaptive Card Viewer” 拡張機能をインストール • Shift + Ctrl + V → A でビューアー表示
  12. 12. 続きは Web で https://yseosoft.wordpress.com/ • Bot Framework の Activity • カード • Adaptive Card などをまとめました 12

×