スマホアプリ開発で需要の高い機能の一つ、チャット機能。人と人のコミュニケーションに会話は書かせません。BtoB、BtoCのマッチングアプリでもチャット機能があると便利です。今回は、Nocode（ノーコード）Adalo（アダロ）で、チャットアプリを作ってみようと思います！通常チャット機能は複雑ですが、Adaloだとかなり簡単に作成できます。ノーコードAdaloについてもっと知りたい方こちらもちろん、ノーコードですので、出来ることに制限があり、LINEやFacebook Messengerと比較すると機能面・性能面で足りない部分はあります。それでも、スタートアップには十分なことが多いです。機能不足を補ってあまりある、この手軽さ・スピード感。ありがたいですね。それでは、早速作成していきます！▼アプリ作成１.アプリの用意写真のような簡単なアプリを用意します。２.Home Screenの作成、Conversationデータベースの作成ⅰカスタムリストの配置、データベースの作成Home Screenにカスタムリストを配置し、リスト選択から、新たなデータベースコレクションを作成します。ここで作ったデータベースの名前を「Conversation」としておきます。ⅱConversationデータベースへのプロパティーの追加ADD PROPERTY→Relationships→Usersで「User」との関係を選択します。ここでは一番下のN：N、つまり、Userは複数のConversationを持てるし（に参加できるし）、Conversationも複数のUserを持てるという関係を作成します。再び、ADD PROPERTY→Relationships→Usersで「User」との関係を選択し、User：Conversationが、１：Nの関係を作成します。ここでは、Conversationルームの作成者のデータベースを作っています。ⅲConversationデータベース完成Createでデータベースを完成させます。ⅳConversation List のFilter選択Filterで、Logged in User > Conversation [Conversation Members]を選択することで、ログインユーザーが参加しているConversationルームのみを表示させるようにします。ⅴConversation Listの表示更新Subtitleを削除して、Imageコンポーネントを配置します。その後、配置したImageとTitleをリスト化し、それをUserのリストにして、そのリストのFilterでCurrent ConversationのConversation Membersを表示させるようにします。これにより、チャット相手の名前を表示させることができます。そして、ユーザーリストにログインユーザー（自分自身）が表示されないようにするため、CUSTOM FILTERにEmail is not equal to Logged User > Emailを追加します。また、先ほど作成したUser Listの体裁も、１つのデータベース（User）しか表示されないように、写真のように整えておきましょう。ここで、ユーザーがプロフィール写真を持てるようにするために、UsersにImageのNew Propertyとして、Profile Pictureを追加しておきます。Tittleをユーザーの名前（Full name）に、ImageをUserのプロフィール写真（Profile Picture）に変更しましょう。※後から気づいたのですが、この写真のマジックテキストを間違っておりました、、、正しくは、Current User > Full nameですね。動作確認の際に、気づきました。。Adaloでこんなことはよくあります。笑 気をつけます。笑３.Conversation Screenの作成、Messagesデータベースの作成ⅰConversation Screenへの遷移Home Screenで、任意の人（チャット相手）を選択した際に、その人とのConversation画面に遷移してほしいので、Conversation List に含まれているRectangleのアクション設定で、Link→New Screenにし、Conversation画面を作成していきます。New Screenの名前を、Conversationとし、Chatスクリーンを選択します。。ⅱMessagesデータベース作成,、Messageリスト設定スクリーン作成と共に出てきたリストに、会話内容を表示させたく、新たにMessagesデータベースを作成するために、リスト選択では、「New Collection」を選択します。ここで作られた新たなデータベースの名前を「Messages」としておきます。Conversationとのリレーション設定で、Conversation：Messagesが１：Nになるように設定をします。（１つのチャット部屋に、幾つものメッセージを持てるように設定をしています。）Userとのリレーション設定でも、User：Messagesが１：Nになるように設定をします。（一人のユーザーが、幾つものメッセージを持てるように設定しています。）Messagesデータベースを完成させます。Conversation画面において、Home画面で選択されたConversationのMessageのみを表示させるために、Messages ListのFilterで、Current Conversation > Messagesを選択します。Messagesリストに、Message Text を表示させるために、リスト内のテキストをマジックテキストで置き換えます。また、メッセージの下にメッセージを送った人の名前を表示させるために、こちらもマジックテキストで置き換えていきます。一応、メッセージが送信された（作成された）時間も表示させておきます。ⅲメッセージ送信ボタン周りのアクション設定まず、送信ボタンがタップされた際に、メッセージが送信される（作成される）ようにしたいため、Send iconのアクション設定で、Create > Meesageを選択します。Creat Messases Actionの詳細は以下の通りで、特に問題ないかと思います。4.Start New Conversation Screen（新たにチャットを開始するための画面）の作成ⅰStart New Conversation Screenへの画面遷移Home ScreenにAction Buttonを配置し、アクション設定で、New Screenに遷移するように設定します。スクリーンの名前を「Start New Conversation Screen」とし、List Searchを選択して、スクリーン画面を作成します。ⅱStart New Conversation Screen内の、検索ボックス、リスト作成まず、Start New Conversation ScreenにもともとあったSimple Listを削除します。写真のように、Text inputとCustom Listを配置します。Text inputは検索機能のために、Custom Listはユーザーリストの表示のために配置します。Text inputの名称を、わかりやすいように、InputからSearch termに変更しておきましょう。※追記なのですが、Start New Conversation Screen内に、不必要なAction Buttonが残ったままですね、、完全に消し忘れています。笑 これ以降、このAction Buttonボタンはないものだと思って記事を読み進めてください、、申し訳ないです、、そして、先ほど配置したCustom Listには、Userを表示させて、Filter設定としては、以下のようにします。一つ目のFilterは、自分自身を表示させないように、二つ目Filterは、検索ボックス（Search term）に入力された文字を含むユーザーを表示するためのものです。ここで、FilterのANDとORの違いについてですが、ANDはAかつB、ORはAまたはBということを意味しています。ここでは、表示さたいユーザーとして、「自分自身ではない、かつ、検索ボックスに入力された文字をFull nameに含むユーザーなので、AND Filterを使用します。配置したCustom List（User List）を整えていきます。Subtitleを削除し、TitleをCurrent UserのFull nameに変更、Imageコンポーネントを配置して、Current UserのProfile Pictureが表示されるように設定します。ⅲConversation Screenへの遷移、それに伴うアクション設定まず、写真の3つのコンポーネントをグループ化します。グループ化した後に、そのグループで以下のアクション設定をします。１つ目のアクション任意のユーザーがタップされた際に、ログインユーザーとそのユーザーとのConversationルームが作られるようにしたいので、Create Conversationのアクション設定をします。アクション設定の詳細は、写真の通りで、Nameに関しては、これが絶対ではありませんが、わかりやすいようにLogged in UserのFull nameと、Current UserのFull nameがデータベースに記録されるように設定しています。２つ目、３つ目のアクション先ほどのCreate処理で、Conversation Memberに、Current UserとLogged In Userを追加したいところですが、一気にCreate処理で行うことは不可能で、かつ、Update処理ででも一気に行うことが不可能なので、２つのUpdate処理を使用して、Conversation Memberに、Current UserとLogged In Userを追加します。４つ目のアクションLinkのアクションを使用して、Conversation画面に遷移するように設定します。ここで、Conversation Screenの微調整ですが、Conversations ScreenのLeft IconでHome Screenに戻れるようにしておきましょう。５.Home ScreenのNew Icon（新着メッセージが届いた際に表示されるIcon）の表示設定ⅰIconの配置Home ScreenのListの中に、New Iconを配置します。ここで、Iconを、Conversation Listの方に追加するようにしましょう。ⅱデータベースコレクションに、Read Statusesを追加、設定このRead Statusesは新着メッセージが届いた際に、New Iconを表示させるためのデータベースになります。ADD COLlECTIONでRead Statusesを追加します。Userとのリレーション設定で、User：Read Statusesを１：Nに設定します。Conversationとのリレーション設定で、Conversation：Read Statusesを１：Nに設定します。ここで、Conversationデータベースに、New Propertyとして、Date & Timeを追加しておきます。ⅲRead Statusesに関したアクション設定まず、Conversation Screenにユーザーが訪れた際に、Read Statusesのデータベースを作成されるようにするために、Conversation Screenのアクション設定で、Create Read Statusを選択します。Createアクションの詳細は以下の通りです。Nameに関しては、気にしなくて大丈夫です。そして、メッセージが送信された際にも、Read Statusesのデータベースが作成されるようにするため、Send IconでCreate Read Statusesの設定をしていきます。こちらのCreateアクションの詳細は以下の通りです。Nameに関しては、こちらも気にしなくて大丈夫です。最後に、先ほど追加したDate & Time（Last Message Sent Date）に関するアクション設定です。メッセージが送信されたタイミングで、Update処理で、そのDate & TimeがCurrent timeに更新されるように設定します。Update処理の詳細に関しては、以下の通りです。ⅳIconのVisibility設定結論から言うと、以下の写真のような設定になるのですが、なぜこのようになるのかということを説明していきます。簡単にいうと、Conversationルームの最終更新日時であるLast Message Sent Dateより、新しいRead Statusesがない（Current Conversation > Read Statuses > Count is equal to 0）場合に、New Iconを表示させるという仕組みになっております。ここが今回の記事で最も理解するのに難易度が高い点かもしれないです。▼動作確認まず、Userとして、test1とtest2を用意します。test1でログインをし、Conversationルームを作っていきます。test2をタップします。すると、test2とのConversationルームが作られるので、試しにメッセージを送ってみます。送信！！うまく反映されましたね！これで、ひとまずBackボタンで戻ります。test2とのConversationルームができていますね。次に、test2でログインします。test1からのメッセージが届いていますね！New Iconもしっかり表示されています！Conversationルームを見てみましょう。test1からのメッセージが届いていますね。Backボタンで戻ってみましょう。メッセージ既読後は、New Iconも消えていますね！これで、実装は成功です！▼まとめ今回は、チャットアプリの作成方法を１から記事にしてみました。少し複雑なところもあったかと思いますが、Adaloを使用すれば、こんなに簡単にチャットアプリも作成できちゃいます。今回作成したチャットアプリをベースに、自己流にアレンジすることもできそうですね！是非、こちらの方法を参考に、オリジナルのチャットアプリを作ってみてください。最後まで、ご覧いただきありがとうございました。ノーコードAdaloについてもっと知りたい方こちらアプリ開発会社の選び方について知りたい方はこちらAdaloでZapierとの連携についての記事はこちら