エンジニアリング

Sendbird UIKitを使ってReactでWhatsAppメッセンジャークローンを構築する方法

Blog author
Michelle Wong Developer Advocate
Share
Sendbird UIKitを使ってReactでWhatsAppメッセンジャークローンを構築する方法

20億人以上の
20億人以上のユーザー

1,000億のメッセージ
WhatsAppは最も人気のあるメッセージングアプリで、毎日1,000億のメッセージが交換されています。
最も人気のあるメッセージングアプリ
を世界に発信しています。 ユーザー間のメッセージのやり取りや、企業との会話のしやすさなどが人気に大きく寄与してきましたが、最近、WhatAppは
非難を浴びた
を利用したスパムメールが増加しているとして、非難を浴びました。

ブランドは、この問題を回避するために
アプリ内チャット
. コンテキストに富んだアプリ内チャットは、企業の重要な更新、ニュース、発表がスパムで溢れたメッセージの受信箱に紛れ込むことがないことを意味します。 また、アプリ内チャットでは、リアルなメッセージング体験を提供するとともに、ブランドが責任を持ってユーザーデータをコントロールすることができます。 なぜなら、ビジネスにおけるメッセージは、ブランドを構築するための重要な土台となる可能性があるからです。 確かに、Metaの広報担当者は
先日、「メッセージングは、電子メールや電話よりも
メッセージングは、電子メールや電話よりも、ビジネスを成功させるための新しい方法だ」とコメントしています。

そこで本ブログでは、ReactでWhatsAppメッセンジャークローンを構築する方法をご紹介します。 今回のプロジェクトでは Sendbird UIKit for React. Sendbird UIKitにより、開発者は高度にカスタマイズ可能なUIコンポーネントを用いて、オーダーメイドのチャット体験を構築することができます。 このブログでは、UIKit が提供するコンポーネントが、我々の目標である「React で WhatsApp メッセンジャークローンを作る」ためのカスタム統合の各側面をどのように構成しているかを理解します。

このブログが終わるころには、このようなデスクトップ用のビルドが完成していることでしょう。

デスクトップ用WhatsAppメッセンジャークローン

そして、これはモバイル向けです。

モバイル向けWhatsAppメッセンジャークローン

WhatsAppメッセンジャークローンを始めるには

まず、アプリケーションを
Sendbirdダッシュボード
. ここでは、チャットサービスで提供されるすべてのものにアクセスすることができます。 アプリケーションを作成したら、チャットSDKを初期化するために生成されるアプリケーションIDをreactアプリケーションに保存しておく必要があります。

Reactアプリケーションを生成し、npmまたはyarnでSendbird UIKit for Reactをインストールします。

UIKitをインストールしたら、UIKitからアプリケーションに必要なコンポーネントをインポートすることができます。

ReactでWhatsAppメッセンジャーのクローンを作るためのコンポーネントとモジュール

まず始めに、アプリケーションに組み込む複数のモジュールの一般的なラッパーとして、SendbirdProviderを使用することにします。

この例では、ChannelList、Channel、ChannelSettings の各モジュールを使用することにします。 この3つのモジュールで、モバイルビューとデスクトップビューを作成します。 モバイルビューでは、チャンネルリスト、またはチャンネルの会話と設定メニューの両方が一緒にレンダリングされます。 デスクトップ表示の場合、チャンネルリストとチャンネルカンバセーションを並べて表示することになります。

まず、App.jsファイル内でSendbirdProviderとUIKitのスタイルシートをインポートします。

備考:ここではSendbirdProviderをインポートして、アプリケーション内でSBProviderとして参照しています。 ご自身のアプリケーションでどのように参照するかを選択することができます。

次に、スタイルシートに以下のCSSを適用し、styles.cssファイルに格納します。

さて、このアプリケーションは、モバイルビューだけでなく、デスクトップビューでも動作するようにしたいと思います。 そこで、プロバイダー・コンポーネントの中で、ウィンドウの画面サイズをチェックする必要があります。 携帯電話の画面サイズであれば、私たちのモバイルビューをレンダリングします。 一般的な携帯電話の画面のピクセル数を超えている場合は、デスクトップ表示を行います。 そこで、2つのコンポーネントを作成し、MobileViewとDesktopViewと名付けます。 この2つのコンポーネントには、私たちのモジュールが含まれます。

これらの手順が完了すると、App.jsファイルは次のようになります。


備考

:ダッシュボードで、ユーザーにアクセストークンを発行する場合、上記のコードサンプルのように、SBProviderにaccessToken変数を渡す必要があります。

デスクトップ画面

