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

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

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

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

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

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

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

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

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

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

①日本最大級の開発実績
②最安30万円。通常の1/10~の低コスト開発
③最短2週間。圧倒的な開発スピード
④高難易度の開発もスムーズ
⑤複数のノーコードツールに対応

EPICsは上記5つの強みを武器に受託開発を行っています。
まずはご相談ください。

実装イメージ

実装手順

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

  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

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

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