Japan Microsot 365 Developer Community Day 2021: Microsoft Teams ハンズオン / Japan Microsot 365 Developer Community Day 2021: Microsoft Teams Hands-on

Japan Microsoft 365 Developer Community Day 2021 (https://jpm365dev.connpass.com/event/227478) のハンズオンのスライドです。

Transcript

1. Microsoft Teams ハンズオン Japan Microsot 365 Developer Community Day 2021 2021/12/1 篠原 敬志 (@karamem0)
2. 自己紹介 篠原敬志 (Takashi Shinohara) アバナード株式会社 マネージャー Microsoft MVP for Office Development (2018-) Japan M365 Dev User Group 運営 SharePoint をベースとしたアプリケーション開発に従事。近年は Power Apps や Power Automate や Microsoft Teams を使った DX の支 援を実施。本業はアジャイル コーチ/スクラム マスター。
3. 事前のお願い ハンズオン環境のセットアップをお願いします！ https://github.com/karamem0/japan-microsoft-365-developer-community-day- 2021 Node.js (16.13.0) Visual Studio Code C# 拡張 Git for Windows .NET Core 3.1 SDK Google Chrome
4. アジェンダ Microsoft Teams 開発の概要 Microsoft Teams ハンズオン React プロジェクトを作成する Teams アプリを作成する シングル サインオンを実装する Microsoft Graph API を実行する Microsoft Teams のテーマを適用する
5. Microsoft Teams 開発の概要
6. Microsoft Teams の数字 1.45 億人 デイリー アクティブ ユーザー数 94 % 日経 225 における 採用企業の割合 出典: https://toyokeizai.net/articles/-/426962
7. Microsoft Teams のコア機能 チャット 会議 電話 ファイル
8. Microsoft Teams のカスタマイズ 個人用アプリ タブ ボット コネクタ メッセージ拡張 ミーティング拡張 Together モード
9. Teams アプリの開発方法 組織外 組織内 チーム
10. Teams アプリ (個人用アプリ) の原理 Teams クライアント Web サービス アプリ マニフェスト 登録 定義 表示
11. Teams アプリ (個人用アプリ) の要件 以下の要件を満たす Web サイト であれば個人用アプリにすることができる HTTPS 表示できること iframe 読み込みが許可されていること Microsoft Teams の機能を使いたいのであれば SDK (JavaScript) を使用する Web サイトの開発方法に制限はないが React が推奨されている
12. Teams アプリの開発ツール Microsoft Teams App Generator (Yo Teams) PnP チームによる開発ツール。Yeoman と Gulp を使っている。 Microsoft Teams Toolkit (TeamsFx) Microsoft 公式の開発ツール。Visual Studio および Visual Studio Code の拡張機能とし て統合されている。Create React App を使っている。
13. TeamsFx の機能 パッケージ 説明 Visual Studio Code Extension Visual Studio Code 向けの拡張機能 TeamsFx CLI CI/CD でアプリをデプロイするための CLI SDK フロントエンド (JavaScript) 向けの SDK API TeamsFx を拡張するプラグインのために用意された API Core IDE 拡張または CLI のコア機能 Azure Functions Support バックエンド (Azure Functions) 向けのサポート機能 Simple Auth シングル サインオンを実現するためのサポート機能
14. TeamsFx のインフラストラクチャ Azure Storage (Frontend) UI Component UI Style Azure Functions (Backend) Business Logic Data Access Azure SQL Azure Web App SimpleAuth Microsoft Graph API 出典: https://github.com/OfficeDev/TeamsFx-Samples/tree/main/todo-list-with-Azure-backend
15. Microsoft Teams ハンズオン
16. 以下の URL にアクセス https://github.com/karamem0/japan-microsoft-365-developer-community-day- 2021