【Bubble】チャットリストに最後に送られたメッセージと送信日を載せる方法

こんにちは!EPICs合同会社です!

今回はノーコードツールBubbleを使用してチャットリストに最終の送信メッセージとそのメッセージの送信日を表示させる方法を解説していきます!

なお今回はすでにチャットの作り方自体は知っている前提で解説をしますので、

まだチャットの作り方を知らないという方は、こちらでチャットの作り方を先にご覧いただければと思います!

動画解説バージョンはこちら!

目次
無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

  • ノーコード開発会社の選び方
  • EPICsのノーコード受託開発の特徴
  • 支援実績・事例集

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    実装イメージ

    実装手順

    以下の手順で実装します。

    1. データベースの準備
    2. チャットリストのヘッダー作成
    3. チャットリストの表示部作成
    4. 最終メッセージと送信日の表示設定

    データベースの準備

    今回の実装にあたり「User」「Chat」「Message」というデータを作成します。

    それぞれの内包データについては下記を参照ください!

    ◇Userデータ

    Field nameField type
    Usernametext
    iconimage

    ◇Chatデータ

    Field nameField type
    UserUser
    MessageList of Message
    last send datedate

    ◇Messageデータ

    Field nameField type
    TextText
    chatchat
    datedate

    チャットリストのヘッダー作成

    今回は最上部にヘッダーを設け、その下にチャットリストを表示するRepeating Groupを配置。

    Repeating Groupには「アイコン」「ユーザー名」「最終メッセージ」「最終メッセージの送信日」を載せようと思います。

    デザインは下記の設定で行いました!

    デザインは自由に行っていただいて大丈夫ですが、ご参照いただければと思います!

    ◇ヘッダーの設定

    まずは最上部にGroupを配置します。Groupは下記のように設定しました!

    次にGroupの中にテキストを入れます。設定は下記です。

    チャットリストの表示部作成

    チャットリストの表示部の作成にあたりチャットでメッセージを送信した際にどのような設定をしているかを共有します。

    特段変わった作り方はしていませんが、送信ボタンを押した際は下記のようにメッセージデータを作成しています。

    それではチャットリスト部の作成に移れればと思いますが、こちらが全体の構成です!

    それではまず画面中央にRepeating Groupを配置しましょう!

    Repeating Groupの設定はこのように行いました!

    このRepeating GroupのさらにGroupを入れましょう!

    Groupの設定はこちらです!

    このGroupの中ににicon用のimageとユーザー名、最終メッセージ、送信日をそれぞれを載せるためのテキストを入れていきます。

    Group自体は「Row」で設定していますが、「ユーザー名」と「最終メッセージ」は縦に並べたいので、この2つを指定して「Group element in」→「Column container」でGroup化します。

    後はぞれぞれの要素のサイズを整え、表示データの設定をしましょう!

    まずはiconとユーザー名の表示設定です。こちらはチャット機能作り方でも解説しているので、簡単にだけ紹介をします。

    最終メッセージと送信日の表示設定

    それでは最後にチャットリストに最終メッセージと送信日が表示される設定方法をお伝えします。

    ◇最終メッセージの表示設定

    Textを選択したら下記のように設定しましょう!

    これが該当のチャットルームに送られた最後のメッセージを表示する。という設定になります。

    ◇最終メッセージの送付日の表示設定

    最後のメッセージが送付された日にちを表示させるには下記の2つのパターンがあります!

    一つ目はシンプルに「Creation date」を使うもので、2つ目「last send date」を使用するものです。

    どちらでも実装は可能ですが、「Creation date」はあまり使いたくないという方もいると思うので、2つ紹介します!

    ~「Creation date」を使用するパターン~

    最後の「formatted as」は日付の表示形式を整えるために入れているものになります。

    ~「last send date」を使用するパターン~

    「last send date」を使用するパターンの場合はメッセージ送付時点で一つ設定を足す必要があります。

    先ほども記載した内容になりますが、メッセージの送付は下記のようなWork flowで行えます。

    加えてStep2で「last send date」に日付を登録するアクションを加えましょう!

    このWork flowにによって最後に送られたメッセージの送信日が「last send date」からも持ってこれるようになります。

    上記の設定ができたらメッセージ送信日を表示させたいTextを選択し、下記のように設定しましょう!

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    ノーコード開発ツールを使ったアプリ・システム開発にお困りですか?
    1からの開発も、途中からの開発も、お気軽にEPICsにご相談ください!
    この記事を書いた人
    EPICs株式会社 編集部
    創業よりBubble、Adaloなどノーコードに特化したアプリ・システムの受託開発事業を展開するノーコードのプロフェッショナル集団です。
    目次