エンジニアリング

Sendbird UIKit for Reactのツアー。知っておきたい必須コンポーネント&モジュール

Blog author
Michelle Wong Developer Advocate
Share
Sendbird UIKit for Reactのツアー。知っておきたい必須コンポーネント&モジュール

アプリ内チャット構築
チャット
は、魅力的でありながら複雑な試みです。 のために構築しているかどうか。
ゲーミング
,
小売
,
デジタルヘルス
または
オンデマンド
のような場合、チャットUIを合理化する必要があります。
合理的なチャットUI
ウェブアプリやモバイルアプリに センドバード ユーアイキット を使えば、直感的なチャットUIを簡単に実装することができます。 があります。 Sendbird UIKit for React は、Sendbird SDKのビルド済みUIコンポーネントを使用して、機能的で魅力的なチャット体験を構築するためのリソースを提供します。 UIKit for Reactが便利なのは、機能豊富で合理的なチャットを思い通りに構築するために必要な要素を選択できることが、開発者にとって非常に重要だからです。

このブログでは、Sendbird UIKit for Reactのコンポーネントと、それぞれのユースケースについて学びます。 このブログの終わりには、これらのコンポーネントを実装して、独自のカスタムインテグレーションを作成する方法を理解していただけると思います。

ReactのためのUIKit。環境の構築

まず始めに、アプリケーションを
Sendbirdダッシュボード
. アプリケーション、ユーザー、メッセージ、チャンネルなど、チャットサービスに必要なすべてのものにアクセスできる場所です。 アプリケーションを作成したら、チャットSDKを初期化するためにApp IDが必要です。

次に、create-react-appを使用して新しいプロジェクト環境を作成します。そして、Sendbirdのダッシュボードから生成されたApp ID、ユーザーID、ニックネームを保存するための.envファイルを追加します。次に、Sendbird UIKitをnpmまたはyarnでインストールします。

UIKit for Reactをインストールしたら、コンポーネントを用いてアプリケーションに実装していきたいと思います。 最初に学ぶのは、Appコンポーネントです。

アプリコンポーネント

Appコンポーネントは、機能的なチャットインターフェースを作成するためのUIコンポーネントの集合体である。 App、またはAppコンポーネントは、チャンネルリスト、チャンネル会話、チャンネル設定のすべてを1つのコンポーネント内に含むビューをレンダリングします。

これを使うには、App.jsファイルでUIKitコンポーネントSendbirdAppとUIKitスタイルシートをインポートしてください。

 

Appコンポーネントには、アプリケーションIDとユーザーIDが渡される必要があります。 次のコードは、Appコンポーネントの使用方法を示しています。

次に、スタイルシートでチャットインターフェイスの高さと幅を指定します。

このスタイルシートは、App.js ファイルで必ずインポートしてください。

この時点で、新しいチャンネルを作成し、メッセージを送信することができるチャットアプリケーションが正常に動作していることを確認しました。 このように表示されるはずです。

成功したチャットアプリケーション

チャット体験をカスタマイズしたい場合は、UIKitが提供するコアコンポーネントとモジュールを使用することで行います。 まず、コアとなるコンポーネントに飛び込んでみましょう。

UIKit for Reactのコアコンポーネント

コアコンポーネントは、UIKitの主要な構成要素です。 コアとなるコンポーネントは、SendbirdProvider、sendbirdSelectors、userSendbirdStateContext、withSenbird()です。 これらはそれぞれ、アプリケーションの実行に必要なすべてのデータを保存し、操作する。

コアコンポーネントの仕組みは? チャットSDKインスタンスからデータを取得し、Sendbirdサーバーに接続し、ビューで発生したイベントのモジュールと対話し、機能とローカライゼーションを設定します。 これらのコンポーネントは、ビューの作成と実行のために動作しますが、UIを提供したり表示したりすることはありません。 そこで登場するのがモジュールです。モジュールは、使用するコアコンポーネントのUIビューを提供します。


SendbirdProvider
は、コンテキストを提供し、Chat SDKのデータおよび現在の状態を子コンポーネントに渡すため、最も重要なコアコンポーネントです。 SendbirdProviderは、アプリケーション全体がSendbirdのデータにアクセスできるように、トップレベルにある必要があります。

