こんにちは！ノーコードツールに特化した開発をしております。
EPICs合同会社です！
今回はアプリ開発時に最も実装をする機会が多いといっても過言ではない「チャット機能の作り方」をAdaloを使用して解説していきます！
動画解説バージョンはこちら！
実装イメージ
実装手順
以下の手順で実装します。
- データベースの準備
- チャットを開くアクション設定
- チャットリストの作成
- フッターの作成
- チャット画面の作成
- 送信機能の作成
データベースの準備
まずはデータベースの用意をしましょう！
今回は３つの「Collection」を作成します！
必要なCollectionは「User」「Chat」「Message」の３つです。
それぞれのCollectionの中には下記の画像のように「PROPERTY」を用意してください。
Userデータ
※「Sex」と「icon」はチャット機能においては必須ではないので、お好みで追加をしてみてください！
| データ名 | データ型 |
|---|---|
| Username | Text |
| Chats | Chat-Relation(N:N) |
| Message | Message-Relation(N:1) ※Userが1に対してメッセージは複数 |
| Text | |
| Sex | Sex-Relation(1:N)※Sexが1に対してユーザーは複数 |
| icon | image |
Chatデータ
| データ名 | データ型 |
|---|---|
| Chat name | Text |
| Member | User-Relation(N:N) |
| Message | Message-Relation(N:1) ※Chatが1に対してメッセージは複数 |
| Last Message | text |
| Last Message Send date | Date&Time |
Messageデータ
| データ名 | データ型 |
|---|---|
| Message | Text |
| Send date | Date&Time |
| Chat | Chat-Relation(1:N)※Chatが1に対してメッセージは複数 |
| Sender | User-Relation(N:N) |
チャットを開くアクション設定
チャット機能を作るためには、チャットが作られるアクションを設定する必要があります。
今回は簡易的ですが、ListにUserを表示させ、Userをクリックしたら該当ユーザーとのチャットが作られるという仕様にします。
そのため、チャットを開くアクションを起こさせたいページを選択し「Custom List」を配置しましょう。
「Custom List」の設定はこちらです。
「Custom List」の設定
この「Custom List」にChatが作成される「Action」を加えましょう！
「ADD Action」をクリックし、６つのアクションを設定します。
ADD Actionの設定
それぞれの中身の設定も解説します。
１段目ののCreate
これは新たに該当ユーザー同士でのChatを作成するための設定です。
今回はChatのヘッダーに各ユーザーのUsernameを表示させる予定なので、「Chat name」にそれぞれのUserのUsernameを加えています。
２段目のUpdate-User
これは「Current User」の「Chat」に新しくできたチャットを追加する設定です。
３段目のUpdate-User
今度は「Logged in User」にも新しくできたChatを追加します。
4.5段目のUpdate-Chat
これは「Chat」データ内の「Member」に各ユーザーを加える設定です。
６段目のLink
最後にChat作成後に実際にチャットが行われるページに遷移するためのアクションをせってしましょう！
ここまでで「Custom List」の設定は以上です。
次にListの中に「icon」「Usename」「Sex」を載せるための「image」と「text」を置きましょう。
各設定はこちらです！
icon設定
Username設定
Sex設定
「Sex」のデータベースにはtext型で「Name」というPROPERTYを入れており、事前に「男性」「女性」「その他」という選択肢を登録しています。
チャットリストの作成
次にすでに作成済みのチャットルームが表示されるページを作ります。
今回は下記の画像のように、「icon」「Username」「Last Message（最後に発信されたメッセージ）」「Send date（最終メッセージが送信された日）」が表示されるようにします。
ここで一点注意点としては、チャットリストを作成する際はいくつものListを重ねて作るので、しっかりとList同士が「Component」に入っているか確認しましょう！
３つの「Custom List」を重ねていくのですが、下から「List Chat」「List User」「List Message」の順で重ねていきます！
それぞれのListの設定はこちらです。
List Chatの設定
List Userの設定
「List User」には「icon」を載せるためのimageと「Username」「Last Message（最後に発信されたメッセージ）」と「Send date（最終メッセージが送信された日）」を表示させるための「componet」を配置します。
下記にてそれぞれのcomponentを設定も記載をします！
フッターの作成
ここまでの実装ができたら、「チャットを作成するページ」「チャットリスト」のページが行き来ができるようフッターを作成しましょう！
「Rectangle」をページの最下部において「icon」をその上に設置し、「Rectangle」と「icon」を「Group化」しましょう。
次に「Group」を指定して表示場所を「Buttom」に指定します。
ここまで出来たら各アイコンに「Link」で遷移アクションを入れましょう。
チャット画面の作成
実際にチャットを行うページを作成していきます。
まずはヘッダーを作成します。
ヘッダー作成
ヘッダーは簡単にだけ説明します。
今回は「Rectangle」を配置し、テキストをアイコンを配置しています。
テキストには「Chat name」を表示。アイコンには「Link backを入れています。
メッセージ表示部の作成
まずは「Custom List」を配置し、下記のように設定します。
List内に「Rectangle」を配置し、その中に「Text」を入れ、「Group化」をしましょう。
次に「Group」「Text」「Rectangle」の設定を変えていきます。
◇相手側のメッセージ表示部
「Group」の設定
「Rectangle」の設定
「Text」の設定
◇自分のメッセージ表示部
自分側のメッセージの表示設定は「Group」の設定のみ変えればOKです！
識別をつきやすくしたい場合には、「Retangle」の背景色を変えるのもおすすめです。
「Group」の設定
「Rectangle」の設定
送信機能の作成
最後にメッセージの送信機能を作りましょう。
ページの最下部に「Retangle」を配置し、その中に「input」と送信ボタンの機能を果たす「icon」をいれ「Group化」します。
そうしたらGroupの表示位置を「Buttom」にしましょう。
次に「input」の設定をします。
「input」は「Multi-line」にチェックを入れましょう。ここにチェックを入れることで２行以上のメッセージの入力ができるようになります。
最後に送信ボタン(icon)の設定です！
ここには２つの「ADD Action」を入れます。
Create Messageの設定
Update Chatの設定
これですべての設定が完了です！
長丁場お疲れ様でした！
こちらで実装イメージ動画のようなチャットが実装できているかと思います。
今回の記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。
