Tweet
Tweet

Slide 1

Slide 1 text

Microsoft Teams ハンズオン Japan Microsot 365 Developer Community Day 2021 2021/12/1 篠原 敬志 (@karamem0)

Slide 2

Slide 2 text

自己紹介 篠原敬志 (Takashi Shinohara) アバナード株式会社 マネージャー Microsoft MVP for Office Development (2018-) Japan M365 Dev User Group 運営 SharePoint をベースとしたアプリケーション開発に従事。近年は Power Apps や Power Automate や Microsoft Teams を使った DX の支 援を実施。本業はアジャイル コーチ/スクラム マスター。

Slide 3

Slide 3 text

事前のお願い ハンズオン環境のセットアップをお願いします！ 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

Slide 4

Slide 4 text

アジェンダ Microsoft Teams 開発の概要 Microsoft Teams ハンズオン React プロジェクトを作成する Teams アプリを作成する シングル サインオンを実装する Microsoft Graph API を実行する Microsoft Teams のテーマを適用する

Slide 5

Slide 5 text

Microsoft Teams 開発の概要

Slide 6

Slide 6 text

Microsoft Teams の数字 1.45 億人 デイリー アクティブ ユーザー数 94 % 日経 225 における 採用企業の割合 出典: https://toyokeizai.net/articles/-/426962

Slide 7

Slide 7 text

Microsoft Teams のコア機能 チャット 会議 電話 ファイル

Slide 8

Slide 8 text

Microsoft Teams のカスタマイズ 個人用アプリ タブ ボット コネクタ メッセージ拡張 ミーティング拡張 Together モード

Slide 9

Slide 9 text

Teams アプリの開発方法 組織外 組織内 チーム

Slide 10

Slide 10 text

Teams アプリ (個人用アプリ) の原理 Teams クライアント Web サービス アプリ マニフェスト 登録 定義 表示

Slide 11

Slide 11 text

Teams アプリ (個人用アプリ) の要件 以下の要件を満たす Web サイト であれば個人用アプリにすることができる HTTPS 表示できること iframe 読み込みが許可されていること Microsoft Teams の機能を使いたいのであれば SDK (JavaScript) を使用する Web サイトの開発方法に制限はないが React が推奨されている

Slide 12

Slide 12 text

Teams アプリの開発ツール Microsoft Teams App Generator (Yo Teams) PnP チームによる開発ツール。Yeoman と Gulp を使っている。 Microsoft Teams Toolkit (TeamsFx) Microsoft 公式の開発ツール。Visual Studio および Visual Studio Code の拡張機能とし て統合されている。Create React App を使っている。

Slide 13

Slide 13 text

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 シングル サインオンを実現するためのサポート機能

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Microsoft Teams ハンズオン

Slide 16

Slide 16 text

以下の URL にアクセス https://github.com/karamem0/japan-microsoft-365-developer-community-day- 2021