Microsoft Teamsオンライン会議作成機能をBubbleで実装する方法

皆さんこんにちは。今回は、Microsoft Graph APIを使って、ビジネスオンライン会議ツールの代表であるTeamsのオンライン会議を作成できるBubbleアプリの実現方法をご紹介します。ぜひ業務効率化アプリの開発に活用してくださいね！

Microsoft Graph APIは、Microsoft Cloud サービスリソースへのアクセスを可能にするweb APIです。Teams以外にも様々なMicrosoft365サービスにアクセスすることができます。

なお、今回ご紹介する方法では、ユーザーは自分の会社や組織のアカウントにログイン（OAuth2.0を利用）してから会議を作成します。

また、今回の方法で作成した会議の予定はOutlookやTeamsのカレンダーには表示されないことにご留意ください。

事前準備

Microsoft365ビジネスプランに加入

Teamsオンライン会議を作成するAPIは、個人のMicrosoftアカウントでの利用をサポートしていません。学校・組織のアカウントを持っていない場合は以下からいずれかのMicrosoft365ビジネスプランに加入してください。

www.microsoft.com

Bubbleでアプリを作成・プラグインをインストール

まずは今回Teamsオンライン会議を作成できるようにするBubbleアプリを作成します。独自ドメインを使う場合は設定を完了させておいてください。

また、「プラグイン」タブ→「APIConnector」をインストールしておきます。

Azure Active Directoryでの登録

前のステップで作成したBubbleアプリに関する登録・設定をAzure Active Directory(AAD)で行います。

以下からMicrosoftビジネスアカウント・組織のアカウントでログインします。

portal.azure.com

ログインしたら、左上のナビゲーションバーから「Azure Active Directory」をクリックします。

アプリの登録

Bubbleアプリを登録します。左のメニューから「アプリの登録」を選択し、アプリの登録ページが開いたら「＋新規登録」をクリックします。

登録画面では以下の情報を入力して、画面下の完了をクリックしてください。

項目	値
アプリの名前	今回は「Bubble - login」としました。
サポートされているアカウントの種類	「任意の組織のディレクトリアカウント」を選択。
リダイレクトURI	タイプは「Web」、アドレス部分にはBubbleプラグイン「APIConnector」→「OAth2 User-Agent Flow」で確認できるgeneric redirect URLを入力します。URLはhttps://YOURDOMAIN/api/1.1/oauth_redirectの形式になっているはずです。

※generic redirect URLはこちら

「完了」クリックで、登録したアプリの概要ページが表示されます。

クライアントシークレットの作成

次に、クライアントシークレットを作成します。 画面左のメニューバーから「証明書とシークレット」をクリックし、画面中程の「＋新しいクライアントシークレット」をクリックします。

クライアントシークレットの追加画面では、以下の情報を設定し画面下の「追加」ボタンをクリックしてください。

項目	値
説明	使用用途などが分かる名前。
有効期限	適切なものを選択してください。セキュリティ上短期間にすることが推奨されています。最長24ヶ月に設定することが可能です。

追加すると、メニュー「証明書とシークレット」からシークレットの値とIDを確認することができます。これからのプロセスでは「値」を使用します。

APIの許可を構成・権限を付与

次に、Teamsオンライン会議を作成するAPIを使用する権限をアプリに付与します。

画面左のメニューの「APIのアクセス許可」をクリックし、画面中程の「＋アクセス許可の追加」をクリックします。

APIを選択する画面が開いたら、「Microsoft API」タブの「Microsoft Graph」を選択します。

次の画面で、アクセス許可の種類は「委任されたアクセス許可」を選択します。ユーザーが自分のアカウントにログインしてBubbleアプリからオンライン会議を作成するためです。

次の権限を追加してください。

項目	値
追加するAPIアクセス権限	offline_access / openid / profile / email / OnlineMeetings.ReadWrite / Chat.ReadWrite

一覧から上記の権限を探し、チェックボックスをオンにしたら左下の「アクセス許可の追加」ボタンをクリックしてAPI許可の構成完了です。

BubbleでAPIを呼び出す

ここからは、BubbleでAPIConnectorを使ってMicrosoft Graph APIを呼び出す設定をしていきます。

Teamsオンライン会議の作成では、APIConnectorを①アカウントでログイン、②会議を作成の2段階で動かします。

それでは、それぞれAPIを設定していきます。

①アカウントにログインする

OAth2.0フローの仕組みを利用してユーザーが自分のアカウントでログインできるように設定します。

APIConnectorの「Add another API」から新規作成し、以下を参考に設定してください。

