Sendbird UIKit for Reactを使ったスケジュールメッセージの作り方
![Image6 5](https://sendbird.imgix.net/cms/How-to-build-scheduled-messages-with-the-Sendbird-UIKit-for-React_Tutorial-Cover.jpg?auto=format,compress&crop=faces)
アプリ内チャットの強力なツールであるスケジュールされたメッセージにより、送信者は最も適切な時間に受信者に到達し、本質的な柔軟性を提供できます。メッセージのスケジュールを設定することは、送信者にとっても便利であると同時に、受信者にとっても、特に両方が異なるタイム ゾーンにある場合に便利です。スケジュールされたメッセージは、医療機関が予約リマインダーを送信したり、フィンテックが重要な銀行通知を送信したり、マーケットプレイスがプロモーション メッセージを送信したりするのに役立ちます。
このチュートリアルでは、 Sendbird UIKitアプリケーション内でSendbird Chat SDK for JSを使用してスケジュールされたメッセージを使用する方法について説明します。
スケジュールされたメッセージは、グループ チャネル内でのみ使用できることに注意してください。また、スケジュールされたメッセージを送信する場合は、現在の時刻から 5 分後にスケジュールする必要があります。
スケジュールされたメッセージの実装に関する以下のビデオ チュートリアルを見ると役立つ場合があります。
始めましょう!
スケジュールされたメッセージの開始
まず、Sendbird アカウントを作成します。次に、 Sendbird ダッシュボードで新しいアプリケーションとユーザーを作成します。ダッシュボードは、チャット サービスのすべてにアクセスできる場所です。作成後、Chat SDK と UIKit をアプリケーションで初期化するために生成されたアプリケーション ID を保存します。
![スケジュールされたメッセージのブログ画像](http://sendbird.sfo3.digitaloceanspaces.com/cms/app-id.jpg)
次に、React アプリケーションを作成し、Sendbird Chat SDKとSendbird UIKit for Reactを npmでインストールします。
このサンプルは Material UI を使用するため、以下をインストールします。
マテリアル UI アイコンについては、 MUI ドキュメントを参照してください。
dayjs をインストールして、アプリケーション内で日付と時刻を取得します。
アプリケーションで、アプリ ID、ユーザー ID、ニックネーム、および Sendbird ダッシュボードで提供されるアクセス トークンを格納する .env ファイルを作成します。次に、各変数を App.js ファイルにインポートして、Chat SDK と UIKit を初期化します。
App.js で、UIKit からSendbird プロバイダーをインポートします。これがアプリケーションのラッパーになります。CustomizedApp.js という名前の新しいファイルを作成し、それを App.js にインポートします。CustomizedApp は SendbirdProvider の子コンポーネントになり、ChannelList、Channel、および ChannelSettings コンポーネントを含みます。
SendbirdProvider は、UIKit のコンテキスト プロバイダーです。appId、userId、ニックネーム、accessToken を渡して UIKit を初期化してください。
App.js ファイルで Sendbird Chat SDK for JS を初期化します。SendbirdChat.init 関数を使用して、使用する appID とモジュールを渡します。アプリケーションで GroupChannelModule を使用できるようにするには、GroupChannelModule をモジュールとして渡します。SendbirdChat.init が返されたら、それを使用して .connect を呼び出し、userID と accessToken を渡します。
![U Ikit Mobile content offer background](https://sendbird.imgix.net/cms/UIkit-content-offer-background.jpg?auto=format,compress&crop=faces)
The only UIKit you need.
基本的な UIKit コンポーネント
CustomizedApp で、UIKit から ChannelList、Channel、ChannelSettings をインポートします。
チャンネル一覧
ChannelList コンポーネントは、アプリケーション内でチャネル リストをレンダリングします。onChannelSelect プロパティを使用して、チャネル リストでクリックされるチャネルを設定します。
チャネル
Channel コンポーネントは、channelUrl、onChatHeaderActionClick、および renderMesageInput プロパティを使用します。channelUrl は currentChannelUrl を設定し、onChatHeaderActionClick はクリック時に開く設定オプションをレンダリングします。
Channel コンポーネントが使用する最後のプロパティは renderMessageInput で、会話ウィンドウ内にカスタム メッセージ入力コンポーネントを表示します。CustomizedMessageInput というカスタム コンポーネントを作成します。
チャンネル設定
ChannelSettings コンポーネントは channelUrl を渡して現在のチャンネルを更新し、onCloseClick を渡して設定オプション メニューを閉じます。
UIKit コンポーネントをインポートした後、次の要素を追加して各コンポーネントをラップします。
- ChannelList の周りに「channel-list」というクラス名を持つ div
- Channel を囲む「channel-chat」というクラス名の div
- ChannelSettings の周りに「channel-settings」というクラス名を持つ div
ここで、3 つのコンポーネントすべてとその div ラッパーをクラス名「channel-wrap」でラップする div を作成します。これらのクラス名には、アプリケーションに適用したい UIKit のプリセット スタイル コンポーネントがあります。
チャットの左側にチャネル リスト、右側に会話ウィンドウを表示するには、App.css ファイルに次のスタイルを適用します。
アプリケーションは次のように表示されます。
![デスクトップ ブログ イメージの基本的なチャット UI](http://sendbird.sfo3.digitaloceanspaces.com/cms/basic-chat-ui.jpg)
チャットの基本が完成したので、カスタマイズを実装します。
UIKit のカスタマイズ
カスタマイズされたメッセージ入力
前述のように、Channel コンポーネントは renderMessageInput プロパティを使用して CustomizedMessageInput を返します。CustomizedMessageInput は、メッセージを書き込むための入力フィールドとファイルを添付するためのアイコンを含む UIKit のプリセット デザインを使用して開始します。
スケジュールされたメッセージを一覧表示する
入力ボックスが空の場合、Material UI からアイコン ボタンを追加します。これをクリックすると、チャネル内のユーザーのスケジュールされたメッセージのリストが表示されます。
![新しいアイコンのブログ画像](http://sendbird.sfo3.digitaloceanspaces.com/cms/basic-chat-ui-icon-bar.jpg)
まず、loadScheduledMessages 関数が showScheduleMessageList の状態を true に設定します。showScheduleMessageList が true であるため、CustomizedMessageInput が返されると、カスタム コンポーネントの ScheduleMessageList がレンダリングされます。これは、リターン内でどのように見えるかです:
ScheduleMessageList は、スケジュールされたメッセージのリストをレンダリングします。
次に、loadScheduledMessages はリスト クエリとスケジュールされたメッセージの総数を取得し、その情報を ScheduledMessageList に渡して表示します。
スケジュールされたすべてのメッセージを一覧表示するには、channelUrl を必要とするクエリ パラメータを作成します。このサンプルでは、params に scheduledStatus が含まれており、ステータスが保留中のスケジュール済みメッセージのリストが返されます。パラメータが設定されたら、createScheduledMessageListQuery を呼び出してパラメータを渡します。以下は、スケジュールされたメッセージのリストを返します。
リストが受信されたら、scheduledMessgesList と呼ばれる状態変数内でそれを追跡します。
次に、この変数が ScheduleMessageList コンポーネントに渡され、リストが画面にレンダリングされます。
スケジュールされたメッセージの数を取得するには、 scheduledStatus を含むパラメーターを設定します。次に、getTotalScheduledMessageCount を呼び出してパラメーターを渡します。保留中のメッセージの数が返されたら、その数を setScheduledMessagesCount という状態に保持し、その変数を ScheduleMessageList に渡してカウントを表示します。
上記の手順が完了すると、loadScheduledMessages は次のようになります。
![ScheduledMessageList ブログ画像](http://sendbird.sfo3.digitaloceanspaces.com/cms/scheduled-massage-list.jpg)
スケジュールされたメッセージを更新する
ScheduleMessageList では、リストに表示される各メッセージに [更新] ボタンと [キャンセル] ボタンがあります。ユーザーが更新をクリックすると、updateScheduledMessage が呼び出されます。これにより、ScheduleMessageList が画面から削除され、ScheduleMessageForm が表示されるように、setShowScheduleMessageList が false に設定され、setShowScheduleMessageForm が true に設定されます。
次に、setMessageToUpdate を使用して選択されたメッセージ オブジェクトの状態を保存し、setInputText のメッセージである入力されたテキストを保存します。
setShowScheduleMessageForm が true になったので、CustomizedMessageInput は ScheduleMessageForm を返します。
ScheduleMessageForm は次のようになります。
![ScheduleMessageForm ブログ画像](http://sendbird.sfo3.digitaloceanspaces.com/cms/ScheduleMessageForm.jpg)
スケジュール メッセージ フォームを使用すると、ユーザーは日時を変更したり、スケジュールされたメッセージ自体を更新したりできます。ユーザーがフォームを送信すると、scheduleMessage が呼び出されます。scheduleMessage は、メッセージが既存のスケジュールされたメッセージから更新されているか、初めて作成されたかを確認します。
このメッセージは、スケジュールされたメッセージをクリックしてスケジュールされたメッセージのリストから取得されたため、更新され、関数を使用してスケジュールされたメッセージを更新します。一方、メッセージがまだ作成されていない場合は、 create 関数を使用して新しいスケジュールされたメッセージを生成します。
新しいスケジュールされたメッセージの送信
CustomizedMessageInput で、ユーザーが入力バーに入力すると、Material UI から表示されるアイコン ボタンを追加し、ユーザーがメッセージをスケジュールできるようにします。
![アイコン ボタン ブログ画像を追加](http://sendbird.sfo3.digitaloceanspaces.com/cms/icon-button-add.jpg)
アイコンをクリックすると、setShowScheduleMessageForm が true になり、前述の ScheduleMessageForm が表示されます。
フォームが送信されると、scheduleMessage が呼び出されます。この場合、新しいスケジュールされたメッセージを作成しているため、update メソッドの代わりに create メソッドを使用します。params オブジェクトには、メッセージとcheduledAt プロパティが必要です。パラメータは createScheduledUserMessage 関数に渡されます。
スケジュールされたメッセージをキャンセルする
CustomizedMessageInput では、ScheduleMessageList に各メッセージが表示され、更新ボタンとキャンセル ボタンが表示されます。ユーザーがキャンセル ボタンをクリックすると、cancelScheduledMessage 関数がトリガーされます。
この関数内で、チャット SDKのcancelScheduledMessage関数を使用して、スケジュールされたメッセージをキャンセルします。スケジュールされたメッセージの ID を渡す必要があります。次に、そのメッセージがキャンセルされたら、loadScheduledMessages を呼び出して、保留中のスケジュールされたメッセージのリストを再読み込みします。これにより、UI が更新され、キャンセルされたばかりのメッセージが表示されなくなります。
cancelScheduledMessage は次のようになります。
結論
できたね!これで、Sendbird チャット SDK のスケジュールされたメッセージ機能を活用する UIKit を使用して、機能するチャット アプリケーションができました。ユーザーがゲームに先んじて、将来送信されるメッセージをスケジュールできるようにするための手順を実行しました。
このサンプルの完全なgithub リポジトリを確認することをお勧めします。Sendbird Chatまたは UIKit のヘルプが必要な場合は、Chatのドキュメントと UIKitのドキュメントを参照してください。豊富な事前構築済み UI コンポーネントを使用して、アプリでチャットを開始して実行する方法についてのガイダンスが見つかります。また、Sendbirdに関するすべての質問をしたり回答したりできるフォーラムである Sendbird コミュニティ で回答を見つけることもできます。サポートが必要な場合は、お気軽にお問い合わせください。当社の専門家が喜んでお手伝いいたします。
ハッピー スケジュールされたメッセージの構築!💬