SendbirdProviderを使うことで
useSendbirdStateContext()
コンポーネントを使用して、SendbirdProviderの子コンポーネントにSendbird Chat SDK for Javascriptを実装しています。 useSendbirdStateContextコンポーネントを使うと、SendbirdProviderの状態にアクセスしたり、SDKのアクションにフックしたり、sendbirdSelectorsを使ってメッセージの送信や更新などの機能性を実装したりすることができます。

UIKit v4以前は
withSendbird()
コンポーネントを使用してチャットSDKとモジュールの間でデータを受け渡ししていましたが、UIKitのアップデートにより、代わりにuseSendbirdStateContext()を使用することが推奨されます。

最後に
sendbirdSelectors
は、データ操作を行うために使用され、SDKへのアクセスを可能にします。 があります。
主なセレクタ関数
getSdk、getCreateOpenChannel、getDeleteMessageなどです。

ハンドラ

UIKitは、クライアントアプリで発生するアクティビティやイベントを管理するために、さまざまなイベントハンドラを提供しています。 でv3からv4へのバージョンアップが行われたため。
チャットSDK
UIKitで実装された
チャネルイベントハンドラ
は、sdkInstanceからチャンネルハンドラを呼び出す代わりに、インポートすることができます。 チャネルイベントハンドラには、ConnectionHandler、GroupChannelHandler、OpenChannelHandler、UserEventHandlerがあります。 次に、SDKは セッションハンドラ を使ってセッション・トークンを更新することができます。 セッション・トークンは、チャットSDKがユーザーをSendbirdサーバーに接続し、トークンの有効期限が切れる前にデータリクエストを送信できるようにする際に、ユーザーを安全に認証するために使用されます。

UIKit for Reactのモジュールについて

UIKitのコアコンポーネントについて学んだところで、モジュールについて、そして各モジュールがコアコンポーネントとどのように連携して動作するのかについて学ぶことが重要です。 モジュール は、カスタマイズ可能なUIを提供するスマートコンポーネントとして動作します。 これらのモジュールには、機能的なチャットビューを作成するためのプロバイダーとビルド済みUIコンポーネントが含まれています。

UIKitの8つのモジュールは、以下の通りです。

  1. チャンネル一覧
  2. チャンネルを作成する
  3. グループチャンネル
  4. グループチャンネル設定
  5. オープンチャンネル
  6. オープンチャンネル設定
  7. メッセージ検索
  8. ユーザープロファイルの編集

各モジュールは、コンテキストプロバイダとUIコンポーネントのセットを持ちます。 プロバイダはチャットSDKから必要なデータを管理し、UIコンポーネントはモジュールのビューを表示するためのインターフェイスをレンダリングします。 プロバイダとUIコンポーネントの間でデータを受け渡しするために、useContextフックを利用します。 すべてのUIコンポーネントがプロバイダからのデータにアクセスできるようにするために、コンテキストフックはプロバイダの内部になければなりません。 各モジュールにはデフォルトのUIコンポーネントが用意されていますが、すべてのUIコンポーネントは、カスタムコンポーネントでinput propsを設定することでカスタマイズ可能です。

チャンネルリスト


チャンネルリスト
は、現在のユーザーが所属しているグループチャンネルの一覧を表示します。 ChannelListのプロパティには、onBeforeCreateChannel、onChannelSelect、renderChannelPreviewなどがあります。

onBeforeCreateChannel と onChannelSelect プロパティを使用すると、ユーザーが UIKit のユーザーインターフェイスと対話する際にアクションを実行することができます。 renderChannelPreview プロパティは、チャンネルプレビューのデフォルト UI を、独自にカスタマイズしたコンポーネントで置き換えることができます。 これは、チャンネルプレビューでユーザーのニックネームがチャンネルリストに表示されるだけの設定にするために使用します。

このモジュールで使用されるコンテキストプロバイダは
ChannelListProvider です。
. チャンネルリストビューで使用されるロジックとデータを管理するプロバイダです。 ですから、アプリケーションがチャンネル・リストを表示することだけを必要とするならば、チャンネル・リストの表示をするために ChannelList モジュールを使用し、そのモジュールを ChannelListProvider の内部にラップさせ、必要なデータを ChannelList に渡すことができます。

また
useChannelListContext
フックを使用して、プロバイダのデータにアクセスできるようになります。 useChannelListContextのプロパティには、initialized、loading、currentChannelがある。

