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)
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

5. Microsoft Teams 開発の概要
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

15. Microsoft Teams ハンズオン
    

    View Slide

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

    View Slide