Azure Communication Services の UI ライブラリを使用すると、最新のコミュニケーション用ユーザー エクスペリエンスを簡単に構築できます。 また、UI ライブラリを使って、Open AI や他のモデルと接続することもできます。 SDK には、アプリケーションで利用できる運用対応の UI コンポーネントのライブラリが用意されています。
注
Web UI ライブラリの詳細なドキュメントについては、 Web UI ライブラリのストーリーブックを参照してください。 そこには、その他の概念説明のドキュメント、クイックスタート、例が記載されています。
複合。 これらのコンポーネントは、一般的な通信シナリオを実装するためのターンキー ソリューションです。 ビデオ通話またはチャット (現在は Web UI ライブラリ経由でのみ利用可能) エクスペリエンスをアプリケーションにすばやく追加できます。 複合は、UI コンポーネントを使用して構築されたオープンソースの上位のコンポーネントです。
UI コンポーネント。 これらのコンポーネントは、カスタム通信エクスペリエンスを構築できる、オープンソースの構成要素です。 コンポーネントは、エクスペリエンスの構成のために組み合わせることのできる通話とチャットの機能の両方を対象に提供されます。
これらの UI クライアント ライブラリはすべて、 Microsoft の Fluent デザイン言語 とアセットを使用します。 Fluent UI とは、Microsoft 製品全体にわたって積極的に使用されている UI ライブラリの基本レイヤーです。
UI コンポーネントと連携し、UI ライブラリは通話とチャット用のステートフル クライアント ライブラリを公開します。 このクライアントは、特定の状態管理フレームワークに依存しないため、Redux や React Context などの一般的な状態管理ツールと統合することができます。 このステートフル クライアント ライブラリを UI コンポーネントと一緒に使用して、UI コンポーネントでデータをレンダリングするためのプロップとメソッドを渡します。 詳細については、「 ステートフル クライアントの概要」を参照してください。
注
UI ライブラリで提供されているのと同じコンポーネントとコンポジットが Figma のデザイン キットで利用できるため、通話とチャットのエクスペリエンスをすばやく設計してプロトタイプを作成できます。
複合の概要
複合は、UI コンポーネントで構成される上位レベルのコンポーネントです。このコンポーネントは、Azure Communication Services を使用して一般的な通信シナリオを実装するためのターンキー ソリューションです。 開発者は、Azure Communication Services のアクセス トークンと、通話またはチャットに必要な構成を使用して、複合を簡単にインスタンス化できます。
| 複合材料 | 使用例 |
|---|---|
| CallwithChatComposite (英語) | ユーザーが通話とチャット スレッドを開始したり参加したりできるように、通話およびチャット機能を組み合わせたエクスペリエンス。 このエクスペリエンスでは、ユーザーは音声とビデオを使用して通信する機能と、参加者間でメッセージを交換できるリッチ チャット スレッドへのアクセスの両方を行うことができます。 これには、Teams との相互運用のサポートが含まれています。 |
| CallComposite (コールコンポジット) | ユーザーが通話を開始したり、参加したりすることができる通話エクスペリエンス。 エクスペリエンス内では、ユーザーはデバイスを構成し、ビデオを使用して通話に参加し、ビデオ をオンにした参加者を含む他の参加者を表示できます。 Teams 相互運用機能には、ユーザーが許可されるまで待機するためのロビー機能が含まれています。 |
| チャットコンポジット | ユーザーがメッセージを送受信できるチャット エクスペリエンス。 入力、読み取り、参加者の入退出などのスレッド イベントが、チャット スレッドの一部としてユーザーに表示されます。 |
UI コンポーネントの概要
純粋な UI コンポーネントは、ビデオ タイルをグリッドにステッチしてリモート参加者を紹介したり、アプリケーションの仕様に合わせてコンポーネントを整理したりするなど、開発者がコミュニケーション エクスペリエンスを作成するために使用できます。 UI コンポーネントを使用すると、アプリケーションのブランディングやスタイルに合わせて、コンポーネントの外観をカスタマイズすることができます。
| 面グラフ | コンポーネント | 説明 |
|---|---|---|
| 通話 | グリッド レイアウト | ビデオ タイルを NxN のグリッドに整理するためのグリッド コンポーネント |
| ビデオ タイル | 使用可能な場合はビデオ ストリームを表示し、ない場合は既定の静的コンポーネントを表示するコンポーネント | |
| コントロール バー | ミュートや共有画面など、特定の呼び出しアクションに接続するための DefaultButtons を整理するためのコンテナー | |
| ビデオギャラリー | 参加者が追加されると動的に変化するターン キー ビデオ ギャラリー コンポーネント | |
| ダイヤルパッド | 電話番号の入力と DTMF トーンをサポートするコンポーネント | |
| チャット | メッセージ スレッド | チャット メッセージ、システム メッセージ、カスタム メッセージを表示するコンテナー |
| 送信ボックス | 不連続な [送信] ボタンを持つテキスト入力コンポーネント | |
| リッチ テキスト送信ボックス | 書式設定オプションと個別の送信ボタンを含むリッチ テキスト入力コンポーネント | |
| メッセージ ステータス インジケーター | 送信されたメッセージの状態を表示するマルチステート読み取りの確認メッセージ コンポーネント | |
| 入力インジケーター | スレッドで現在入力中の参加者を表示するテキスト コンポーネント | |
| 共通 | 参加者アイテム | アバターと表示名を含む、通話またはチャット参加者を表示する共通コンポーネント |
| 参加者リスト | アバターと表示名を含む、通話またはチャット参加者の一覧を表示する共通コンポーネント |
Web UI ライブラリのインストール
ステートフル クライアントは、@azure/communication-react パッケージの一部として含まれています。
npm i --save @azure/communication-react
自分のプロジェクトに最適な UI アーティファクトとは
これらの要件を理解することは、適切なクライアント ライブラリを選択するのに役立ちます:
- どの程度のカスタマイズが必要か。 Azure Communication コア クライアント ライブラリには UX が存在しておらず、任意の UX を構築できるように設計されています。 UI ライブラリのコンポーネントでは、カスタマイズの自由度は低くなりますが、UI 資産が提供されます。
- 対象とするプラットフォームは何か。 プラットフォームによって、機能は異なります。
UI ライブラリでの機能の可用性の詳細 については、ここで入手できますが、主なトレードオフは次の表にまとめられています。
| クライアント ライブラリまたは SDK | 実装の複雑さ | カスタマイズ性 | 通話 | チャット | Teams との相互運用 |
|---|---|---|---|---|---|
| 複合コンポーネント | 低 | 低 | ✔ | ✔ | ✔ |
| 基本コンポーネント | 中 | 中 | ✔ | ✔ | ✔ |
| コア クライアント ライブラリ | 高 | 高 | ✔ | ✔ | ✔ |
複合 は、一般的な通信シナリオを実装するターンキー ソリューションです。 アプリケーションにビデオ通話のエクスペリエンスを追加できます。 複合はオープンソースの上位コンポーネントであり、この開発者は開発時間とエンジニアリングの複雑さを軽減することができます。
複合の概要
| 複合材料 | 使用例 |
|---|---|
| CallComposite (コールコンポジット) | ユーザーが通話を開始したり、参加したりすることができる通話エクスペリエンス。 このエクスペリエンスにおいて、ユーザーは自分のデバイスを構成したり、ビデオ通話に参加して、他の参加者 (ビデオがオンの参加者も含む) を見ることができます。 Teams との相互運用のために、ユーザーが参加を待機できるように、CallComposite にロビー機能が含まれています。 |
| チャットコンポジット |
ChatComposite は、ユーザーにリアルタイムのテキスト メッセージング エクスペリエンスを提供します。 具体的には、ユーザーは、入力インジケーターと開封確認メッセージからのイベントを含むチャット メッセージを送受信できます。 さらに、ユーザーは、参加者の追加または削除や、チャット タイトルの変更などのシステム メッセージを受け取ることもできます。 |
通話に関する複合シナリオ
ビデオまたは音声通話に参加する
ユーザーは 、Teams 会議 URL を 使用して通話に参加することも、Azure Communication Services 通話を設定することもできます。 このアプローチは、Teams アプリケーションと同様に、よりシンプルなエクスペリエンスを提供します。
通話前エクスペリエンス
通話の参加者は、名前を指定し、オーディオとビデオのデバイスの既定の構成を設定できます。 その後、通話にすぐに参加できます。
通話エクスペリエンス
通話の複合は、開発時間を最適化し、クリーンなレイアウトに集中するエンド ツー エンドのエクスペリエンスを提供します。
通話エクスペリエンスでは、これらすべての機能が複合コンポーネントで提供され、複雑なコードなしで明確なパスが提供されるため、開発時間の短縮につながります。
品質とセキュリティ
呼び出し用のモバイル 複合は、 Azure Communication Services アクセス トークンを使用して初期化されます。
[詳細]
呼び出し用のモバイル コンポジットの詳細が必要な場合は、 ユース ケースを参照してください。
チャットに関する複合シナリオ
重要
Azure Communication Services のこの機能は、現在プレビュー段階にあります。 プレビュー段階の機能は一般公開されており、新規および既存の Microsoft のすべてのお客様が使用できます。
プレビューの API と SDK は、サービス レベル アグリーメントなしに提供されます。 運用環境のワークロードには使用しないことをお勧めします。 特定の機能がサポートされていないか、機能が制約されている可能性があります。
詳細については、「 Microsoft Azure プレビューの追加使用条件」を参照してください。
チャット エクスペリエンス
ChatComposite は、リアルタイムのテキスト メッセージング エクスペリエンスを提供します。 柔軟性とスケーラビリティが考慮されている ChatComposite は、アプリケーションのさまざまなレイアウトやビューに適応でき、複雑ではありません。 また、さまざまなビジネス ニーズを満たすため、ChatComposite ビューを表示せず、通知のみを受け取ることもできます。
| iOS | アンドロイド |
|---|---|
|
|
品質とセキュリティ
CallCompositeと同様に、ChatCompositeでは Azure Communication Services アクセス トークンも利用されます。 適切なアクセス許可を持つユーザーのみがチャットにアクセスできるようにするには、チャット エクスペリエンスを開始する前に、ユーザー トークンを有効な チャット スレッド に追加する必要があります。
[詳細]
チャット用のモバイル 複合の詳細が必要な場合は、 ユース ケースを参照してください。
自分のプロジェクトに最適な UI アーティファクトとは
次の要件は、適切なクライアント ライブラリを選択するのに役立ちます。
どの程度のカスタマイズが必要か。 Azure Communication Services コア クライアント ライブラリには UX が存在しておらず、任意の UX を構築できるように設計されています。 UI ライブラリのコンポーネントでは、カスタマイズの自由度は低くなりますが、UI 資産が提供されます。
対象とするプラットフォームは何か。 プラットフォームによって、機能は異なります。
主なトレードオフを次に示します。
| クライアント ライブラリまたは SDK | 実装の複雑さ | カスタマイズ性 | 通話 | チャット | Teams の相互運用性 |
|---|---|---|---|---|---|
| 複合コンポーネント | 低 | 低 | ✔ | ✔ | ✔ |
| コア クライアント ライブラリ | 高 | 高 | ✔ | ✔ | ✔ |
UI ライブラリでの機能の可用性の詳細については、「 UI ライブラリのユース ケース」を参照してください。