ChannelListビューを構成するUIコンポーネントは、ChannelListUI、ChannelListHeader、およびChannelPreviewです。 があります。 チャンネルリストUI は、ヘッダーやチャンネルプレビューなど、モジュールの基本画面を表示します。 renderHeader、renderPlaceHolderError、renderPlaceHolderLoading など、使用するプロパティのリストが含まれています。 があります。 ChannelListHeader はChannelListUIのヘッダーで、タイトルと新しいチャンネルを作成するためのボタンが表示されます。 このUIで利用するプロパティは、renderHeader、renderIconButton、allowProfileEditの3つです。 があります。 チャンネルプレビュー UIコンポーネントは、チャンネルリストに1つのチャンネルを表示します。 ChannelPreviewのプロパティは、channel、onClick、renderChannelAction、isActiveです。

ChannelListProviderとuseChannelListContextを使ってChannelListを実装する方法を説明します。

これはChannelListコンポーネントのデフォルトのデザインです。

ChannelListコンポーネントのデフォルトのUI

チャンネルを作成する

を作成します。
チャンネルを作成する
モジュールは、新しいグループチャンネルを作成するために使用されます。 CreateChannelには、channelUrlプロパティを渡す必要があります。 オプションのプロパティとして、onBeforeCreateChannel、onCreateChannel、onCancel が追加されます。 これらの3つのプロパティはすべて、UIKitのユーザーインターフェイス内の特定のアクションで実行されるもので、独自の操作セットを渡して実行することができます。

例えば、onBeforeCreateChannel を使用すると、ユーザーがグループチャネルを作成するためにクリックしたときに、新しいチャネルを生成する前に呼び出される関数をトリガーすることができます。 呼び出された関数は、例えば、作成中のチャンネルにグループの画像を設定することができます。 onCreateChannel プロパティを使用すると、チャネルが作成された直後にアクションを実装することができます。 チャンネルが作成されたら、成功のメッセージを画面に表示するために使用することができます。 キャンセル」ボタンがクリックされたときにイベントを発生させたい場合は、onCancelプロパティを使用します。 ここから独自のカスタムUIを実装し、関数を呼び出して、チャンネルの作成をキャンセルしてもよいかどうかを尋ねるビューをレンダリングすることもできます。

グループチャンネルを作成し、プロバイダからUIコンポーネントにデータを渡すために使用できる2つのコンテキストオブジェクトは、以下のとおりです。
CreateChannelProvider

useCreateChannel
フックを使用します。 CreateChannelProvider では、channelUrl プロパティの指定が必要です。 その他のオプションのプロパティは、children、onCreateChannel、onBeforeCreateChannel、およびqueries.applicationUserListQueryです。

CreateChannelビューを構成するUIコンポーネントは、CreateChannelUI、InviteMembers、SelectChannelTypeの3つです。 CreateChannelUI と SelectChannelType は、CreateChannel モジュールの最初のステップを示すために一緒に使用されます。 InviteMembersは、チャンネルが作成された後の2番目のステップで表示されます。
CreateChannelUI
は、onCancel と renderStepOne プロパティを持ちます。
SelectChannelType
は、現在のユーザが作成するチャネルの種類を選択できるようにするビューをレンダリングします。
ユーザを招待する
は、現在のユーザーが他のユーザーをチャンネルに招待することができるビューを表示します。 SelectChannelTypeとInviteMembersは、いずれもonCancelプロパティを持ちます。

以下のコードは、CreateChannelモジュールをCreateChannelProviderおよびuseCreateChannelフックと一緒に使用する方法を示しています。

以下は、CreateChannelモジュールのデフォルトレイアウトです。

新しいチャンネルの作成

新しいチャンネルにユーザーを追加する

チャンネル


チャンネル
モジュールは、グループチャンネルの会話を表示します。 ユーザーは、チャンネル内でメンバーに招待された場合のみ、グループチャンネルにアクセスできます。 このモジュールでは、channelUrl プロパティが設定されている必要があります。 その他、isReactionEnabled、showSearchIcon、onBeforeSendUserMessageなどのオプションプロパティがある。

