Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Adaptive Cardのデザインツール

2 641 vues

Publié le

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

Publié dans : Technologie
  • 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

×