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

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

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

Takashi Shinohara

May 05, 2022
Tweet

More Decks by Takashi Shinohara

Other Decks in Programming

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