Teams アプリはさまざまサービスへのエントリーポイントの集合であるため、簡単に既存サービスを利用して Teams アプリを開発することができます。しかし、簡単に Teams アプリ化できるからといって、なんの指針も無しに Teams アプリを開発してしまうと、統一感がなく、ユーザーに違和感を与え、サービスそのものの体験が低下します。 このセッションは、Teams アプリに求められる品質というものがどういうものであり、どう満たすか? そのポイントとそれを実装するためのツールやドキュメントを紹介し、AppSource の審査基準を満たす品質の高い Teams アプリ開発の手助けとなることを目的としています。

1. 高品質な 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

4. アジェンダ

6. Microsoft Teams
タブ、パーソナル
アプリ
通知
ボット
メッセージング
拡張
コネクター
& ウェブフック
タスク モ
ジュール
アプリが
解決すべき課題
ウェブ テクノロジー
Microsoft Graph
SharePoint
Framework (SPFx)
Visual Studio + Visual Studio Code
GitHub
Microsoft Bot Framework
Power Platform
独自のニーズを
満たすために
Microsoft
Teams 上で
ソリューションを
構築

7. • 各コア機能ごとに用意されているデザインガイド
• 概念からベスト プラクティスまでを紹介
• ストア公開ポリシー
• 審査ガイドライン
デザインガイドとポリシー、ガイドラインについてのドキュメントを活用
• Teams ネイティブの(Teams 自体が提供しているかの)ような
統一感のあるユーザー体験を提供
• 使用頻度が高い
• 高い安全性 (セキュリティ/コンプライアンス)

10. • UI デザイン
- ビジュアルデザイン
- ユーザビリティ
- アクセシビリティ
• マルチデバイス対応
- デスクトップ/Web
- モバイル
• コラボレーション
- スコープ
- 機能間連携
- SaaS 連携
タブ

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 テンプレートとコンポーネントが提供

15. • Teams がサポートする各デバイスで動作すること
- 同等の機能でなくても可
- デバイスの画面サイズに合わせた UI を提供
⇒ レスポンシブ対応

16. メディア クエリの使用
<link rel="stylesheet" media="screen and (min-width: 1024px)" href="main.css" />
@media screen and (min-width: 1024px)
{
.main_menu {
display: block;
}
. hamburger_ menu{
display: none;
}
}
画面サイズでロードする CSS ファイルを切り替える
画面サイズで適用する CSS 設定を切り替える デスクトップ : メニューバー
モバイル : ハンバーガーメニュー

17. CSS グリッド デザイン
.cssgrid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 0.8em;
border: 1px solid #ddd;
padding: 0.8em;
margin: 0 0 2em;
}
① ②
③
④
⑤ ⑥
⑦ ⑧
① ②
③
④
⑤ ⑥
デスクトップ モバイル
画面サイズに合わせて自動で子要素の並び/レイアウトを変更
三
menu1 menu2 menu3

18. デバイス許可要求で
ネイティブ デバイスの機能が利用可能
•メディア機能
- カメラ
- マイク
- ギャラリー
- QR または
バーコード スキャナー
•ロケーション
"devicePermissions": [
"media",
"geolocation",
"notifications",
"midi",
"openExternal"
],
manifest.json

19. Accessibility Insights
Visual Studio Code - Web Accessibility 拡張
Visual Studio - Web Accessibility Checker

20. • Adaptive Cards タブを使用
- UI の描画は Teams が行う
- Adaptive Cards はモバイルデバイスも
サポート
• SharePoint Framework (SPFx) を
使用して開発
- UI が Fluent UI デザイン システムに準拠
- モバイル対応もフレームが吸収
- Teams とのシームレスな機能連携
タブ アプリの使用については
要検討

21. オンボーディング エクスペリエンスの実装
※フォームにウォーターマークが
使用されている例
SSO (Single-SignOn) の実装

22. 左メニューバー、
ヘッダロゴ、ヘッダメニューなど、
Teams UIコンポーネントの被り
Webサイトをそのまま取り込んだ
だけのタブアプリ
長すぎるボットコマンドと
ボタン
自然言語に対応した
ボットなのか、コマンドに対
応したボットなのかまるで分
らないインターフェース
ヘルプコマンドがない
Take a Tour的なコマンドが
ない
何ができるのか分からないア
クションコマンド（アプリ名
のみ）
初期検索結果が表示されない
メッセージ拡張
（デフォルトクエリは何でも
可）
どう検索して良いのか分から
ないメッセージ拡張検索

24. • Personal (個人) (※サポートを推奨)
• Team (チーム)
• Group Chat (グループ チャット)
• Meeting (会議)

25. アクティブなフォーラムで共同作業、
情報に基づいたコミュニケーション、
共有フィードバックが可能
• ミーティング アプリ API
• 会議ライフサイクルの各ステージ
(会議前、会議中、会議後)に対して
ユーザー エクスペリエンスを提供
• 会議中にサイド パネルや
ダイアログ ボックスを表示
• 会議の開始や終了などのイベントを
通じて、会議関連のワークフローを
自動化

26. オンライン会議の
メインステージでアプリを共有
• Teamsミーティングの
「メインステージ」を拡張
• ユーザーがアプリを追加し、
他の参加者と共有
• その場でのコラボレーションが可能

27. • ディープ リンク
• タスク モジュール
• ステージビュ
• アクティビティ フィード通知
Teams の機能を組み合わせ、1つ以上のTeams内で完結するタスクを実装
シナリオ例 ) ボットが会話の応答としてディープリンクを返し、ユーザーはそれをク
リックすることでタブ アプリに遷移

28. Microsoft Graph API

29. Microsoft Teams
タブ、パーソナル
アプリ
通知
ボット
メッセージング
拡張
コネクター
& ウェブフック
タスク モ
ジュール
アプリが
解決すべき課題

30. • 個人用アプリをデザインする
• デスクトップ、Web、およびモバイル用のデザイン タブ
• ボットをデザインする
• メッセージング拡張機能のデザイン
• 会議拡張機能の設計
• ストア公開ポリシー
• 審査ガイドライン

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

32. © 2021 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing
market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.