日本発ノーコードアプリ開発ツール『Click』

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

概要

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

用意するアカウント

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

作成手順

1.データベースの設計

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

Data type: Chat

Fields:

  • Body

 

Data type: User

Fields:

  • Chat_list

2.エレメントの配置(ユーザー側)

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

ページを新規追加し、任意の名称を指定します(本記事では、”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: チェックする。非表示の時、高さが0として扱われます

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内にテキストエレメントを2つ設置します。

管理者側からのメッセージ(”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: チェックを外す

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

3.エレメントの配置(管理者側)

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

“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で各ユーザーのメールアドレスを表示します。名前のデータフィールドなどがあれば、そちらでも良いです。

RG_messageのData sourceを以下の通りに変更します。

Body_adminは管理者側のチャットでは、ユーザーのメッセージを表示するテキストになるので、名称を”Body_user”に変更し、表示条件も以下の通りに変更します。

 

同様にBody_userは、名称を”Body_admin”に変更し、表示条件も以下の通りに変更します。

 

これでユーザー側、管理者側どちらもエレメントの配置が完了しました。

まとめ

本記事では、Bubbleでのエレメントの設置を解説しました。次の記事では、チャットの受信をslackに通知するための連携方法を解説します(こちらをご覧ください:Bubble開発のプロトタイピングに便利!【その2】