Teams アプリはさまざまサービスへのエントリーポイントの集合であるため、簡単に既存サービスを利用して Teams アプリを開発することができます。しかし、簡単に Teams アプリ化できるからといって、なんの指針も無しに Teams アプリを開発してしまうと、統一感がなく、ユーザーに違和感を与え、サービスそのものの体験が低下します。 このセッションは、Teams アプリに求められる品質というものがどういうものであり、どう満たすか? そのポイントとそれを実装するためのツールやドキュメントを紹介し、AppSource の審査基準を満たす品質の高い Teams アプリ開発の手助けとなることを目的としています。
2. • Teams アプリの機能概要
https://youtu.be/tZ9vgWarvAI
• Microsoft Teams 開発者向け簡易チュートリアル
https://github.com/osamum/Easyway-for-MSTeamsAppDev
• Microsoft Graph API を使用するための
簡易チュートリアル
https://github.com/osamum/Firstway_to_MSTeamsGraphAPI
6. Microsoft Teams
タブ、パーソナル
アプリ
通知
ボット
メッセージング
拡張
コネクター
& ウェブフック
タスク モ
ジュール
アプリが
解決すべき課題
ウェブ テクノロジー
Microsoft Graph
SharePoint
Framework (SPFx)
Visual Studio + Visual Studio Code
GitHub
Microsoft Bot Framework
Power Platform
独自のニーズを
満たすために
Microsoft
Teams 上で
ソリューションを
構築
11. • Teams と統一感を出すために
• Fluent Design System のデザインガイドに準拠
• Fluent UI コンポーネントを利用
基本的な UI コンポーネントを使用Fluentアプリを設計する - Teams | Microsoft Docs
12. Teams アプリに Fluent デザインUI を
実装するためのライブラリとツール
• Microsoft Teams UI Kit
• Microsoft Teams UI Component
Library(React)
• Playground
• Fluent UI Web (React/ Web
Component)
Teams アプリ 用 Fluent UI テンプレートとコンポーネントが提供
31. • Microsoft Teams UI Kit
• Microsoft Teams UI Component Library(React)
• Playground
• Fluent UI Web (React/ Web Component)
Accessibility Insights
Visual Studio Code - Web Accessibility 拡張
Visual Studio - Web Accessibility Checker