目次
概要
Bubble開発のプロトタイピングにおいて、ユーザーの不満点や要望を吸い上げるためのチャット機能を用意しておくと非常に便利です。管理者と複数のユーザー間のチャット機能を作成し、さらにSlackと連携することで管理者側にチャットの受信通知がくるようにします。本記事ではワークフローの設定について解説します。
本テーマは３部構成となっています。
エレメントの設置についてはこちら：Bubble開発のプロトタイピングに便利！【その１】
BubbleとSlackの連携についてはこちら：Bubble開発のプロトタイピングに便利！【その２】
用意するアカウント
引き続き以下３つのアカウントを使用します。APIを使用するため、Bubbleは有料プランが必須です。（詳しくはこちらをご覧ください：Bubbleの料金は？）
- Integromat（https://www.integromat.com）
- Bubble（https://bubble.io）
作成手順
１．チャットメッセージの表示／非表示アニメーションの設定
チャットアイコンをクリックした時、チャットメッセージの表示／非表示を切り替えるアニメーションを設定します。
“チャットメッセージのグループ isn’t visible”を条件に設定します。
Element actions > Animateアクションを追加します。
各項目は以下の通り設定します。
- Element : チャットアイコンのグループを指定
- Animation: Callout Bounce
Element actions > Animateアクションを追加します。
各項目は以下の通り設定します。
- Element : チャットメッセージのグループを指定
- Animation : Transition FadeIn
Element Actions > Repeating Group > Scroll to entryアクションを追加します。
各項目は以下の通り設定します。
- Element : チャットメッセージを表示するRepeating Groupを指定
- Entry to scroll to : 指定したRepeating Groupの最後のアイテムを設定
これでチャットメッセージの表示アニメーションが設定できました。
続いて非表示アニメーションを設定します。
“チャットメッセージのグループ is visible”を条件に設定します。
Element actions > Animateアクションを追加します。
各項目は以下の通り設定します。
- Element : チャットアイコンのグループを指定
- Animation: Callout Bounce
Element actions > Animateアクションを追加します。
各項目は以下の通り設定します。
- Element : チャットメッセージのグループを指定
- Animation : Transition FadeOut
これでチャットメッセージの非表示アニメーションが設定できました。
２．ユーザー側のチャット送信ワークフロー
ユーザー側の「送信」ボタンをクリックした時のワークフローを設定します。
API Connectorプラグインに設定した”Message_to_slack”アクションから始めます。
各項目は以下の通りに設定します。
- (param.)body : MultilineInput A’s value
- (param.)email : Current User’s email
これでユーザーが送信ボタンを押すと、メッセージ内容とメールアドレスがSlackに通知されます。
“Create a new thing…”アクションを追加します。
各項目は以下の通りに設定します。
- Type : Chat
- Body : MultilineInput A’s value
“Make changes to thing…”アクションを追加します。
各項目は以下の通りに設定します。
- Thing to change : Current User
- Chat_list : add Result of step 2
これでチャットメッセージが新規作成され、ユーザーにリストデータとして保存されました。
入力をクリアするために”Reset inputs”アクションを追加します。
Element Actions > Repeating Group > Scroll to entryアクションを追加します。
各項目は以下の通りに設定します。
- Element : チャットメッセージを表示するRepeating Groupを指定
- Entry to scroll to : 指定したRepeating Groupの最後のアイテムを設定
これでユーザー側の送信ワークフローの設定は完了です。
３．管理者側のチャット送信ワークフロー
管理者側の「送信」ボタンをクリックした時のワークフローを設定します。
“Create a new thing…”アクションを追加します。
各項目は以下の通りに設定します。
- Type : Chat
- Body : MultilineInput A’s value
“Make changes to thing…”アクションを追加します。
各項目は以下の通りに設定します。
- Thing to change : Dropdown_user’s value
- Chat_list : add Result of step 1
これでチャットメッセージが新規作成され、送信先のユーザー側にリストデータとして保存されました。
入力をクリアするために”Reset inputs”アクションを追加します。
Element Actions > Repeating Group > Scroll to entryアクションを追加します。
各項目は以下の通りに設定します。
- Element : チャットメッセージを表示するRepeating Groupを指定
- Entry to scroll to : 指定したRepeating Groupの最後のアイテムを設定
これで管理者側の送信ワークフローの設定は完了です。
４．チャットテスト
チャットのテストをする前に、管理者とゲストユーザー、２つのアカウントの新規登録をして下さい。
Integromatのシナリオを始動しておきます。
デモユーザーでログインし、メッセージを送信します。
Slackに通知され、メッセージが表示されます。
管理者ユーザーでログインし、ドロップダウンからデモユーザーを選択します。
テストメッセージを送信します。
メッセージが表示されました。
まとめ
以上で、Slack通知機能つきのチャットが作成できました。本記事では受信通知にSlackを使用しましたが、Integromatでは、LINEやChatworkなどとの連携も可能です。開発チームの環境に合わせて通知先のツールは工夫してみて下さい。またチャット自体や通い内容もアレンジできますので、ライブチャットサポートの様なシステムを作っても良いかもしれません。
