Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development

Transcript

1. MAY, 4 – 6, 2022
   MICROSOFT 365 VIRTUAL MARATHON 2022
   Takashi Shinohara
   Microsoft Teams の
   会議アプリ開発のはじめかた
   

   View Slide

2. M365VIRTUALMARATHON.COM #M365VM
   MICROSOFT 365 VIRTUAL MARATHON 2022 SPONSORS
   

   View Slide

3. M365VIRTUALMARATHON.COM #M365VM
   篠原 敬志 (Takashi Shinohara)
   Microsoft MVP for Office Development
   ▪ アバナード株式会社 マネージャー
   ▪ SharePoint をベースとしたアプリケーション開発に従事していました。近年は
   Power Platform、Microsoft 365、Microsoft Azure を使った DX の支
   援を実施しています。アジャイル コーチ/スクラム マスターとしても活動しています。
   ▪ Twitter: @karamem0
   

   View Slide

4. M365VIRTUALMARATHON.COM #M365VM
   こんなもの作っています: Teamtile
   参加中のチームをタイル
   で表示することで素早く
   アクセスできます
   

   View Slide

5. M365VIRTUALMARATHON.COM #M365VM
   こんなもの作っています: Commistant
   会議の開始時、終了時、
   開催中に事前に設定し
   たメッセージを送信します
   

   View Slide

6. M365VIRTUALMARATHON.COM #M365VM
   数字から見る Microsoft Teams
   1.45
   億人
   デイリー アクティブ
   ユーザー数
   94
   %
   日経 225
   採用率
   

   View Slide

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

   View Slide

8. M365VIRTUALMARATHON.COM #M365VM
   Microsoft Teams のカスタマイズ
   個人用アプリ タブ ボット コネクタ
   メッセージ拡張 会議用アプリ
   New!
   Together モード
   New!
   今日の
   トピック
   

   View Slide

9. M365VIRTUALMARATHON.COM #M365VM
   Microsoft Teams アプリのアーキテクチャ
   User
   Developer
   Microsoft Teams
   Client
   Microsoft Teams
   Admin Center
   Azure Bot Service
   Azure App Service
   Upload
   App
   Manifest
   Install App
   Chat
   Tab
   

   View Slide

10. M365VIRTUALMARATHON.COM #M365VM
    会議用アプリの機能
    会議前 会議中 会議後
    タブ
    ボット
    メッセージ拡張
    サイドパネル
    通知 (タスク モジュール)
    会議ステージへの共有
    タブ
    ボット
    メッセージ拡張
    

    View Slide

11. M365VIRTUALMARATHON.COM #M365VM
    会議前または会議後
    タブ、ボット、メッセージ拡張
    の基本的な機能は同じ
    会議アプリ API を使用する
    ことで会議の詳細を取得で
    きる
    

    View Slide

12. M365VIRTUALMARATHON.COM #M365VM
    会議中
    タブを会議のサイドパネルに
    表示できる
    タブの一部または全体を共
    有できる (会議に参加して
    いる人には同じ状態が共有
    される)
    

    View Slide

13. M365VIRTUALMARATHON.COM #M365VM
    会議用アプリの制限
    会議中のエクスペリエンスは
    現時点では Web 版の
    Teams アプリでは対応して
    いない
    

    View Slide

14. M365VIRTUALMARATHON.COM #M365VM
    会議前
    会議のアジェンダを作成する
    会議中
    ToDo を共有して会議を効率的に実施する
    会議後
    会議のフィードバックを収集する
    会議用アプリの例
    

    View Slide

15. M365VIRTUALMARATHON.COM #M365VM
    会議用アプリ API
    会議用アプリ API には 2 種類ありできることが異なる
    Microsoft Teams Client (MSTC) SDK
    @microsoft/teams-js
    microsoftTeams.meeting 名前空間
    Microsoft Bot Framework (MSBF) SDK
    Microsoft.Bot.Schema.dll
    Microsoft.Bot.Schema.Teams 名前空間
    

    View Slide

16. M365VIRTUALMARATHON.COM #M365VM
    会議用アプリ API (MSTC)
    メソッド メソッド
    ユーザー コンテキストを取得する microsoftTeams.getContext
    リアルタイム キャプションを送信する https://api.captions.office.microsoft.com/cartcaption
    アプリ コンテンツをステージに共有する microsoftTeams.meeting.shareAppContentToStage
    アプリ コンテンツ ステージの共有状態を取得する microsoftTeams.meeting.getAppContentStageSharingState
    アプリ コンテンツ ステージの共有機能を取得する microsoftTeams.meeting.getAppContentStageSharingCapabilities
    

    View Slide

