Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

M365VIRTUALMARATHON.COM #M365VM MICROSOFT 365 VIRTUAL MARATHON 2022 SPONSORS

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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 名前空間

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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" } ] } }

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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