1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Azure Communication Services × Microsoft Bookings で簡単会議予約&実施アプリ (Virtual Visits) を No Code デプロイ [BUILD2022 Update]

Last updated at Posted at 2022-05-26

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

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

virtualvisits_01.png

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

virtual-visit-options.png

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 アカウントでサインインして、[新規予定(カレンダー)の作成] をクリックして、作成に進みます。

virtualvisits_01-02.png

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

virtualvisits_01-03.png

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

virtualvisits_01-04.png

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

virtualvisits_01-05.png

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

virtualvisits_01-06.png

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

virtualvisits_01-07.png

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

virtualvisits_01-08.png

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

virtualvisits_01-11.png

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

virtualvisits_01-12.png

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

virtualvisits_01-13.png

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

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

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

virtualvisits_02-01.png

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

virtualvisits_02-02.png

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

virtualvisits_02-03.png

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

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

virtualvisits_02-04.png

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

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

virtualvisits_02-05.png

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

virtualvisits_02-06.png

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

virtualvisits_02-07.png

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

virtualvisits_02-08.png

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

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

virtualvisits_03-01.png

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

virtualvisits_03-02.png

Virtual Visit アプリを試す

会議の予約

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

virtualvisits_04-01.png

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

virtualvisits_04-02.png

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

virtualvisits_04-03.png

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

virtualvisits_04-04.png

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

virtualvisits_01.png

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?