本文へスキップ

開発者向け CHAT

製品に自然に組み込めるチャット UI キット。

接続された会話リスト、メッセージビュー、メッセージ作成欄から始めましょう。プラットフォーム固有のコンポーネントとサポートされているカスタマイズポイントを使って、独自のインターフェースを構築できます。

アプリ内のメッセージングを、独自のブランドとビジネスルールで。

すべての会話にブランドらしさをアプリケーション UI のイメージ図

プラットフォームを選択

フレームワークに対応した連携コンポーネント。

各プラットフォームのコンポーネントモデル、インストール要件、カスタマイズオプションを比較します。

製品機能

製品を中心に構築されたメッセージング。

会話リスト、メッセージビュー、入力エリアの連携方法と、製品独自のスタイルやカスタムメッセージを組み込む場所を確認できます。

会話画面を構成

連携された会話およびメッセージコンポーネントから構築し、周囲のレイアウトとナビゲーションを選択します。利用可能なモジュールは、プラットフォームと UI Kit のリリースによって異なります。

React UI Kitクイックスタート

ビジュアルスタイルを調整

サポートされているテーマ API と拡張 API を使用して、チャットを独自のビジュアルシステムに統合します。カスタマイズ後は、コントラスト、長文メッセージ、読み込み状態、レイアウトの動作を検証してください。

React UI Kitクイックスタート

製品にメッセージング機能を追加

予約、注文、アクティビティ向けのカスタムレンダラーを作成します。実際のトランザクション状態とアクションの認可は、そのワークフローを管理するバックエンドに保持してください。

React カスタムメッセージガイド

ナビゲーションと未読状態を連携

受信トレイをアプリのナビゲーションと通知に接続します。サポート対象のすべてのプラットフォームで、選択した会話、戻り先、アカウント変更、通知のディープリンクをテストしてください。

React ConversationList コンポーネント API

リッチメディアを会話の一部に

まず、対応している画像、ファイル、音声メッセージのコンポーネントを使用します。送信前にプレビューできるようにし、添付ファイルを簡単に開けるようにしてください。また、プラットフォームに合わせてアップロード制限とネイティブ権限を設定します。

JavaScript メッセージ API

グループ会話を整理

プラットフォームのグループおよびメンバーコンポーネントを使用して、会話の詳細とメンバー情報を表示します。参加、招待、退出などの操作を、製品に必要なグループモデルとアクセスルールに連携します。

適切な Chat グループタイプを選択

利用可否は SDK、エディション、サービスプランによって異なります。 Chat プランと機能制限を確認 ↗

POKEKARA · ソーシャルエンターテインメント

ライブ体験を中心にインタラクションを構築。

Pokekara の Tencent RTC 導入事例では、カラオケ、ライブ配信ルーム、ソーシャルメッセージングを組み合わせています。Chat API と構築済み UI Kit を含む統合サービスについて紹介しています。

  • エンターテインメント体験内のチャット
  • 音声・ビデオサービスと組み合わせて使用するコンポーネント
導入事例を読む 公開済みの複数製品の事例です。記事では UI Kit のフレームワーク名は明記されていません。

なぜテンセントRTCなのか

既製の UI にも製品への統合が必要です。

チャット UI Kit を使えばコンポーネント開発の手間を減らせますが、認証済みのユーザーID、会話権限、ナビゲーション、ビジネスルールは引き続きアプリ側で用意する必要があります。連携範囲を決める前に、対象プラットフォームのガイドを参照し、その依存関係を確認してください。

接続済みのコンポーネントから開始

会話リスト、メッセージビュー、メッセージ作成コンポーネントは既に Chat の状態に接続されています。これにより、チームが実装するインターフェース連携を減らせます。

自分たちらしい製品体験を実現

プラットフォーム別のテーマ API と拡張 API により、専用のチャット画面を別途用意することなく、ブランドに合わせたチャットやアプリ固有のメッセージ表示を実現できます。

導入するインターフェースの範囲を選択

プラットフォームでサポートされるコンポーネントを選択するか、UIを完全に制御する必要がある領域ではCore SDKを使用します。開発規模を見積もる前に、コンポーネントの対応範囲を確認してください。

Chat 製品の全体像と機能を見る ↗

体験する

会話の使用感をご確認ください。

このローカルインターフェースのプレビューでテーマを変更し、メッセージを追加できます。その後、公式 Chat デモを開き、テストアカウントで連携メッセージングをお試しください。

このプレビューではローカルステートと架空の参加者を使用しています。Tencent RTCには接続せず、ほかの人にメッセージを送信することもありません。

プレビューをカスタマイズ
Iris Morgan架空の会話

改訂したスタジオレイアウトを確認できるようになりました。

送信 ↑

Local UI preview · no message is sent to a service

評価から統合まで

Chatをアプリケーションに接続します。

まず selected platform クイックスタートを使用し、その後で認証とアプリケーションに必要なメッセージ動作を追加してください。

  1. 01

    フレームワークを選択

    React、React Native、Flutter、iOS、Android のいずれかを選び、現行の統合ガイドを確認してください。

  2. 02

    インストールと認証

    ドキュメントに記載された依存関係を設定し、サーバーが発行する Chat の認証情報に UI を接続します。

  3. 03

    カスタマイズと検証

    テーマとナビゲーションを調整し、カスタムメッセージを追加して、実機での動作をテストします。

構築を始める前に

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 の統合.

プラットフォーム、対象市場、想定月間アクティブユーザー数、リリース予定について Tencent RTC チームにご相談ください。

技術的な適合性移行範囲利用量と料金

ご要望をお聞かせください。

メッセージング体験とチームに必要な統合の範囲策定をサポートします。

チームにお問い合わせくださいTencent RTC の公式お問い合わせフォームに進んでください。
Chatで開発を始める↗