Azure Communication Services は、リアルタイムコミュニケーション基盤となるサービスで、テキスト | 音声 | ビデオによるコミュニケーションのハブとなり、接続やコントロールを行うアプリやサービスを SDK などを用いて容易に開発できます。また、Microsoft Teams 会議への参加 (Teams Interoperability) 機能を活用して、外部のユーザーがアカウントなどの準備なしに Teams 会議へ参加できるようになります。

今回は BUILD 2022 で公開された、Azure Communication Services (以下 ACS) と Microsoft Bookings を利用した Virtual Visit (会議予約＆実施) のサンプルアプリを ノーコーディング で実際にデプロイして利用する手順を紹介します。

このアプリでは、外部ユーザーが会議を予約 (Microsoft Bookings の機能を利用) して、Microsoft Teams 同士、または Teams ＆ ACS を使って社内担当者がビデオ通話できるように、会議をセット＆外部参加者のコントロールをすることができます。

Azure Communication Services (ACS) とは

https://azure.microsoft.com/ja-jp/services/communication-services/
https://docs.microsoft.com/ja-jp/azure/communication-services/overview

Microsoft Bookings とは

手順

0. 事前準備

社内担当者用 Microsoft 365 アカウント＆外部ユーザー用アカウント

社内担当者用として、Bookings の機能が使える Microsoft 365 (以下 M365) のアカウントをご準備ください。
また、社外ユーザーとして、メールを受信できるアカウントもご準備ください。

外部ユーザーは Hotmail, Gmail 他、何でも構いません。社内担当者用アカウントとは別にご用意いただいたほうが混乱しにくいと思います。

Azure サブスクリプション申し込み

Microsoft Azure & Cognitive Services 利用準備を参考に、Azure サブスクリプションの申し込みしておきます。(無料版でOKです。)

Azure サブスクリプションに紐づけるのは、Bookings を利用する社内担当者用 M365 アカウントと同一でなくても構いません。

1. Bookings の新規予定(カレンダー) 作成

Microsoft Booking の Web サイトを開きます。社内担当者用 M365 アカウントでサインインして、[新規予定(カレンダー)の作成] をクリックして、作成に進みます。

[手順1] ペインで予定表の名前を入力して(識別しやすいお好きなモノを)、種類 (ここでは ITサポート) を選択します。

[手順2] ペインで対応するメンバーを選択します。選択したメンバーの Outlook 予定表で空きのある時間が Bookings で予約可能な時間と表示されるようになります。ここでは一旦、社内担当者用アカウント (この予定の作成者) が含まれている状態で OK です。

[手順3] ペインで予約可能な日時のデフォルト設定を行います。特に変更する必要がなさそうならそのままで。

[手順4] ペインで Booking から会議を予約できるユーザーを選択します。すべてのユーザー を選択すると、外部ユーザーがサインインなど無しで公開 Web サイトから自由に予約を行うことができます。
[カレンダーの作成] をクリックして作成します。

予定が作成されるまで、しばらく待ちます．．．。

予定が作成されたら、[始める] をクリックして内容を確認します。

予定の左列メニューから [予約ページ] をクリックして内容を表示させます。

地域とタイムゾーンの設定 を開き、日本時間(またはお好みのタイムゾーン) になっていない場合は変更、画面上部の [✓保存] をクリックして設定しておきます。

画面上部の あなたの予約ページ の欄に表示されている URL が Bookings に設定された予約 Web サイトです。こちらをコピーボタンをクリックしてコピー、ローカルに保存しておきます。

2. Azure Portal から Virtual Visit アプリを作成

ブラウザーから Virtual Visit Sample Builder にアクセスし、Virtual Visit アプリのテンプレートからカスタマイズ部分を設定し、Azure 上にデプロイできるように(ARM Template およびアプリケーションコード) 準備します。

Azure Portal 上の サンプルビルダー の ①予約と通話タブで、Bookings のページ URL に 1. の手順で作成して保存しておいた Bookings の URL をペーストします。[次へ] をクリックして次の手順に進みます。

②テーマ タブで、作成する Virtual Visit (会議予約＆実施) アプリの画面の設定を行います。会社名(タイトル) や色などお好みで設定してください。[次へ] をクリックして次の手順に進みます。

③レビュー タブで設定した内容を確認できます。[Azureへの展開] をクリックして、Azure 上に直接デプロイするプロセスに進みます。

新しいタブでデプロイの設定画面が開きます。以下の内容を設定します。

サブスクリプション: 利用中のサブスクリプション(デフォルトのまま、または適切なものを選択)
リソースグループ: 新規作成 から識別しやすいお好みのものを作成
リージョン: ここでは Japan East
App Service Name: 識別しやすいお好みのものを設定
Communication Service Name: 〃
Communication Service Data Location: ここでは Japan
Sku: F1 (デフォルトのまま)

[確認と作成] をクリックして進みます。

✓検証に成功しました と表示されたら、[作成] をクリックして Virtual Visit アプリを Azure 上にデプロイします。

デプロイ画面が表示され、✓デプロイが完了しました と表示されたら、[リソースグループに移動] をクリックして、デプロイ内容を確認します。

指定したリソースグループ内に App Service (Web App) と App Service プラン, ACS サービス(通信サービス)が作成されているのを確認してください。App Service をクリックします。

App Service の詳細画面で、URL をコピーしてローカルに保存しておきます。

3. Virtual Visit アプリの設定を Bookings に設定

Microsoft Booking のサイトから、1. の手順で作成した予定を表示します。
左側メニューから 勤務先情報 をクリックします。

ACS アプリの統合 を開きます。
展開済みアプリの URL に 2. の手順で作成した App Service の URL をペーストして、/visit を URL の後ろに 追加します。
画面上部の [✓保存] をクリックして保存するのを忘れずに。

Virtual Visit アプリを試す

会議の予約

ブラウザーから 2. の手順で作成した App Service の URL を開きます。
Bookings の予約ページを内包した Virtual Visits アプリが表示されます。(アプリURL/book にリダイレクトされています)
予約する日付と時間を選択します。

画面下部で、(外部ユーザーの) 名前とメールアドレス (確認メッセージ、および予定表が送付されます) を入力して、[予約] をクリックして、会議時間を予約します。

外部ユーザーに送られてきた予定表を確認すると、Virtual Visits Web アプリ＆ Teams 用のリンク、の両方が含まれているのが分かります。

社内担当者(M365 アカウント) にも確認メッセージと予定表が送られてくるのを確認してください。

設定した時間になったら、会議に参加します。社内担当者(M365アカウント) は Teams から参加、外部ユーザは Virtual Visit Web アプリ (ACS 経由) または Teams クライアントのいずれからでも参加できます。