isReactionEnabledおよびshowSearchIconプロパティは、機能が使用されているかどうか、表示されているかどうかを制御します。 onBeforeSendUserMessage プロパティを使用すると、ユーザーがメッセージ送信をクリックしたときにバックグラウンドでカスタムロジックを実行し、メッセージがチャネルに送信される前に操作を完了させることができます。 したがって、メッセージの送信をクリックすると、渡された関数がトリガーとなってアクションが完了し、メッセージが送信されます。 これは、送信されるメッセージのテキストをチェックし、特定の単語が含まれている場合、メッセージの送信時にアニメーションを作動させたい場合に有効です。

グループチャンネルを構築するために使用されるデータの保存と管理に使用される2つのコンテキストオブジェクトがあります。
チャネルプロバイダ

useChannelContext
フックを使用します。 ChannelProvider は channelUrl プロパティを必要とし、isMessageGroupingEnabled、isReactionEnabled、highlightedMessage などの追加プロパティを含む。 useChannelContext コンテキストフックのオプションのプロパティは、 channelUrl, startingPoint, onBeforeSendFileMessage です。

ChannelモジュールのUIコンポーネントには、ChannelUI、ChannelHeader、MessageInput、MessageList、FileViewer、FrozenNotification、Message、RemoveMessageModal、TypingIndicator、UnreadCountが含まれます。 チャンネルUI は、モジュールの基本画面を表示し、renderPlaceholderLoader、renderMessageInput、renderTypingIndicator などのプロパティを持つ。 ChannelHeader は、ChannelUIコンポーネントのヘッダーで、チャンネルのタイトル、メッセージ検索アイコン、チャンネル情報アイコンが表示されます。 メッセージ入力 は、ユーザーがメッセージを入力したり、ファイルメッセージを送信したりするためのコンポーネントです。