デスクトップ表示はSendbirdのデフォルトレイアウトで、左側にチャンネルリスト、右側に会話が表示されます。 DesktopViewコンポーネントは、classNameが “sendbird-app__wrap “のdivを返します。 このclassNameは、会話ウィンドウの横にチャンネルリストを表示するSendbirdのデフォルトデザインによって、すでにスタイルが決まっています。

次に、sendbird-app__wrap divのheightを、ウィンドウ画面全体のサイズである100vhに設定する必要があります。 この div の中に、チャンネルリスト、チャンネルの会話、チャンネル設定のコンポーネントを配置します。

チャンネルリスト、チャンネル、チャンネルセッティングモジュールをインポートする。 以下、SBChannelList、SBConversation、SBChannelSettings と呼びます。

各コンポーネントを囲むようにdivを追加し、以下のclassNamesを使用することで、UIKitのデフォルトのスタイルをコンポーネントに適用させます。 各コンポーネントのclassNameは以下の通りです。

  1. について チャンネルリストで、divのclassNameは “sendbird-app__channellist-wrap” です。
  2. チャンネル会話について チャンネルの会話です。divのclassNameは “sendbird-app__conversation-wrap “です。
  3. については チャンネル の設定です。divのclassNameは “sendbird-app__settingspanel-wrap” です。

チャンネルリストコンポーネントでは、onChannelSelectプロパティを使って、チャンネルリストからクリックされているチャンネルを設定することにします。 チャンネル会話はchannelUrlを渡し、onChatHeaderActionClickを使用して、ユーザーが設定バーを開きたいときにリッスンできるようにします。 チャンネル設定には、channelUrlプロパティを渡し、onCloseClickを使用して、設定バー・ビューを閉じます。 どのように 見えるかは、以下のカスタマイズセクションのコード サンプルをご覧ください。

モバイルビュー

モバイルデバイスのビューには、チャンネルリストコンポーネントまたはチャンネルカンバセーションコンポーネントのいずれかが画面にレンダリングされます。 ユーザーがチャンネルリストにいて、会話にクリックすると、会話ウィンドウがレンダリングされます。 ユーザーが会話からチャンネルリストに移動するためにクリックした場合、チャンネルリストが画面にレンダリングされます。

モバイルビューでは、クラス名 “mobile-view__wrap” の div を返し、その中に、現在のチャンネルが設定されていない場合、チャンネルリストのコンポーネントを返すという条件を配置します。 そうでない場合は、チャンネルの会話ウィンドウと設定コンポーネントを返します。 設定コンポーネントは、ユーザーが会話ウィンドウのボタンをクリックして設定メニューを開く場合にのみレンダリングされます。

スタイルシートで、classNameが「mobile-view__wrap」で「sendbird-app__conversation-wrap」の要素の高さを100vhに設定して、ウィンドウ画面全体を占有するようにします。

各コンポーネントには、前回DesktopViewで使用したものと同じプロパティを利用します。 チャンネルリストには、disableAutoSelectと同様に、onChannelSelectプロパティを使用します。 disableAutoSelect プロパティは、チャンネルリストが自動的にリストの最初のチャンネルをレンダリングしないようにするために使用されます。

デスクトップ表示では、チャンネルリストとチャンネルカンバセーションを並べて表示します。 しかし、モバイルビューの場合は、チャンネルリストやチャンネルカンバセーションを見るだけなので、自動選択はオフにしておく必要があります。 disableAutoSelectを含めない場合、会話ウィンドウ内の最初のチャンネルが常にレンダリングされ、チャンネルリストに戻ることができなくなります。 そのため、会話ウィンドウで見たいチャンネルを選択し、チャンネルリストの表示から会話に切り替えるには、disableAutoSelectプロパティを使用します。

次に、SBConversationコンポーネントの上に、戻るボタンを追加したいと思います。 戻るボタンは、チャンネルの会話に表示され、私たちのチャンネルリストを表示するために戻って行くでしょう。 会話コンポーネントは、channelUrlを渡して、onChatHeaderActionClickを使用します。 onChatHeaderActionClickで、設定バーを開くかどうかが切り替わります。 SBChannelSettingsコンポーネントは、channelUrlプロパティとonCloseClickを使用して、設定メニューを閉じます。

カスタマイズ

Whatsappのようなスタイルのチャットにするためのカスタマイズを始めることができます。 DesktopViewとMobileViewの両方で、設定バーを隠す関数と設定バーをレンダリングする関数を作成します。

設定バーを隠すために、関数内でclassNameが「sendbird-app__conversation-wrap」の要素を取得し、その右マージンを0pxに設定します。 この機能は、SBChannelSettings の onCloseClick プロパティで起動されます。 設定バーを開くには、ChannelコンポーネントのonChatHeaderActionClickプロパティ内で、renderSettingsBarを呼び出し、className “sendbird-app__conversation-wrap” の要素を取得し、右マージンを318pxにセットします。