17. M365VIRTUALMARATHON.COM #M365VM
    会議用アプリ API (MSBF)
    メソッド メソッド
    参加者を取得する TeamsInfo.GetMeetingParticipantAsync
    会議中の通知を送信する TurnContext.SendActivityAsync
    会議の詳細を取得する TeamsInfo.GetMeetingInfoAsync
    リアルタイムの Teams 会議イベントを取得する TeamsActivityHandler.OnTeamsMeetingStartAsync
    TeamsActivityHandler.OnTeamsMeetingEndAsync
    

    View Slide

18. M365VIRTUALMARATHON.COM #M365VM
    リソース固有のアクセス許可 (RSC)
    アプリが Microsoft Graph を使用して組織内の特定のリソースを管理できるようにする
    現時点では Microsoft Teams のチームまたはチャットのみがリソース固有のアクセス許可を使用できる
    アクセス許可は Azure AD アプリケーションではなく Teams アプリ マニフェスト (1.11 以上) に記載する
    会議用アプリ API のいくつかはリソース固有のアクセス許可が必要になる
    

    View Slide

19. M365VIRTUALMARATHON.COM #M365VM
    リソース固有のアクセス許可の同意の設定
    Azure AD の [エンタープライ
    ズ アプリケーション] - [同意と
    アクセス許可] で構成する
    同意が許可されていない場
    合はアプリのインストール時
    にエラーになる
    

    View Slide

20. M365VIRTUALMARATHON.COM #M365VM
    リソース固有のアクセス許可の確認
    /beta/chats/{chatid}/per
    missionGrants で会議
    (チャット) に対してのアクセス
    許可を確認できる
    

    View Slide

21. M365VIRTUALMARATHON.COM #M365VM
    アプリ マニフェスト (1.12)
    MSTC MSBF
    "authorization": {
    "permissions": {
    "resourceSpecific": [
    {
    "name": "OnlineMeeting.ReadBasic.Chat",
    "type": "Delegated"
    }
    ]
    }
    }
    "authorization": {
    "permissions": {
    "resourceSpecific": [
    {
    "name": "OnlineMeeting.ReadBasic.Chat",
    "type": "Application"
    }
    ]
    }
    }
    

    View Slide

22. M365VIRTUALMARATHON.COM #M365VM
    会議用アプリのデバッグ
    Developer
    Microsoft Teams
    Client
    Microsoft Teams
    Developer Portal
    Azure Bot Service
    Local Computer
    w/ ngork
    Manage
    App
    Manifest
    Install App
    Chat
    Tab
    

    View Slide

23. M365VIRTUALMARATHON.COM #M365VM
    Microsoft Teams
    Developer Portal の [App
    features] でボットを追加す
    る
    スコープに Team (チームの
    会議) または Group Chat
    (通常の会議) を選択する
    会議用アプリ (ボット) のデバッグ: Microsoft Teams Developer Portal
    

    View Slide

24. M365VIRTUALMARATHON.COM #M365VM
    [メッセージング エンドポイン
    ト] に ngrok の URL を指定
    する
    会議用アプリ (ボット) のデバッグ: Azure Bot Service
    

    View Slide

25. M365VIRTUALMARATHON.COM #M365VM
    Microsoft Teams
    Developer Portal の [App
    features] で会議用アプリを
    追加する
    [Configuration URL] に
    ngrok の URL を指定する
    (会議中エクスペリエンスの
    場合は ngrok が必須)
    会議用アプリ (タブ) のデバッグ: Microsoft Teams Developer Portal
    

    View Slide

26. MICROSOFT 365 VIRTUAL MARATHON 2022 MAY, 4. – 6. 2022
    DEMO
    

    View Slide

27. M365VIRTUALMARATHON.COM #M365VM
    会議用アプリといえどもタブとボット
    会議用アプリの API は MSTC や MSBF に含まれる
    会議用アプリの API を使うためにはリソース固有のアクセス許可を指定する
    会議用アプリのデバッグには ngrok が必須
    まとめ
    

    View Slide

28. MICROSOFT 365 VIRTUAL MARATHON 2022 MAY, 4. – 6. 2022
    https://forms.office.com/r/qCXhcZZUgU
    スピーカーおよびイベント への感
    想やご意見
    アンケートにご協力ください
    

    View Slide