こんにちは！EPICs合同会社です。
今回はノーコードツール「Adalo」を使用して開発したチャットで既読機能を実装する方法について解説していきます！
※チャット自体はできている体で進めていきますので、まだチャットの作り方を知らない方はこちらをご覧ください！
動画解説バージョンはこちら！
実装イメージ
実装手順
以下の手順で実装します。
- データベースの用意
- 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」を指定して以上です。
全体としてはこのようになります！
これで設定は以上です！
いかがでしたでしょうか？
きっと実装イメージのように既読/未読の識別がされているかと思います。
本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。
