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

Japan Microsot 365 Developer Community Day 2021...

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. 自己紹介 篠原敬志 (Takashi Shinohara) アバナード株式会社 マネージャー Microsoft MVP for Office

    Development (2018-) Japan M365 Dev User Group 運営 SharePoint をベースとしたアプリケーション開発に従事。近年は Power Apps や Power Automate や Microsoft Teams を使った DX の支 援を実施。本業はアジャイル コーチ/スクラム マスター。
  2. アジェンダ Microsoft Teams 開発の概要 Microsoft Teams ハンズオン React プロジェクトを作成する Teams

    アプリを作成する シングル サインオンを実装する Microsoft Graph API を実行する Microsoft Teams のテーマを適用する
  3. Microsoft Teams の数字 1.45 億人 デイリー アクティブ ユーザー数 94 %

    日経 225 における 採用企業の割合 出典: https://toyokeizai.net/articles/-/426962
  4. Teams アプリ (個人用アプリ) の要件 以下の要件を満たす Web サイト であれば個人用アプリにすることができる HTTPS 表示できること

    iframe 読み込みが許可されていること Microsoft Teams の機能を使いたいのであれば SDK (JavaScript) を使用する Web サイトの開発方法に制限はないが React が推奨されている
  5. Teams アプリの開発ツール Microsoft Teams App Generator (Yo Teams) PnP チームによる開発ツール。Yeoman

    と Gulp を使っている。 Microsoft Teams Toolkit (TeamsFx) Microsoft 公式の開発ツール。Visual Studio および Visual Studio Code の拡張機能とし て統合されている。Create React App を使っている。
  6. 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 シングル サインオンを実現するためのサポート機能
  7. 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