UI ライブラリの概要

Azure Communication Services の UI ライブラリを使用すると、最新のコミュニケーション用ユーザー エクスペリエンスを簡単に構築できます。 運用環境ですぐに使用できる UI コンポーネントのライブラリが用意されており、アプリケーションに手軽にドロップできます。

Note

Web UI ライブラリの詳細なドキュメントについては、Web UI ライブラリのストーリーブックを参照してください。 そこには、その他の概念説明のドキュメント、クイックスタート、例が記載されています。

• 複合。 これらのコンポーネントは、一般的な通信シナリオを実装するためのターンキー ソリューションです。 ビデオ通話またはチャット (現在は Web UI ライブラリ経由でのみ利用可能) エクスペリエンスをアプリケーションにすばやく追加できます。 複合は、UI コンポーネントを使用して構築されたオープンソースの上位のコンポーネントです。

• UI コンポーネント。 これらのコンポーネントは、カスタム通信エクスペリエンスを構築できる、オープンソースの構成要素です。 コンポーネントは、エクスペリエンスの構成のために組み合わせることのできる通話とチャットの機能の両方を対象に提供されます。

これらの UI クライアント ライブラリはすべて、Microsoft の Fluent 設計言語と資産を使用しています。 Fluent UI とは、Microsoft 製品全体にわたって積極的に使用されている UI ライブラリの基本レイヤーです。

UI コンポーネントと連携し、UI ライブラリは通話とチャット用のステートフル クライアント ライブラリを公開します。 このクライアントは、特定の状態管理フレームワークに依存しないため、Redux や React Context などの一般的な状態管理ツールと統合することができます。 このステートフル クライアント ライブラリを UI コンポーネントと一緒に使用して、UI コンポーネントでデータをレンダリングするためのプロップとメソッドを渡します。 詳細については、ステートフル クライアントの概要に関するページを参照してください。

Note

Figma の設計キットでは、UI ライブラリで提供されているのと同じコンポーネントと複合が提供されているため、通話とチャットのエクスペリエンスをすばやく設計してプロトタイプを作成できます。

複合の概要

複合は、UI コンポーネントで構成される上位レベルのコンポーネントです。このコンポーネントは、Azure Communication Services を使用して一般的な通信シナリオを実装するためのターンキー ソリューションです。 開発者は、Azure Communication Services のアクセス トークンと、通話またはチャットに必要な構成を使用して、複合を簡単にインスタンス化できます。

Composite	使用例
CallwithChatComposite	ユーザーが通話とチャット スレッドを開始したり参加したりできるように、通話およびチャット機能を組み合わせたエクスペリエンス。 このエクスペリエンスでは、ユーザーは音声とビデオを使用して通信する機能と、参加者間でメッセージを交換できるリッチ チャット スレッドへのアクセスの両方を行うことができます。 これには、Teams との相互運用のサポートが含まれています。
CallComposite	ユーザーが通話を開始したり、参加したりすることができる通話エクスペリエンス。 エクスペリエンス内では、ユーザーはデバイスを構成し、ビデオを使用して通話に参加し、ビデオ をオンにした参加者を含む他の参加者を表示できます。 Teams 相互運用機能には、ユーザーが許可されるまで待機するためのロビー機能が含まれています。
ChatComposite	ユーザーがメッセージを送受信できるチャット エクスペリエンス。 入力、読み取り、参加者の入退出などのスレッド イベントが、チャット スレッドの一部としてユーザーに表示されます。

UI コンポーネントの概要

純粋な UI コンポーネントは、ビデオ タイルをグリッドにステッチしてリモート参加者を紹介したり、アプリケーションの仕様に合わせてコンポーネントを整理したりするなど、開発者がコミュニケーション エクスペリエンスを作成するために使用できます。 UI コンポーネントを使用すると、アプリケーションのブランディングやスタイルに合わせて、コンポーネントの外観をカスタマイズすることができます。

面グラフ	コンポーネント	説明
通話	Grid レイアウト	ビデオ タイルを NxN のグリッドに整理するためのグリッド コンポーネント
	ビデオ タイル	使用可能な場合はビデオ ストリームを表示し、ない場合は既定の静的コンポーネントを表示するコンポーネント
	コントロール バー	ミュートや共有画面など、特定の呼び出しアクションに接続するための DefaultButtons を整理するためのコンテナー
	VideoGallery	参加者が追加されると動的に変化するターン キー ビデオ ギャラリー コンポーネント
	Dialpad	電話番号の入力と DTMF トーンをサポートするコンポーネント
チャット	メッセージ スレッド	チャット メッセージ、システム メッセージ、カスタム メッセージを表示するコンテナー
	送信ボックス	不連続な [送信] ボタンを持つテキスト入力コンポーネント
	リッチ テキスト送信ボックス	書式設定オプションと個別の送信ボタンを含むリッチ テキスト入力コンポーネント
	メッセージの状態インジケーター	送信されたメッセージの状態を表示するマルチステート読み取りの確認メッセージ コンポーネント
	入力インジケーター	スレッドで現在入力中の参加者を表示するテキスト コンポーネント
共通	参加者の項目	アバターと表示名を含む、通話またはチャット参加者を表示する共通コンポーネント
	参加者リスト	アバターと表示名を含む、通話またはチャット参加者の一覧を表示する共通コンポーネント

Web UI ライブラリのインストール

ステートフル クライアントは、@azure/communication-react パッケージの一部として含まれています。

