【中級者向け】Bubble開発のプロトタイピングに便利！チャット作成方法とSlackへの自動通知【その１】｜ノーコード開発ナレッジ【Bubble/Integromat】

概要

Bubble開発のプロトタイピングにおいて、ユーザーの不満点や要望を吸い上げるためのチャット機能を用意しておくと非常に便利です。管理者と複数のユーザー間のチャット機能を作成し、さらにSlackと連携することで管理者側にチャットの受信通知がくるようにします。本記事では、Bubbleでのエレメント設置について解説します。

用意するアカウント

以下３つのアカウントを用意して下さい。APIを使用するため、Bubbleは有料プランが必須です。（詳しくはこちらをご覧ください：Bubbleの料金は？）

作成手順

１．データベースの設計

以下のData typeとData fieldを作成します。

Data type: Chat

Fields:

Body

Data type: User

Fields:

Chat_list

２．エレメントの配置（ユーザー側）

ユーザー側のチャット画面を作成します。

ページを新規追加し、任意の名称を指定します（本記事では、”Chat_to_slack”）。

グループ（任意の名称、以後”User_Chat”）を設置します。設定はデフォルトのままで大丈夫です（画像では見やすくするため背景色を変更しています）。

User_Chatグループ内にアイコンを置くためのグループ（以後、”Chat_icon”）を設置します。

こちらはBorderをSolid、Roundnessは50に設定します。

Chat_iconグループにアイコンを設置します。

User_Chatグループ内に、メッセージを表示するためのグループ（”Chat_message”）を設置し、以下の通りに変更します。

This element is visible on page load: チェックを外す。ページロード時に表示されなくなります。
Collapse this element’s height when hidden: チェックする。非表示の時、高さが０として扱われます

Chat_messageグループ内にメッセージ本文を表示するためのリピーティンググループ（”RG_message”）を設置し、以下の通りに変更します。

Type of content: Chat
Data source: Current User’s Chat_list: sorted by Created Date
Sort by: Creation Date
Descending: no

Chat_messageグループ内にメッセージを送信するためのインプット（”Multiline_body”）とボタン(“Button_body”)を設置します。各設定はデフォルトのままで大丈夫です。

RG_message内にテキストエレメントを２つ設置します。

管理者側からのメッセージ（”Body_admin”）を設置し、以下の通りに変更します。

本文：Current cell’s Chat’s Body
Conditional: Current cellデータの作成者がCurrent Userではない（＝管理者が作成したチャットの）時、テキストを表示する条件を設定します。
This element is visible on page load: チェックを外す

ユーザーからのメッセージ（”Body_User”）を設置し、以下の通りに変更します。

本文：Current cell’s Chat’s Body
Conditional: Current cellデータの作成者がCurrent Userの時、テキストを表示する条件を設定します
This element is visible on page load: チェックを外す

これでユーザー側のエレメントの配置は完了です。

３．エレメントの配置（管理者側）

続いて、管理者側のチャット画面を作成します。

“Chat_to_slack”ページ（ユーザー側のチャット画面を作成したページ）をページをクローンし、任意の名称を入力します（本記事では、”admin_chat”）。

“Chat_icon”グループを消去します。

“Chat_message”グループの”This element is visible on page load”にチェックを入れ、ページロード時に見れるようにします。

チャット相手のユーザーを検索するドロップダウン（”Dropdown_user”）を設置し、以下の通りに変更します。

Choice style: Dynamic choices
Type of choices: user
Choices source: Search for Usersでユーザー全てを指定します。
Option caption: Current option’s emailで各ユーザーのメールアドレスを表示します。名前のデータフィールドなどがあれば、そちらでも良いです。