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

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

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

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

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

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

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

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

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

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

  • 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を選択し、下記のように設定しましょう!

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

ノーコード開発サービスのご案内

日本最大級のノーコード開発実績

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

    氏名

    法人名

    メールアドレス

    電話番号

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

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    目次