UI ライブラリのユース ケース
Azure Communication Services UI ライブラリのコンポーネントと複合を使用して、アプリケーションで通話とチャットのエクスペリエンスを作成します。
複合には、通話とチャットの機能が直接組み込まれており、複合機能をアプリケーションに統合すると公開されます。 UI コンポーネントでは、通話とチャットの機能は UI 機能と基になるステートフル ライブラリの組み合わせによって公開されます。 これらの機能を最大限に活用するには、UI コンポーネントとステートフルな通話およびチャットのクライアント ライブラリを併用することをお勧めします。
UI ライブラリのストーリーブックで、概念に関するドキュメント、クイックスタート、および例を参照してください。
通話のユース ケース
| 領域 | ユース ケース |
|---|---|
| 通話の種類 | Microsoft Teams 会議への参加 |
| グループ ID を使用して Azure Communication Services の通話に参加する | |
| Azure Communication Services のルームに参加する | |
| 別の Azure Communication Services ユーザーへの発信通話を始める | |
| 電話番号への発信通話を始める | |
| Teams の相互運用性 | 通話ロビーに参加する |
| 文字起こしとレコーディングのアラート バナーを表示する | |
| 通話コントロール | 通話をミュートまたはミュート解除する |
| 通話中にビデオをオンまたはオフにする | |
| 画面共有をオンにする | |
| 通話を終了する | |
| 参加者ギャラリー | グリッドにリモート参加者を表示する |
| ローカル ユーザーの通話を通してビデオ プレビューを利用できるようにする | |
| ビデオがオフのときに既定のアバターを利用できるようにする | |
| 参加者ギャラリーに共有画面コンテンツを表示する | |
| 呼び出しの構成 | マイク デバイスを管理する |
| カメラ デバイスを管理する | |
| スピーカー デバイスを管理する | |
| ユーザーがビデオを確認するためのローカル プレビューを利用できるようにする | |
| 参加者 | 参加者一覧を表示する |
チャットの使用例
| 領域 | Azure Communication Services チャット | Teams の相互運用性チャット |
|---|---|---|
| チャットの種類 | Azure Communication Services のチャット スレッドに参加する | Microsoft Teams 会議チャットに参加する |
| チャット アクション | テキスト メッセージを送受信する | テキスト メッセージを送受信する |
| リッチ テキスト メッセージを受信する | リッチ テキスト メッセージを受信する | |
| - | インライン画像を受信する* | |
| 添付ファイルを送受信する | 添付ファイルを受信する* | |
| チャット イベント | 入力インジケーターを送受信する | 入力インジケーターを送受信する** |
| 開封確認メッセージを送受信する | 開封確認メッセージを送受信する | |
| 参加者が追加または削除されたタイミングを表示する | 参加者が追加または削除されたタイミングを表示する | |
| 参加者 | 参加者一覧を表示する | 参加者一覧を表示する |
* 現在、インライン画像と添付ファイルのサポートはパブリック プレビュー段階です。 プレビューの API と SDK は、サービス レベル アグリーメントなしに提供されます。 運用環境のワークロードには使用しないことをお勧めします。 一部の機能はサポート対象ではなく、機能が制限されることがあります。 詳細については、「Microsoft Azure プレビューの追加利用規約」を確認してください。
** Teams ユーザーからの入力イベントの表示名が正しく表示されない場合があります。
サポートされている ID
複合を初期化し、サービスに対して認証を行うには、ユーザーに Azure Communication Services ID が必要です。 詳細については、「Azure Communication Services に対する認証」と「クイック スタート: アクセス トークンを作成して管理する」を参照してください。
Teams の相互運用性
Teams の相互運用性のシナリオでは、UI ライブラリ複合を使用して、Communication Services 経由で Teams 会議にユーザーを追加できます。 Teams の相互運用性を有効にするには、通話複合またはチャット 複合の既定の機能を使用するか、UI コンポーネントを使用してカスタム エクスペリエンスを構築します。
アプリケーションに通話とチャットの両方の機能を追加する場合は、参加者が通話を許可されるまで、チャット クライアントが開始されないようにすることが重要です。 参加者が許可されたら、チャット クライアントを開始して、ミーティングのチャット スレッドに参加させることができます。 パターンは、次の図に示されています。
UI コンポーネントを使用して Teams の相互運用性エクスペリエンスを提供する場合は、まず UI ライブラリの例を使用して、エクスペリエンスの重要な部分を作成します。
- ロビーの例。 参加者が通話に許可されるまで待機できるサンプル ロビー。
- コンプライアンス バナー。 通話が記録されているかどうかをユーザーに示すサンプル バナー。
- Teams のテーマ。 UI ライブラリ要素を Microsoft Teams のようにするサンプル テーマ。
- 画像の共有*。 Azure Communication Services エンド ユーザーのサンプルでは、Teams ユーザーから送信された画像を受信できます。
- ファイル共有*。 Azure Communication Services エンド ユーザーのサンプルでは、Teams ユーザーから送信された添付ファイルを受信できます。
カスタマイズ
UI ライブラリ パターンを使用して、アプリケーションの外観に合わせてコンポーネントを変更します。 カスタマイズは、Communication Services の複合と UI コンポーネントの大きな違いの 1 つです。 複合では、よりシンプルな統合エクスペリエンスを実現するためにカスタマイズ オプションが少なくなっています。
次の表は、カスタマイズのユース ケースについて複合と UI コンポーネントを比較したものです。
| 使用例 | 合成 | UI コンポーネント |
|---|---|---|
| Fluent ベースのテーマを使用する | x | x |
| エクスペリエンス レイアウトを構成する | x | |
| CSS スタイルを使用してスタイル プロパティを変更する | x | |
| アイコンを置き換える | x | |
| 参加者ギャラリーのレイアウトを変更する | x | |
| 通話コントロールのレイアウトを変更する | x | x |
| データ モデルを挿入してユーザー メタデータを変更する | x | X |
可観測性
UI ライブラリの状態管理アーキテクチャは分離されているため、ステートフルな通話クライアントとチャット クライアントに直接アクセスできます。 ステートフルなクライアントにフックして状態を読み取ったり、イベントを処理したり、UI コンポーネントに渡す動作をオーバーライドしたりできます。
次の表は、可観測性のユース ケースについて複合と UI コンポーネントを比較したものです。
| 使用例 | 合成 | UI コンポーネント |
|---|---|---|
| 通話クライアントとチャット クライアントの状態にアクセスする | x | x |
| クライアント イベントにアクセスして処理する | x | x |
| UI イベントにアクセスして処理する | x | X |
推奨アーキテクチャ
Azure Communication Services のアクセス トークンを使って、複合コンポーネントと基本コンポーネントを初期化します。 アクセス トークンは、管理対象の信頼できるサービスを介して Communication Services から取得することが重要です。 詳細については、「クイック スタート:アクセス トークンを作成して管理する」と信頼できるサービスのチュートリアルに関するページを参照してください。
通話およびチャットのクライアント ライブラリには、参加する通話またはチャットに関するコンテキストが必要です。 ユーザー アクセス トークンと同様に、独自の信頼されたサービスを使用してクライアントにコンテキストを配布します。
次の表は、クライアント ライブラリにコンテキストを追加するために必要な初期化機能およびリソース管理機能をまとめたものです。
| Contoso の役割 | UI ライブラリの役割 |
|---|---|
| Azure からアクセス トークンを提供する | 提供されたアクセス トークンをパススルーしてコンポーネントを初期化する |
| 更新機能を提供する | 開発者から提供された機能を使用してアクセス トークンを更新する |
| 通話またはチャットの参加情報を取得する、または渡す | 通話とチャットの情報をパススルーしてコンポーネントを初期化する |
| 任意のカスタム データ モデルのユーザー情報を取得する、または渡す | レンダリングの対象となるコンポーネントにカスタム データ モデルをパススルーする |
プラットフォームのサポート
| SDK | Windows | macOS | Ubuntu | Linux | Android | iOS |
|---|---|---|---|---|---|---|
| UI SDK | Chrome*、Microsoft Edge | Chrome*、Safari** | Chrome* | Chrome* | Chrome* | Safari** |
* Chrome の現在のバージョンとその 2 つ前までのリリースがサポートされています。
** Safari バージョン 13.1 以降のバージョンがサポートされています。 Safari macOS の動画の送信はまだサポートされていませんが、iOS ではサポートされています。 発信画面の共有は、デスクトップ iOS でのみサポートされています。
ユーザー補助
設計によるアクセシビリティは、Microsoft 製品全体の原則です。 UI ライブラリはこの原則に従っており、すべての UI コンポーネントに完全にアクセスできます。
ローカライズ
ローカリゼーションは、世界中のさまざまな言語を話すユーザー向けの製品を作るための鍵となります。 UI ライブラリでは、右から左へ記述する言語を含むいくつかの言語と機能を既定でサポートとしています。 UI ライブラリで使用する独自のローカライズ ファイルを提供できます。
既知の問題
- 現時点では、UI ライブラリで既存のメッセージの編集中にメッセージの種類を更新することはサポートされていません。 既存のメッセージにリッチ テキストの書式設定を追加すると、テキスト コンテンツに html スタイルが追加されます。 これによってメッセージの種類は変更されないため、html コンテンツがメッセージ スレッドにプレーン テキストとして表示される可能性があります。
Azure Communication Services UI ライブラリの CallComposite と ChatComposite を使って、iOS および Android アプリケーション用の通話エクスペリエンスを作成します。 数行のコードを使用するだけで、アプリケーションに通話およびチャット エクスペリエンス全体を簡単に統合できます。 Communication Services の複合は、セットアップから通話およびチャットの終了まで、通話およびチャットのライフサイクル全体を管理します。
通話のユース ケース
Communication Services の通話複合を使用して、これらのユース ケースを作成できます。
| 領域 | ユース ケース |
|---|---|
| 通話の種類 | Microsoft Teams 会議への参加 |
| グループ ID を使用して通話に参加する | |
| Teams の相互運用性 | 通話ロビーに参加する |
| 文字起こしとレコーディングのアラート バナーを表示する | |
| 参加者ギャラリー | グリッドにリモート参加者を表示する |
| ローカル ユーザーの通話を通してビデオ プレビューを利用できるようにする | |
| ビデオがオフのときに既定のアバターを利用できるようにする | |
| 参加者ギャラリーに共有画面コンテンツを表示する | |
| 参加者アバターのカスタマイズを有効にする | |
| 参加者一覧を表示する | |
| 呼び出しの構成 | マイク デバイスを管理する |
| カメラ デバイスを管理する | |
| スピーカー デバイス (有線または Bluetooth) を管理する | |
| ユーザーがビデオを確認するためのローカル プレビューを利用できるようにする | |
| 通話コントロール | 通話をミュートまたはミュート解除する |
| 通話中にビデオをオンまたはオフにする | |
| 通話を終了する | |
| 音声割り込み後に通話を保留および再開する |
Teams の相互運用性
Teams の相互運用性のシナリオでは、UI ライブラリ複合を使用して、Communication Services 経由で Teams 会議にユーザーを追加できます。 Teams の相互運用性を有効にするには、通話複合を使用します。 この複合は、Teams 相互運用性通話への参加のライフサイクル全体を管理します。
次の図は、発信者が Teams 会議に追加される前のユーザー エクスペリエンスの例を示しています。
共有コンテンツの表示
モバイル ネイティブ プラットフォーム用の UI ライブラリを通じて、通話参加者は、Teams 通話中に他の参加者が画面を共有すると、共有されたコンテンツを表示できます。 リモート参加者は、ストレッチ ジェスチャとピンチ ジェスチャを使用して、通話の共有コンテンツを拡大または縮小できます。
テーマ化
iOS と Android 用の UI ライブラリ通話複合を使用して、発信者エクスペリエンスのカスタム テーマを作成できます。 プラットフォーム エクスペリエンスを作成するには、次の表に示すように一連のテーマ カラーを渡します。 詳細については、テーマの作成方法に関するページをご覧ください。
| Android | iOS |
|---|---|
|
|
画面のサイズ
5 インチからタブレット サイズまでの画面サイズに合わせて、Azure Communication Services 通話複合を調整できます。 通話複合で分割モードとタブレット モードを使用して、動的な参加者の参加者一覧レイアウトを取得し、ビューを簡潔にして、会話に集中できるようにします。
| 分割モード | タブレット モード |
|---|---|
|
|
ローカリゼーション
ローカリゼーションは、世界中のさまざまな言語を話すユーザー向けの製品を作るための鍵となります。 UI ライブラリは、英語、スペイン語、フランス語、ドイツ語、イタリア語、日本語、韓国語、オランダ語、ポルトガル語、ロシア語、トルコ語、中国語の 12 言語をサポートしています。 また、右から左へ記述する言語もサポートしています。 詳細については、アプリにローカリゼーションを追加する方法に関するページを参照してください。
アクセシビリティ
ユーザー補助は、通話ライブラリの重点事項です。 スクリーン リーダーを使用して、通話状態に関する重要なアナウンスを行うことで、視覚障碍のあるユーザーがアプリケーションを使用する際に効果的に参加できるようにすることができます。
データの挿入を表示する
モバイル ネイティブ プラットフォーム用の UI ライブラリを使用して、ローカル参加者およびリモート参加者に、通話中にユーザーとしてどのように表示するかをカスタマイズするためのオプションを提供します。 ローカル参加者は、通話の開始時に、ローカル アバター、カスタム表示名、ナビゲーションのタイトルとサブタイトルを、[設定] 画面で選択できます。 リモート ユーザーは、会議に参加する際にカスタマイズしたアバターを作成することができます。 詳しくは、会議前ビューのカスタマイズ方法に関する記事をご覧ください。
セットアップ画面をスキップする
UI ライブラリには、通話参加エクスペリエンスのセットアップ画面をスキップして通話に参加する機能があります。 既定では、ユーザーはセットアップ画面を経由して通話に参加します。 ここで、ユーザーは、通話に参加する前に、カメラのオン/オフ、マイクのオン/オフ、オーディオ デバイスの選択などの通話構成を設定します。 通話に参加するには、この画面でユーザー操作が必要です。これは、一部のユーザーにとっては不要な場合があります。 そのため、セットアップ画面をスキップし、通話構成 API を指定することで通話に参加する機能が用意されています。 詳細については、セットアップ画面のスキップ機能を使う方法に関する記事を参照してください
オーディオのみモード
UI ライブラリのオーディオのみモードを使用すると、参加者はビデオを共有したり受信したりすることなく、自分のオーディオのみを使用して通話に参加できます。 この機能は、帯域幅を節約し、プライバシーを最大化するために使用されます。 アクティブにすると、オーディオのみモードでは、ストリームの送受信の両方のビデオ機能が自動的に無効になり、ビデオ関連のコントロールを削除して、この変更を反映するように UI が調整されます。 このモードは CallComposite 構成を使用して有効にできます。詳細については、オーディオのみのクイック スタートを使用してください。
向き
UI ライブラリは、ライブラリ エクスペリエンスを起動する前に、各画面の画面の向きのセットアップを個別にサポートします。 これにより、アプリケーション開発者は、アプリケーションの向きに合わせて、通話エクスペリエンスの固定された向きを設定できます。 Android と iOS の両プラットフォームでサポートされる向きの一覧と API の使用方法の詳細については、方向設定の使用方法に関する記事を参照してください
マルチタスクとピクチャ イン ピクチャ
UI ライブラリは、通話画面のピクチャ イン ピクチャ モードをサポートしています。 通話中に、ユーザーは通話画面の [戻る] ボタンをクリックしてマルチタスクを有効にすると、ユーザーは前の画面に戻ることができます。 ピクチャ イン ピクチャが有効になっている場合、システムのピクチャ イン ピクチャが通話用に表示されます。 Android および iOS プラットフォームのマルチタスキングとピクチャ イン ピクチャの詳細と API の使用方法については、ピクチャ イン ピクチャの使用方法に関するページを参照してください
CallKit のサポート
UI ライブラリでは、通話の CallKit との対話を処理するための CallKit 統合がサポートされています。 iOS プラットフォームの統合と API の使用方法の詳細については、CallKit の使用方法に関するページを参照してください
1 対 1 の通話とプッシュ通知のサポート
UI ライブラリでは、通信識別子によってユーザーにダイヤルする 1 対 1 の VoIP 通話がサポートされています。 着信通話を受信する UI ライブラリでは、プッシュ通知の登録もサポートされています。 Android および iOS プラットフォームの統合と API の使用方法の詳細については、1 対 1 の通話を行い、プッシュ通知を受信する方法に関するページを参照してください
チャットの使用例
重要
Azure Communication Services のこの機能は、現在プレビュー段階にあります。
プレビューの API と SDK は、サービス レベル アグリーメントなしに提供されます。 運用環境のワークロードには使用しないことをお勧めします。 一部の機能はサポート対象ではなく、機能が制限されることがあります。
詳細については、「Microsoft Azure プレビューの追加利用規約」を確認してください。
| 領域 | ユース ケース |
|---|---|
| チャットの種類 | Azure Communication Services のチャット スレッドに参加する |
| チャット アクション | チャット メッセージを送信する |
| チャット メッセージを受信する | |
| チャット イベント | 入力インジケーターを表示する |
| 開封確認メッセージを表示する | |
| 参加者が追加または削除されたタイミングを表示する | |
| チャットのタイトルの変更を表示する |
柔軟性
ChatComposite は、アプリケーションのさまざまなレイアウトとビューに適合するように設計されました。 たとえば、ナビゲーション ビュー、モーダル ビューなどのビューにチャットを配置することを選択できます。 ChatComposite は自身を調整し、シームレスなエクスペリエンスを実現します。
| ナビゲーション ビューの場合 | モーダル ビューの場合 |
|---|---|
|
|
サポートされている ID
複合を初期化し、サービスに対して認証を行うには、ユーザーに Azure Communication Services ID が必要です。 詳細については、「Azure Communication Services に対する認証」と「クイック スタート: アクセス トークンを作成して管理する」を参照してください。
推奨アーキテクチャ
複合は、Azure Communication Services のアクセス トークンを使用して初期化されます。 アクセス トークンは、管理対象の信頼できるサービスを介して Azure Communication Services から取得することが重要です。 詳細については、「クイック スタート:アクセス トークンを作成して管理する」と信頼できるサービスのチュートリアルに関するページを参照してください。
通話ライブラリおよびチャット クライアント ライブラリには、参加する通話に関するコンテキストが必要です。 ユーザー アクセス トークンと同様に、独自の信頼されたサービスを使用してクライアントにコンテキストを配布します。 次の表は、クライアント ライブラリにコンテキストを追加するために必要な初期化機能およびリソース管理機能をまとめたものです。
| Contoso の役割 | UI ライブラリの役割 |
|---|---|
| Azure からアクセス トークンを提供する | 提供されたアクセス トークンをパススルーしてコンポーネントを初期化する |
| 更新機能を提供する | 開発者から提供された機能を使用してアクセス トークンを更新する |
| 通話またはチャットの参加情報を取得する、または渡す | 通話とチャットの情報をパススルーしてコンポーネントを初期化する |
| 任意のカスタム データ モデルのユーザー情報を取得する、または渡す | レンダリングの対象となるコンポーネントにカスタム データ モデルをパススルーする |
プラットフォームのサポート
| プラットフォーム | バージョン |
|---|---|
| iOS | iOS 14 以降 |
| Android | API 21 以降 |
トラブルシューティング ガイド
音声通話またはビデオ通話のトラブルシューティングを行うときに、CallID の提供を求められることがありますが、この ID は Communication Services の通話を識別するために使われます。
この CallID は、通話画面の下部にあるアクション バーを使って取得できます。省略記号ボタンが表示されます。ユーザーがタップ操作を行うと、[Share diagnostics info] (診断情報の共有) のオプションが表示されます。ユーザーは、サポート チームが問題を追跡するために必要な診断情報を共有できます。
CallID へのプログラムによるアクセスについては、プログラムによるデバッグ情報の取得方法に関する記事を参照してください。
トラブルシューティングのガイドラインについては、こちらの「Azure Communication Services でのトラブルシューティング」ページを参照してください。
| 通話画面 | [診断情報] メニュー | CallID を共有する |
|---|---|---|
|
|
|