メッセージリスト は、グループチャンネル内のすべてのメッセージのリストを表示し、renderMessage、renderPlaceholderEmpty、renderCustomSeperator の3つのプロパティを持ちます。 ファイルビューア は、画像やビデオファイルを含むすべてのメッセージを表示し、onCancel と message という2つのオプションのプロパティを持ちます。 フローズンノーティフィケーション は、現在のチャンネルがフリーズしていることをユーザーに警告するバナーを表示するコンポーネントです。 メッセージ は、MessageList 内のコンポーネントで、チャネル内の単一のメッセージを表示します。 message プロパティが必要で、hasSeperator、chainTop、renderEditInput などのオプションプロパティが追加されています。
メッセージ削除モーダル
は、選択したメッセージがチャネルから削除されることを確認するモーダルを表示し、onCancel と message という 2 つのオプションのプロパティを持ちます。
TypingIndicator(タイピングインジケータ
は、チャンネル内のどのメンバーが積極的にメッセージを入力しているかを表示します。 そして最後に。 未読数 は、チャンネル内にある未読メッセージの数を表示します。 UnreadCountのプロパティは、count、time、onClickである。

ChannelProvider と useChannelContext を使って Channel モジュールを実装する方法は、以下の通りです。

Channelコンポーネントのデフォルトレイアウトです。

チャンネルコンポーネントのレイアウト

チャンネル設定


チャンネル設定
モジュールは、グループチャンネル情報および設定オプションのメニューを表示します。 メンバーは、メンバーリストのチェック、チャンネルへの招待、チャンネルからの退出が可能です。 ユーザーがチャンネル・オペレーターの場合、オペレーターの追加・削除、メンバーのミュート・禁止、ミュート・禁止されたユーザーのリスト表示、チャンネルからの退出・凍結などの追加オプションを(設定で)利用することができます。

ChannelSettings は channelUrl プロパティを必要とし、onCloseClick、onChannelModified、renderLeaveChannel などのオプションプロパティを持つ。 onCloseClickとonChannelModifiedプロパティは、UI自身から発せられるイベントによってトリガーされ、渡されたカスタムロジックが実行されます。 ユーザーがボタンをクリックして設定バーを閉じるイベントで、onCloseClickを利用することができます。 設定コンポーネントを表示しないようにUIを変更したい関数を渡すことができます。 設定が変更された時点でイベントを発生させたい場合は、onChannelModifiedプロパティを利用して、画面に成功メッセージを表示させることができます。 ChannelSettingsを使用する場合、「チャンネルを残す」ボタンのデザインを変更したい場合があります。 renderLeaveChannel プロパティを使用すると、独自のカスタム UI を設定モジュールに渡すことができます。

このモジュールのチャンネル設定メニューを構築するためのコンテキストオブジェクトは、ChannelSettingsProviderとuseChannelSettingsContextの2つです。 があります。 チャンネル設定プロバイダ には、channelUrl を渡すことが必要です。 このプロバイダの他のいくつかのオプションは、onCloseClick、onBeforeUpdateChannel、invalidChannelです。 があります。
useChannelSettingsContext
フックには、onCloseClick、onChannelModified、onBeforeUpdateChannel など、使用可能な複数のプロパティがあります。

グループチャンネル設定ビューを構成するUIコンポーネントには、ChannelSettingsUI、ModerationPanel、UserPanel、ChannelProfile、EditDetailsModal、LeaveChannel、UserListItemのセットが含まれます。 チャンネル設定UI には、チャンネルプロファイルビュー、モデレーションメニュービュー、チャンネルを残すボタンが含まれるビューが表示されます。 このコンポーネントには、renderPlaceHolderError、renderChannelProfile、renderModerationPanel、および renderLeaveChannel という 4 つのオプションのプロパティがあります。 があります。 モデレーションパネル は、チャンネルオペレータのための設定メニュービューを作成します。 これには、オペレータ、メンバー、ミュートおよび禁止されたユーザーのリスト、チャンネル凍結トグルボタン、およびチャンネルを残すオプションが含まれます。 があります。 ユーザーパネル コンポーネントはチャンネルメンバーの設定メニュービューを作成します。このメニューにはメンバーリスト、 他のユーザーをチャンネルに招待するオプション、 チャンネルから退出するオプションが含まれます。 があります。
チャンネルプロファイル
コンポーネントは、チャンネルのタイトル、画像、ユーザーがチャンネル情報を変更するための編集ボタンを含むチャンネルプロファイルビューを作成します。
編集詳細モーダル
は、ユーザーがチャンネル名とプロフィール画像を編集するためのモーダルを表示します。 onSubmitとonCancelという2つのオプションのプロパティを使用することができる。 があります。 リーブチャネル モーダルは、ユーザーが設定メニューでチャンネルを離れることをクリックしたときに表示され、このアクションを確認するようユーザーに要求します。 LeaveChannelにはonSubmitとonCancelプロパティがあり、一緒に使用することができます。 があります。 ユーザーリストアイテム は、ユーザーリスト内の個々のユーザーを表示します。 このコンポーネントは、ユーザープロパティを設定する必要があり、currentUser、className、actionという3つのオプションプロパティを持ちます。

ここでは、ChannelSettingsProviderとuseChannelSettingsContextを使って、ChannelSettingsモジュールを実装する方法を説明します。

これは、非オペレータのためのChannelSettingのデフォルトのUIです。

デフォルトのチャンネル設定UI

チャンネルオペレーターに表示されるチャンネル設定です。

チャンネルオペレーターのためのチャンネル設定UI

OpenChannel

オープンチャンネルとは、チャット内で多数のユーザーがやり取りできる公開チャンネルのことです。 があります。
OpenChannel
モジュールには channelUrl プロパティが必要で、children、isMessageGroupingEnabled、messageLimit、renderUserProfile などのオプションのプロパティが用意されています。

childrenプロパティは、OpenChannelProviderが提供するデータである、OpenChannelの子コンポーネントを表示します。 isMessageGroupingEnabledプロパティは、機能が有効かどうかをチェックし、UIをどのように表示するかを知ることができます。 メッセージのグループ化を有効にすると、1分以内に送信された各メッセージは1つのメッセージにグループ化されます。 messageLimit プロパティは、チャネルの OpenChannelMessageList コンポーネントに格納されるメッセージの最大数を指定します。 ユーザーのアバターをクリックしたときのプロフィールプレビューをカスタマイズしたい場合は、renderUserProfileプロパティを使用して独自のUIコンポーネントを渡すことで、デフォルトのデザインを上書きすることができます。

OpenChannelモジュールがデータを保存し、処理するために使用できるコンテキストオブジェクトは、OpenChannelProviderとuseOpenChannelフックです。 があります。 OpenChannelProvider は、channelUrl プロパティを設定する必要があります。 オプションのプロパティには、isMessageGroupingEnabled、messageLimit、およびonChatHeaderActionClickがあります。 があります。
useOpenChannelContext
コンテキストフックには、 renderUserProfile、currentOpenChannel、allMessages など、利用できるプロパティが多数あります。

OpenChannelモジュールを構成するUIコンポーネント群は、OpenChannelUI、OpenChannelHeader、OpenChannelInput、OpenChannelMessageList、OpenChannelMessageの5つです。 OpenChannelUI は、モジュールの基本画面と、ヘッダー、メッセージ、メッセージリストのビューをオープンチャネルで表示します。 OpenChannelUIには、renderMessage、renderHeader、renderInputなどのオプションのプロパティが用意されています。
OpenChannelHeader
は、チャンネルのタイトルと情報アイコンを描画します。
OpenChannelInput
は、ユーザーがメッセージや画像、動画、文書などのファイルメッセージを送信する場所です。 があります。 OpenChannelMessageList は、開いているチャネルのすべてのメッセージのリストを表示します。 renderMessage と renderPlaceHolderEmptyList という 2 つのオプションのプロパティを持つ。 OpenChannelMessage は、チャンネル内の個々のメッセージを表示します。 このコンポーネントはメッセージプロパティを必要とし、hasSeperator、chainTop、editDisabled などのオプションプロパティを持ちます。

OpenChannelモジュールをOpenChannelProviderとuseOpenChannelContextで使用する方法を説明します。

OpenChannelのデフォルトのデザインはこのような感じです。

OpenChannelのデフォルトのUI

OpenChannelSettings


OpenChannelSettings
モジュールには、チャンネル名、チャンネルの画像、アプリケーションのURL、参加者のリストを提供するなどの設定メニューが表示されます。 現在のユーザーがオペレーターの場合、操作の追加や削除、ミュートや禁止されたユーザーのリストの表示、参加者のミュートや禁止、チャンネルの削除などの追加設定が可能です。

OpenChannelSettingsには、channelUrlプロパティを渡す必要があります。 その他、onChannelModified、onDeleteChannel、onCloseClickなどのプロパティが提供されています。 これらのプロパティは、ユーザーがUI内の特定の属性と対話する際に一連の操作を実行します。 オープンチャンネル設定において、onCloseClickを使用することで、設定バーの状態をクローズに設定し、チャットビューから設定コンポーネントを削除することができます。 onChannelModified と onDeleteChannel を使用する場合も同じ考えで、ユーザが行った編集を保存するためにクリックするか、チャネルを削除するためにボタンをクリックすると、アプリケーションの UI を変更して、カスタムコンポーネントが画面に表示されるようにすることができます。

機能的なチャンネル設定メニューを構築するために使用される2つのコンテキストオブジェクトは、OpenChannelSettingsProviderとuseOpenChannelSettingsContextのフックです。 があります。 OpenChannelSettingsProvider は channelUrl を渡す必要があり、onBeforeUpdateChannel、disableUserProfile、renderUserProfile などの追加プロパティが含まれます。 があります。
useOpenChannelSettingsContext
フックには、onDeleteChannel, onChanelModified, setChannel などのプロパティのリストがあります。

があります。
UI コンポーネント
は、OpenChannelSettingsUI、OperatorUI、ParticipantUI、OpenChannelProfile、EditDetailsModalから構成されます。
OpenChannelSettingsUI
は、OperatorUIとParticipantUIを含むモジュールの基本画面を表示します。 OpenChannelSettingsUIのオプションプロパティは、renderOperatorUIとrenderParticipantListの2つです。
OperatorUI
は、チャンネルオペレータのための設定メニューを表示し、オプションのプロパティ renderChannelProfile を持ちます。
パーティシパントUI
は、開いているチャネルの参加者のリストを表示します。
OpenChannelProfile
は、チャネルのタイトルと画像を表示するチャネルプロファイルビューを作成します。
EditDetailsModal
は、ユーザーがチャンネル名とプロフィール画像を編集するときに表示されます。 キャンセルボタンがクリックされたときに起動するonCancelプロパティを持っています。

OpenChannelSettingsProvider と useOpenChannelSettingsContext を使って OpenChannelSettings モジュールを利用する方法は、以下のとおりです。

OpenChannelSettingsはこのように表示されます。

チャンネル設定のデフォルトUI

メッセージ検索

について
メッセージ検索
モジュールにより、ユーザーは自分がメンバーとなっているチャンネル内のメッセージを検索することができます。 MessageSearch には channelUrl プロパティを設定する必要がある。 追加オプション
プロパティ
は、onResultLoaded、onResultClick、renderPlaceholderEmptyListなどのプロパティが使用可能です。

MessageSearch モジュールを使用する場合、チャットの上にポップアップレイヤーとして表示される別の UI ウィンドウに、すべての検索結果を表示したい場合があります。 結果を受け取ると関数が呼び出されるonResultLoadedプロパティを使用すると、そうすることができます。 onResultClickを使用すると、ユーザーが検索結果を選択した時点で、カスタムロジックを実行することができます。 renderPlaceholderEmptyList プロパティを使用すると、検索リストが結果なしで戻ってきたときに、プレースホルダーのカスタマイズされた UI を作成することができます。 そこで、検索リストに何もないときに、通知を表示させることができます。

MessageSearchについては、MessageSearchProviderとuseMessageSearchフックを用いて、メッセージ検索UIを構築するためのデータを保存・管理することが可能です。 メッセージサーチプロバイダー は channelUrl を指定する必要があり、さらに onResultClick、messageSearchQuery、onResultLoaded などのオプションのプロパティがあります。 があります。
useMessageSearchContext
フックには、onResultLoaded、requestString、selectedMessageId などのオプションのプロパティがあります。

メッセージ検索UI
MessageSearchUI
は MessageSearch モジュールに含まれる唯一の UI コンポーネントで、検索結果のビューを表示します。

ここでは、MessageSearchProviderとuseMessageSearchContextを使って、MessageSearchを実装する方法を説明します。

MessageSearch モジュールのデフォルトの UI は以下のようなものです。

MessageSearchのデフォルトのUI

EditUserProfile

その
EditUserProfile
モジュールは、現在のユーザーが自分のプロファイルを変更できるようにします。 自分のアバターをクリックすると、その人のプロフィール情報がポップアップで表示されます。 ここでは、プロフィール画像やニックネームを編集したり、テーマをライトモードとダークモードに切り替えたりすることができます。

EditUserProfileには4つのオプションがあります。
プロパティ
子、onCancel、onThemeChange、onEditProfile を含む。 childrenプロパティは、EditUserProfileProviderが提供するEditUserProfileの子コンポーネントを参照するために使用されます。 onCancelは、ユーザーが行った編集をキャンセルするためにクリックしたことをトリガーとしてUIが起動したときに、操作を実行するために使用されます。 チャットがライトまたはダークモードであるかどうかに基づいて追加のスタイルを追加したい場合、ユーザーがテーマを変更するためにクリックしたときにカスタムCSSを実装する関数を呼び出すために、onThemeChangeを使用することができます。 最後に、onEditProfileでは、ユーザーがプロフィールを更新したら、一連のアクションを実装することができます。

UIKitが提供する
EditUserProfileProviderを提供します。

useEditUserProfileProviderContextを提供します.
フックを EditUserProfile モジュールのコンテキストオブジェクトとして使用します。 いずれもEditUserProfileと同じオプションのプロパティ、children、onCancel、onThemeChange、onEditProfileを使用することができます。

EditUserProfileモジュールの唯一のUIコンポーネントである
EditUserProfileUI
で、これはユーザプロファイルのビューをレンダリングします。

EditUserProfileのデフォルトのデザインは、以下のようになります。

ユーザープロファイルの編集のデフォルトUI

結論と次のステップ

Sendbird UIKit for Reactが提供してくれるコアコンポーネントとモジュールについて詳しくレビューしてきました。 このように強固な基盤を構築した上で、さまざまなユースケースをサポートするためにどのコンポーネントやモジュールが必要かを判断していくことになります。 例として、私たちの ブログ Sendbird UIKit for Reactを使ったWhatsAppメッセンジャークローンの作り方について。 このブログでは、WhatsAppのようなチャットエクスペリエンスを構築する方法をご紹介します。

詳細については、当社の
ドキュメント
をご覧いただくか、豊富な
UIKitチュートリアル
をご覧ください。
開発者向けポータ
l. についてお困りでしたら
センドバードUIKit
を利用するには
コミュニティフォーラム
または
お問い合わせ
. 私たちのエキスパートがいつでもお手伝いします

ハッピーチャットビルディング!✨