開発者向け CHAT
製品に自然に組み込めるチャット UI キット。
接続された会話リスト、メッセージビュー、メッセージ作成欄から始めましょう。プラットフォーム固有のコンポーネントとサポートされているカスタマイズポイントを使って、独自のインターフェースを構築できます。
アプリ内のメッセージングを、独自のブランドとビジネスルールで。
プラットフォームを選択
フレームワークに対応した連携コンポーネント。
各プラットフォームのコンポーネントモデル、インストール要件、カスタマイズオプションを比較します。
React 向け Chat UI Kit
Tencent RTC の React Chat SDK と UI Kit を使用して、1 対 1 およびグループメッセージングを構築します。連携した会話リスト、メッセージ、入力エリアを追加し、製品に合わせてカスタマイズできます。
コンポーネントとセットアップReact Native 向け Chat UI Kit
Tencent RTC の React Native Chat UI Kit でモバイル会話を追加できます。連携済みの会話一覧、メッセージ、入力コンポーネントを iOS・Android アプリに組み込めます。
コンポーネントとセットアップFlutter 向け Chat UI Kit
Tencent RTC の Flutter Chat UI Kit で連携されたメッセージング画面を作成できます。会話とメッセージのウィジェットを製品のレイアウトやナビゲーションに合わせて調整できます。
コンポーネントとセットアップiOS 向け Chat UI Kit
Tencent RTCのiOS Chat UI Kitでネイティブメッセージング画面を追加。会話、メッセージ、連絡先から始めて、アプリに合わせて体験を調整できます。
コンポーネントとセットアップAndroid 向け Chat UI Kit
Tencent RTC の Android Chat UI Kit で Kotlin のメッセージング画面を追加できます。アプリのデザインに合ったスタイルで、会話、メッセージ、連絡先を組み込めます。
コンポーネントとセットアップ製品機能
製品を中心に構築されたメッセージング。
会話リスト、メッセージビュー、入力エリアの連携方法と、製品独自のスタイルやカスタムメッセージを組み込む場所を確認できます。
ビジュアルスタイルを調整
サポートされているテーマ API と拡張 API を使用して、チャットを独自のビジュアルシステムに統合します。カスタマイズ後は、コントラスト、長文メッセージ、読み込み状態、レイアウトの動作を検証してください。
React UI Kitクイックスタート ↗製品にメッセージング機能を追加
予約、注文、アクティビティ向けのカスタムレンダラーを作成します。実際のトランザクション状態とアクションの認可は、そのワークフローを管理するバックエンドに保持してください。
React カスタムメッセージガイド ↗ナビゲーションと未読状態を連携
受信トレイをアプリのナビゲーションと通知に接続します。サポート対象のすべてのプラットフォームで、選択した会話、戻り先、アカウント変更、通知のディープリンクをテストしてください。
React ConversationList コンポーネント API ↗リッチメディアを会話の一部に
まず、対応している画像、ファイル、音声メッセージのコンポーネントを使用します。送信前にプレビューできるようにし、添付ファイルを簡単に開けるようにしてください。また、プラットフォームに合わせてアップロード制限とネイティブ権限を設定します。
JavaScript メッセージ API ↗グループ会話を整理
プラットフォームのグループおよびメンバーコンポーネントを使用して、会話の詳細とメンバー情報を表示します。参加、招待、退出などの操作を、製品に必要なグループモデルとアクセスルールに連携します。
適切な Chat グループタイプを選択 ↗利用可否は SDK、エディション、サービスプランによって異なります。 Chat プランと機能制限を確認 ↗
POKEKARA · ソーシャルエンターテインメント
ライブ体験を中心にインタラクションを構築。
Pokekara の Tencent RTC 導入事例では、カラオケ、ライブ配信ルーム、ソーシャルメッセージングを組み合わせています。Chat API と構築済み UI Kit を含む統合サービスについて紹介しています。
- エンターテインメント体験内のチャット
- 音声・ビデオサービスと組み合わせて使用するコンポーネント

