こんにちは！EPICs株式会社です。
今回はノーコードツール「Adalo」を使用して開発したチャットで既読機能を実装する方法について解説していきます！
※チャット自体はできている体で進めていきますので、まだチャットの作り方を知らない方はこちらをご覧ください！
動画解説バージョンはこちら！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
実装手順
以下の手順で実装します。
- データベースの用意
- Chatを開いた際とメッセージを送信時にReadのデータ設定
- メッセージ送信時のCurrent Date&Timeの取得
- 未読時に表示する要素の設定
データベースの用意
今回のチャットの作成あたりCOLLECTIONは以下の4つを使用しています！
| COLLECTION名 | 使用用途 |
|---|---|
| User | チャットを行うユーザー |
| Chat | 作成されたチャット |
| Message | チャット内に送受信されるメッセージ |
| Read | 既読管理をするもの |
それぞれのCOLLECTION内のPROPERTYはこのようになります！
既読機能に関しては特にCOLLECTIONの「Read」とReadとRelationを組んでいるデータをよく使用します！
Userデータ
| PROPERTY名 | データ型 |
|---|---|
| User name | Text |
| Text | |
| Chats | Relation(N:N) |
| Message | Relation(1：N※Userが１) |
| Reads | Relation(1：N※Userが１) |
Chatデータ
| PROPERTY名 | データ型 |
|---|---|
| Chat name | Text |
| Last Message | Text |
| Last Message date | Date&Time |
| Member | Relation(N:N)-UserとのRelation |
| Message | Relation(1：N※Chatが１) |
| Reads | Relation(1：N※Chatが１) |
Messageデータ
| PROPERTY名 | データ型 |
|---|---|
| Message | Text |
| Chat | Relation(1：N※Chatが１) |
| Sender | Relation(1：N※Chatが１)-UserとのRelation |
Readデータ
| PROPERTY名 | データ型 |
|---|---|
| Name | Text |
| User | Relation(N：1※Chatが１) |
| Chat | Relation(N：1※Chatが１) |
Chatを開いた際とメッセージを送信時にReadのデータ設定
Chatを開いた際の設定
Chatを開いた際に、「Read」のデータが作成されるようにします！
「User」→「Logged in User」
「Chat」→「Current Chat」
を指定します。
メッセージを送信時の設定
同様にメッセージ送信時も「Read」が作成されるようにします。
こちらも同じく下記の設定で大丈夫です！
「User」→「Logged in User」
「Chat」→「Current Chat」
メッセージ送信時のCurrent Date&Timeの取得
続けてメッセージの送信時に「Chat」データの「Last Message date」を「Update」します。
内容としては「Last Message date」で「Current Time」を取得しましょう。
未読時に表示する要素の設定
最後に未読時に表示させる要素の設定をしていきます。
今回は未読時にはチャットリストに緑色のマークを表示させることにします。
緑色のShapeとカウント表示用のテキストをGroup化して、ここにVisible設定をしていきます。
続いて、Visibleの設定を追加していきましょう！
「will be visible if」は下記のように設定しましょう！
「Current chat」→「Read」→「Count」
次に「ADD Custom Filter」で2つ設定を追加します！
※画像右側の文字が隠れている部分は「Current Chat」>「Last Message date」を指定しています。
最後に「Is equal to」→「0」を指定して以上です。
全体としてはこのようになります！
これで設定は以上です！
いかがでしたでしょうか？
きっと実装イメージのように既読/未読の識別がされているかと思います。
本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。
