【Bubble】シンプルなチャット機能の作り方!!

こんにちは!ノーコード特化で開発を行っております。EPICs合同会社です!

記事をご覧いただきありがとうございます!

今回はノーコードツール「Bubble」を使用したシンプルなチャット機能の作り方を解説していきます!

チャット機能はアプリ開発の中でも超頻出機能の一つだと思いますので、ぜひ作り方を学んでいっていただければと思います!

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

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

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

目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

 無料で相談する →

実装イメージ

実装手順

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

  1. チャット機能に必要なデータベースの準備
  2. チャットリストの作成-ヘッダー
  3. チャットリスト表示用のRepeating Group、icon、テキスト配置
  4. チャット画面の作成-ヘッダー
  5. Repeating Groupとメッセージ表示用テキストの配置
  6. メッセージ入力用inputと送信ボタンの作成
  7. メッセージを送信するWork flowの追加

チャット機能に必要なデータベースの準備

まずはチャット機能を作りにあたって必要なデータベースの設定をしていきます。

Datatypeは「User」「Chat」「Message」を用意し、それぞれのデータの中身は下記の画像のように設定してください!

チャットリストの作成-ヘッダー

チャットリストページのヘッダーを作成するために画面最上部にGroupとテキストを配置します。

それぞれの設定は下記です。

・チャットリスト ヘッダー部のGroup設定

・チャットリスト ヘッダー部のGroup設定

チャットリスト表示用のRepeating Group、icon、テキスト配置

作成されているチャットを表示するためのRepeating Groupとチャット相手を表示するためのテキスト、imageを配置します。

今回はチャットルームの作り方をメインで解説したいので、チャットリストにはシンプルに相手の名前とアイコンだけが表示されるようにします。

まずはRepeating Groupを配置し、下記のように設定しましょう。

・チャットリスト表示部のRepeating Group設定

次にRepeating Group内にiconとtextを配置するためのGroupを置き、下記のように設定します。

・チャットリスト表示部のGroup設定

上記で設定したGroupの中にimageとTextをいれて、下記の画像のように設定しましょう!

・icon用imageの設定

チャットリスト表示部のText設定

ここまで出来たらデータベースにチャットのデータを作成して、チャットリストが表示されるか確認してみましょう!

※今回は「小林」「吉田」というユーザーを作成し、このユーザー間でチャットのデータを作り、小林のユーザーデータで「Run as→」をしてチャットリストのページを開きました。

正しく設定ができていれば下記のような画面になると思います!

チャットリスト画面の最後の工程として、iconやテキストを入れているGroupにWork flowを組みましょう!

Groupを指定しWork flowを開いたら、

「Destination」をチャットをするページに指定し「Data to send」は「Current cell’s Chat」を選択します。

これでチャットリストの設定は以上です!

チャット画面の作成-ヘッダー

チャットリスト同様でチャットの画面にもヘッダーを配置しましょう。

今回はチャット相手の名前がヘッダーに表示されるように設定します。

基本的なGroupのサイズなどはチャットリストのヘッダーと同様で大丈夫です!

Groupとテキストの設定は下記のように設定しましょう!

・Chat ヘッダー部のGroupの設定

・Chat ヘッダー部のGroupの設定

Repeating Groupとメッセージ表示用テキストの配置

まずは画面全体ににメッセージを表示させるためのRepeating Groupを配置します。

その後自分が発信したメッセージを表示させるためのテキストと相手から発されたメッセージを表示させるためのテキストをそれぞれ配置します。

配置ができたらそれぞれの要素の設定を追加していきます。

今回はそれぞれの要素を下記の設定で配置しています。

・Chat内のRepeating Groupの設定

・Chat内のText設定(相手から発信)

・Chat内のText設定(自分から発信)

自分から発信したメッセージも基本レイアウトは同じで大丈夫です!

変えるべきポイントとしては、「Conditional」とBack ground colorを変えることで、メッセージの識別ができるようにしましょう!

ここまで設定ができていれば、下記のようなチャット画面ができていると思います!

メッセージ入力用inputと送信ボタンの作成

最後に送付するメッセージの入力欄と送信ボタンをつくっていきます。

メッセージの入力欄は最下部に固定で表示をさせたいので「Floating Group」を使いましょう!

「Floating Group」は下記の設定で配置します。

・チャットページのFloating Groupの設定

Floating Groupの設置ができたら、Floating Group内にメッセージの入力用の「input」と送信ボタン用の「icon」を入れます。

・Floating Group内のinput設定

・Floating Group内のicon(送信ボタン)設定

ここまでの設定ができていたら下記のような画面になっているかと思います。

これでチャット画面に必要な要素の配置は出来たので、最後に送信ボタンを押した際のWork flowを入れていきましょう!

メッセージを送信するWork flowの追加

今回は送信ボタンのiconを押した際にinputに入力したテキストがメッセージをして送付できるようにしたいので、

送信ボタンにWork flowを追加していきます。

メッセージを作成するアクションを設定したいので「Data」→「Create a new thing」を選択し、次のページでは画像のように設定をしましょう。

上記の設定のみでもメッセージの送信は可能ですが、その場合送信したメッセージがinput内に表示されつづけてしまいます。それでは少し不格好なので、Step2で「Element aAction」→「Reset inputs」を設定しましょう!

このワークフローを追加することでメッセージを送信後自動でinputがリセットされるようになります。

以上でチャット機能の開発は完了です!

最後に作成したチャットを開いて検証してみましょう!
※チャットリストでチャット相手を選択するところから検証することをお勧めします。

いかがでしたでしょうか?無事メッセージの送受信ができるようになっているかと思います。

今回は少し長丁場でしたが最後までご覧いただきありがとうございます!!

本記事が少しでも皆様の開発力の向上や開発を検討している方のお力になれておりましたら幸いです。

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

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

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

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

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

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

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

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

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