なぜテンセントRTCなのか
既製の UI にも製品への統合が必要です。
チャット UI Kit を使えばコンポーネント開発の手間を減らせますが、認証済みのユーザーID、会話権限、ナビゲーション、ビジネスルールは引き続きアプリ側で用意する必要があります。連携範囲を決める前に、対象プラットフォームのガイドを参照し、その依存関係を確認してください。
接続済みのコンポーネントから開始
会話リスト、メッセージビュー、メッセージ作成コンポーネントは既に Chat の状態に接続されています。これにより、チームが実装するインターフェース連携を減らせます。
自分たちらしい製品体験を実現
プラットフォーム別のテーマ API と拡張 API により、専用のチャット画面を別途用意することなく、ブランドに合わせたチャットやアプリ固有のメッセージ表示を実現できます。
導入するインターフェースの範囲を選択
プラットフォームでサポートされるコンポーネントを選択するか、UIを完全に制御する必要がある領域ではCore SDKを使用します。開発規模を見積もる前に、コンポーネントの対応範囲を確認してください。
体験する
会話の使用感をご確認ください。
このローカルインターフェースのプレビューでテーマを変更し、メッセージを追加できます。その後、公式 Chat デモを開き、テストアカウントで連携メッセージングをお試しください。
このプレビューではローカルステートと架空の参加者を使用しています。Tencent RTCには接続せず、ほかの人にメッセージを送信することもありません。
改訂したスタジオレイアウトを確認できるようになりました。
Local UI preview · no message is sent to a service
評価から統合まで
Chatをアプリケーションに接続します。
まず selected platform クイックスタートを使用し、その後で認証とアプリケーションに必要なメッセージ動作を追加してください。
- 01
フレームワークを選択
React、React Native、Flutter、iOS、Android のいずれかを選び、現行の統合ガイドを確認してください。
- 02
インストールと認証
ドキュメントに記載された依存関係を設定し、サーバーが発行する Chat の認証情報に UI を接続します。
- 03
カスタマイズと検証
テーマとナビゲーションを調整し、カスタムメッセージを追加して、実機での動作をテストします。
React UI Kitクイックスタート
React クイックスタートに従うか、上記の専用ネイティブガイドまたは Flutter ガイドを選択してください。
公式ガイドを開く ↗React カスタムメッセージガイド
Reactのサンプルを使用して、アプリケーション固有のメッセージとアクションを表示します。
公式ガイドを開く ↗React ConversationList API
カスタマイズする前に、接続状態、ナビゲーション、ドキュメントに記載された置換ポイントを確認してください。
公式ガイドを開く ↗サーバーで UserSig を生成
独自のバックエンドで認証したユーザーを UI Kit に接続します。
公式ガイドを開く ↗構築を始める前に
Chat UI Kits のよくある質問
製品チームとエンジニアリングチーム向けの回答。
チャット UI Kit は単なるビジュアルテンプレートですか?
+
Tencent RTC UI Kits には、Chat 機能と連携するコンポーネントが含まれています。利用には引き続き、アプリケーション、認証、設定、関連する SDK、およびネイティブ依存関係が必要です。
React ではどのチャット UI Kit を使えばよいですか?
+
Web インターフェースには React UI Kit を使用してください。React Native には別のパッケージがあり、モバイルアプリ向けのネイティブ設定が必要です。この 2 つの統合方法に互換性はありません。
UI Kit の一部だけを使用できますか?
+
利用可能なモジュールと拡張ポイントはプラットフォームによって異なります。最新のドキュメントを確認し、コンポーネントを選択するか、体験の一部を置き換えてください。
独自のUIを使用できますか?
+
はい。完全にカスタマイズした画面には Core Chat SDK を選択し、バックエンド処理にはサーバー API を使用してください。
ビジュアルプレビューは Tencent RTC に接続されますか?
+
ページ内プレビューでは、架空の参加者を使用してローカル UI の動作を示しています。接続された製品を評価するには、公式の Chat デモを開いてください。
UI Kit と Core SDK のどちらを選ぶべきですか?
+
UI Kit の連携済みコンポーネントと拡張ポイントが製品に合う場合は、UI Kit を使用してください。メッセージのレンダリング、ナビゲーション、操作を完全に制御する必要がある場合は Core SDK を選び、UI Kit を使わなければ実装することになる実際の画面と比較してください。
アプリ向けにチャット UI Kit をカスタマイズするには?
+
対象プラットフォームの文書にあるテーマ設定とコンポーネント拡張点を選びます。初期化済み Chat SDK と合わせてカスタムメッセージ、ナビゲーション、未読の動作をテストしてください。
React Native や Flutter で使えるチャット UI Kit はどれですか?
+
これらのプラットフォームには専用パッケージとネイティブ設定があります。React Web コンポーネントの流用や同じ拡張 API の想定を避け、対応ガイドに従ってください。
関連ソリューションを見る
次の統合ステップを見つけましょう。
Chat SDK
JavaScript、iOS、Android、React Native、Flutter、Unity、Unreal 向けの Chat SDK を選択できます。統合方法を比較し、メッセージング機能を試して、公式ドキュメントを参照しながら開発を始めましょう。
詳しく見る →カスタマーサポート
アプリ内にカスタマーサポートチャットを構築します。メッセージ履歴を保持し、添付ファイルを収集して、担当者のワークフローと連携し、ライブデモで Tencent RTC Chat を評価できます。
詳しく見る →オンラインコミュニティ
グループ、トピック、メンション、通知、モデレーション機能を備えたコミュニティチャットを構築できます。Tencent RTC SDK と UI Kit を使用して、コミュニティにメッセージング機能を追加しましょう。
詳しく見る →マーケット
マーケットプレイス向けに購入者と販売者のメッセージ機能を構築します。Tencent RTC Chat SDK と API を使用して、出品情報、メディア、注文更新、通報、通知を連携できます。
詳しく見る →統合を計画
ご相談ください:
Chat の統合.
プラットフォーム、対象市場、想定月間アクティブユーザー数、リリース予定について Tencent RTC チームにご相談ください。
ご要望をお聞かせください。
メッセージング体験とチームに必要な統合の範囲策定をサポートします。
チームにお問い合わせください↗Tencent RTC の公式お問い合わせフォームに進んでください。Chatで開発を始める↗