そこで、設定を開くと、会話ウィンドウのレイアウトが変更され、ページの右側にメニューが存在するためのスペースができます。 そして、設定メニューをクリックして閉じると、会話ウィンドウがそれまで設定バーがあった場所に展開されます。

設定メニューを表示させるために、ウィンドウビューに正しく配置するためのCSSを追加したいと思います。

ここから、CSSのカスタマイズを行い、設定メニューをどのように表示させるかを変更することができます。

これらの実装では、MobileViewはこれを返します。

そして、DesktopViewはこれを返します。

カラーセット

次に
カラーセット
プロパティを使用して、UIKitのテーマを構成する色を定義します。 ColorSetを定義したら、それをSendbirdProviderコンポーネントに渡すようにしなければなりません。

この例では、変数 –sendbird-light-primary-100 をライトグリーンに設定します。 この色は、チャンネルリストで、選択されたチャンネルの背景色、絵文字リアクションのコンテナの背景色、カレントユーザーが自分のメッセージを編集するときの背景色として適用されます。 この例では、送信メッセージに合わせた色を、より明るい緑色に変更することができます。

次に、-sendbird-light-primary-300を緑色になるように定義したいと思います。 この変数は、送信メッセージの背景色、チャンネルリストの新規チャンネル作成ボタン、チャンネル会話の設定アイコンや設定メニュー内のすべてのアイコンに使用されます。

次に、-sendbird-light-primary-400を少し暗めの緑色に設定します。 sendbird-light-primary-400 を使用する要素には、発信メッセージのホバー時の背景、自分のメッセージを編集する場合の保存ボタンのホバー時の背景、新しいチャンネルを作成する場合の作成ボタンのホバー時の背景が含まれます。

colorSet変数で重要なのは、-sendbird-light-background-50で、これは各コンポーネントの背景色として呼び出されるものです。 現在のデフォルトカラーは白です。 この変数を変更して背景色を一律にしたり、アプリケーション全体の背景色を白にするのではなく、CSSを実装して会話ウィンドウの背景色をライトベージュに変更することにします。 ぜひ、全文をご覧ください。
colorSet 変数のリスト
.

Appの機能は、現在このようになっているはずです。

チャンネルのカスタマイズ

仕上げに、CSSを追加します。 着信メッセージについては、ユーザー名の横にあるプロフィール画像のアイコンを削除したい。 ユーザーのプロフィール画像を削除したら、それに適用されている min-width スタイルを削除して、アバターがあった場所に空きスペースがないようにします。

チャンネルリストのカスタマイズ

チャンネルリストのヘッダーで、現在のユーザーのニックネームとIDを削除したいと思います。 この目標を達成するためにCSSを使用する代わりに、ChannelListのUIコンポーネントChannelListHeaderを使用して、デフォルトのレイアウトを上書きするために、あなた自身の特定のデザインをカスタマイズすることも可能です。

チャンネルプレビューコンポーネントでは、グループチャンネル名の横に表示されるメンバー数の表示を「なし」に設定します。 チャンネルプレビューのカスタムUIをデザインするもう一つの方法は、ChannelListのrenderChannelPreviewプロパティを利用することで、デフォルトのSendbirdヘッダーを独自のカスタムコンポーネントに置き換えることです。 コードをご覧になりたい方は
完全なCSSスタイルシート
!

デスクトップではこのような仕上がりになります。

デスクトップ用WhatsAppメッセンジャークローン

そして、モバイル端末ではこのように表示されます。

モバイル向けWhatsAppメッセンジャークローン

結論

おめでとうございます。 これで、ReactでWhatsAppメッセンジャーのクローンを作りました。 Sendbird UIKitのコアコンポーネントとモジュールで構成された、機能的なWhatsAppスタイルのメッセージング実装が完成しました。 ここから、アプリケーションのニーズに合わせて、必要な要素でチャット体験を構築することができるようになります。

こちらをご覧ください
GitHubリポジトリ
をクリックすると、これまで歩んできた道のりの概要をご覧いただけます。 詳しくは、こちらもご覧ください。
ドキュメント
を参照するか、豊富な
UIKitチュートリアル
をご覧ください。
開発者向けポータ
l. Sendbird UIKitに関するヘルプが必要な場合は、コミュニティフォーラムをご覧いただくか、弊社までお問い合わせください。. 私たちのエキスパートがいつでもお手伝いします

WhatsApp メッセンジャークローンの作成をお楽しみください!💻