項目	入力値
API Name	今回は「Log in - Authorization request」としました。
Authentication	OAuth2 User-Agent Flow
APP ID	AADの登録アプリの概要画面で確認できるアプリケーション（クライアント）ID。
APP Secret	作成したクライアントシークレットの値。
Scope	「APIの許可を構成・権限を付与」で構成したすべてのAPI権限。offline_access / openid / profile / email / OnlineMeetings.ReadWrite / Chat.ReadWrite
Authentication goes in the header	Yes
Header Key	Authorization: Bearer
Use a generic redirect URL	Yes
Login dialog redirect	https://login.microsoftonline.com/organizations/oauth2/v2.0/authorize
Access token endpoint	https://login.microsoftonline.com/organizations/oauth2/v2.0/token
User profile endpoint	https://graph.microsoft.com/v1.0/me
User ID key path	id
User email key path	mail

※アプリケーション（クライアント）IDの確認方法

AADにログイン→「アプリの登録」→「アプリ名」→概要

②オンライン会議を作成する

①のAPIに「Add Another Call」でオンライン会議を作成するCallを設定します。 使用するMicrosoft Graph APIはCreate onlineMeetingsです。

以下を参考に設定してください。

項目	入力値
Use as	Action
Data type	JSON
要求エンドポイント	POST https://graph.microsoft.com/v1.0/me/onlineMeetings
Header	Key : Content-type / Value : application/json / Private : Yes
Body type	JSON

「Body」には以下を入力し、変数を設定してください。

{
  "subject":"<Subject>",
  "lobbyBypassSettings": {"scope":"everyone"}
}

Body parameters

Key	Value	Private
Subject	test	No

※今回は変数を会議名にあたるsubjectのみにしましたが、その他の細かい設定をすることも可能です。詳しくは以下をご確認ください。

docs.microsoft.com

以上でAPIConnectorの設定は完了です。

Bubbleでデータベースやページを作成

データベース

まず、データベースは以下のように作成します。

会議名を保存するSubject field、オンライン会議参加用URLを保存するJoinWebUrl fieldｗ作成します。

ページ・Workflowの作成

ログインと会議作成に必要なページを作成します。

ページ

まずログインページにはOAuthログイン用のボタンを配置します。

会議作成ページには会議名のInput要素と会議作成ボタン等を配置します。

Workflow

・ログインページ

OAuthログインのWorkflowを設定します。

ボタンクリックでWorkflowを新規作成し、Actionは以下のように設定してください。

Step	Action
Step1	「Account」→「Signup/login with a social network」※OAuth providerは先ほど作成したOAuthログイン用のAPIを選択します。
Step2	「Navigation」→「Go to page...」で会議作成ページを選択。

ここで、PreviewでOAuthログインができるか試してみましょう。

ログインボタンをクリックし、アカウント選択画面でログインするアカウントを選択します。

APIアクセス許可を求められるので、問題なければ「承諾」ボタンをクリックします。ここではAADで登録したAPIアクセス権限が表示されます。

以下のメッセージが出ればOAuthログインの確認は完了です！

・会議作成ページ

会議作成ボタンクリックのWorkflowを設定します。

Step	Action
step1	「Plungins」→「Log in - Authorization request - Create Online Meeting」　※先ほど作成した会議を作成するAPI Call。変数Subjectの値を会議名入力ボックスの値にして、ユーザーが自由に会議名を設定できるようにします。
step2	「Data」→「Create a new OnlineMeeting...」　※会議名と参加用URLを保存する設定。

Bubbleを試行する

さて、ここまででBubbleアプリからTeamsオンライン会議を作成するために必要なすべての手順が完了したので、実際にBubbleを動かしてみましょう！！

会議作成ページで適当な会議名を入力し、「会議を作成する」ボタンをクリック。データベースを見ると会議名とURLが保存されていますね！

このURLをChrome等で開くと会議の参加ページにアクセスできますね。

「今すぐ参加」をクリックで会議に参加できました。

まとめ

今回は、Microsoft Graph APIを使ってTeamsオンライン会議を作れるBubbleアプリの実現方法をご紹介しました。今回の方法は、様々なMicrosoft Graph APIとの連携に応用できるのでぜひマスターしてくださいね！

ユーザーのログインなしで（Bubbleアプリがバックグラウンドサービスとして）Teamsオンライン会議を作成会議を作成する方法が気になる方はぜひいいねやコメントで教えてください！

参考 : Microsoft Graph API documents

・ユーザーの代わりにアクセスする

docs.microsoft.com

・Teamsオンライン会議を作成する

docs.microsoft.com