ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

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

f:id:earthmash:20211201155323p:plain

皆さんこんにちは。今回は、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」をクリックします。

f:id:earthmash:20211122173910p:plain

アプリの登録

Bubbleアプリを登録します。左のメニューから「アプリの登録」を選択し、アプリの登録ページが開いたら「+新規登録」をクリックします。 f:id:earthmash:20211122184837p:plain

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

f:id:earthmash:20211130175038p:plain

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

※generic redirect URLはこちら

f:id:earthmash:20211201142105p:plain

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

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

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

f:id:earthmash:20211122191854p:plain

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

f:id:earthmash:20211130175935p:plain

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

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

f:id:earthmash:20211130175945p:plain

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

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

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

f:id:earthmash:20211122194902p:plain

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

f:id:earthmash:20211122195005p:plain

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

f:id:earthmash:20211130180323p:plain

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

項目
追加する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」から新規作成し、以下を参考に設定してください。

f:id:earthmash:20211130183200p:plain

項目 入力値
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にログイン→「アプリの登録」→「アプリ名」→概要

f:id:earthmash:20211201143050p:plain

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

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

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

f:id:earthmash:20211130184154p:plain

項目 入力値
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でデータベースやページを作成

データベース

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

f:id:earthmash:20211124191613p:plain

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

ページ・Workflowの作成

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

ページ

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

f:id:earthmash:20211130191255p:plain

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

f:id:earthmash:20211130191407p:plain

Workflow

ログインページ

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

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

f:id:earthmash:20211130192343p:plain

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

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

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

f:id:earthmash:20211130195328p:plain

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

f:id:earthmash:20211201143925p:plain

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

f:id:earthmash:20211130194815p:plain

会議作成ページ

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

f:id:earthmash:20211130193919p:plainf:id:earthmash:20211130193932p:plain

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が保存されていますね!

f:id:earthmash:20211201144227p:plain

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

f:id:earthmash:20211201144439p:plain

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

f:id:earthmash:20211201144813p:plain

まとめ

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

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

参考 : Microsoft Graph API documents

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

docs.microsoft.com

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

docs.microsoft.com