npm i --save @azure/communication-react

自分のプロジェクトに最適な UI アーティファクトとは

これらの要件を理解することは、適切なクライアント ライブラリを選択するのに役立ちます:

• どの程度のカスタマイズが必要か。 Azure Communication コア クライアント ライブラリには UX が存在しておらず、任意の UX を構築できるように設計されています。 UI ライブラリのコンポーネントでは、カスタマイズの自由度は低くなりますが、UI 資産が提供されます。
• 対象とするプラットフォームは何か。 プラットフォームによって、機能は異なります。

UI ライブラリでの機能の可用性の詳細については、こちらを参照してください。ただし、主なトレードオフは次の表にまとめられています。

クライアント ライブラリまたは SDK	実装の複雑さ	カスタマイズ性	通話	チャット	Teams との相互運用
複合コンポーネント	低	低	✔	✔	✔
基本コンポーネント	中	中	✔	✔	✔
コア クライアント ライブラリ	高	高	✔	✔	✔

UI Library Storybook にアクセス

複合は、一般的な通信シナリオを実装するためのターンキー ソリューションです。 アプリケーションにビデオ通話のエクスペリエンスを追加できます。 複合はオープンソースの上位コンポーネントであり、この開発者は開発時間とエンジニアリングの複雑さを軽減することができます。

複合の概要

Composite	使用例
CallComposite	ユーザーが通話を開始したり、参加したりすることができる通話エクスペリエンス。 このエクスペリエンスにおいて、ユーザーは自分のデバイスを構成したり、ビデオ通話に参加して、他の参加者 (ビデオがオンの参加者も含む) を見ることができます。 Teams との相互運用のために、ユーザーが参加を待機できるように、CallComposite にロビー機能が含まれています。
ChatComposite	ChatComposite は、ユーザーにリアルタイムのテキスト メッセージング エクスペリエンスを提供します。 具体的には、ユーザーは、入力インジケーターと開封確認メッセージからのイベントを含むチャット メッセージを送受信できます。 さらに、ユーザーは、参加者の追加または削除や、チャット タイトルの変更などのシステム メッセージを受け取ることもできます。

通話に関する複合シナリオ

ビデオまたは音声通話に参加する

ユーザーは、"Teams 会議の URL" を使用して通話に参加できます。または、Azure Communication Services の通話を設定できます。 このアプローチは、Teams アプリケーションと同様に、よりシンプルなエクスペリエンスを提供します。

通話前エクスペリエンス

通話の参加者は、名前を指定し、オーディオとビデオのデバイスの既定の構成を設定できます。 その後、通話にすぐに参加できます。

通話エクスペリエンス

通話の複合は、開発時間を最適化し、クリーンなレイアウトに集中するエンド ツー エンドのエクスペリエンスを提供します。

通話エクスペリエンスでは、これらすべての機能が複合コンポーネントで提供され、複雑なコードなしで明確なパスが提供されるため、開発時間の短縮につながります。

品質とセキュリティ

通話に関するモバイル複合は、Azure Communication Services のアクセス トークンを使って初期化されます。

[詳細]

通話のモバイル複合について詳しくは、ユース ケースに関する記事をご覧ください。

チャットに関する複合シナリオ

重要

Azure Communication Services のこの機能は、現在プレビュー段階にあります。

プレビューの API と SDK は、サービス レベル アグリーメントなしに提供されます。 運用環境のワークロードには使用しないことをお勧めします。 一部の機能はサポート対象ではなく、機能が制限されることがあります。

詳細については、「Microsoft Azure プレビューの追加利用規約」を確認してください。

チャット エクスペリエンス

ChatComposite は、リアルタイムのテキスト メッセージング エクスペリエンスを提供します。 柔軟性とスケーラビリティが考慮されている ChatComposite は、アプリケーションのさまざまなレイアウトやビューに適応でき、複雑ではありません。 また、さまざまなビジネス ニーズを満たすため、ChatComposite ビューを表示せず、通知のみを受け取ることもできます。

iOS	Android

品質とセキュリティ

CallComposite と同様に、ChatComposite でも Azure Communication Services アクセス トークンが利用されます。 適切なアクセス許可を持つユーザーのみがチャットにアクセスできるようにするには、チャット エクスペリエンスを始める前に、ユーザー トークンを有効なチャット スレッドに追加する必要があります。

[詳細]

チャットのモバイル複合について詳しくは、ユース ケースに関する記事をご覧ください。

自分のプロジェクトに最適な UI アーティファクトとは

次の要件は、適切なクライアント ライブラリを選択するのに役立ちます。

• どの程度のカスタマイズが必要か。 Azure Communication Services コア クライアント ライブラリには UX が存在しておらず、任意の UX を構築できるように設計されています。 UI ライブラリのコンポーネントでは、カスタマイズの自由度は低くなりますが、UI 資産が提供されます。

• 対象とするプラットフォームは何か。 プラットフォームによって、機能は異なります。

主なトレードオフを次に示します。

クライアント ライブラリまたは SDK	実装の複雑さ	カスタマイズ性	通話	チャット	Teams の相互運用性
複合コンポーネント	低	低	✔	✔	✔
コア クライアント ライブラリ	高	高	✔	✔	✔

UI ライブラリでの機能の可用性の詳細については、「UI ライブラリのユース ケース」を参照してください。

クイックスタート ガイド

既知の問題

• iOS に関する既知の問題
• Android に関する既知の問題