Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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) のハンズオンのスライドです。

Takashi Shinohara

December 01, 2021
Tweet

More Decks by Takashi Shinohara

Other Decks in Programming

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