BubbleでLINE風チャットアプリ作成方法解説【おまけ】 ～新レスポンシブ対応～

こんにちは！

WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。

2021年10月よりフリーランスになりました！

そしてそして、2021年3月より日本最大のノーコードコミュニティ【NoCodeCamp】のコミュニティマネージャーとなりました。

イベントの企画・運営を行っており、「朝からBubbleでじょん」という朝活イベントを毎朝5:00～6:00開催しております。

masahide（筆者）

盆正月関係なく365日開催していく予定です！

NoCodeCamp詳細は以下のリンクより確認することができます。

NoCodeCamp公式HP

それではさっそくLINE風アプリ「LOIN」を作っていきましょう。

便利機能追加

前回までのブログで一通りのチャット機能は実装することができましたが、チャットが自動スクロールしなかったり、既読機能が付いていません。

今回は、このあたりの機能追加をしていきます。

リロードをトリガーとした既読機能は実装できたので、次はリロードなしでそのページいた場合既読つく方法を考えますー pic.twitter.com/gyBPH3mFVr

— じょん (@john01tgmck) March 29, 2022

個別Room作成機能追加

masahide（筆者）

この機能は単に忘れていました。申し訳ないです。

indexページにユーザー一覧が表示されていますが、現在クリックできないと思います。

クリックと同時に2人用のRoomを作成し、もうすでに作成してる場合はチャットページに遷移できるような機能を追加します。

Group Usershowから[Start/Edit workflow]をクリック

Click here to add an action...からData(Things) -> Create a new thing...を選択

Step 1

Step 2

Navigation -> Go to page...

Step 3

Navigation -> Go to page...

これで個別Roomを作成する機能が実装できました。

Previewにて確認してみましょう。

User一覧ページ（index)からラスカールさんを選択

chatページに遷移するので、何か一言入力します。

その後、左上のangle-leftアイコンをクリックしてRoom一覧ページに戻ります。

ラスカールさんとのトークルームが作成され、最新のメッセージが表示されています。

ただ、トークルームから友達選択ページに遷移できないので、リンクを追加しておきます。

talk_roomページのIcon fa-commenting-oを選択し、Start/Edit workflow

Navigation -> Go to page... Destination = indexとしておきます。

これでトークルームから友達選択ページに遷移できるようになりました。

メッセージ自動スクロール

masahide（筆者）

伝われ！脳内イメージ！

実際に機能追加してみましょう。

キーとなるCustomStateを作成

RepeatingGroup chatの右上にある（i）マークをクリック -> Add a new custom state

WorkFlowに移動

When

Click here to add an event... -> Elements -> Do when condition is true

Step 1

Element Actions -> Repeating Group -> Scroll to entry

Step 2

Ellement Actions -> All elements -> Set state

Step 3

CustomState更新後にスクロールされるように、Step 1の内容をコピーしてStep3とします。

では、Previewから動かしてみましょう。

下にグイっと動いてしまいました・・・。

このような動きは想定していないので、力技ですが、条件を追加します。

WorkFlowから先ほどのDo when RepeatingGroup...を選択し、Onlywhen条件にメッセージが7以上の場合を追記します。

メッセージ件数が7以下の場合

メッセージ件数が7以上の場合

RepeatingGroupの高さが固定されているので、このような条件で実装できました。

ご自身のグループのHeightとRepeatingGroupのHeightによって条件のメッセージ件数が変わってくるので、注意して下さい。

RepeatingGroupのスクロールバー削除

RepeatingGroupのスクロールバーは何かと邪魔になるので、CSSを当てて、要素を消してしまいましょう。

プラグイン（CSS Tools）をインストール

Pluginタブ -> + Add plugins -> CSS Tools -> Install

CSS Toolsをchatページに設置

Visual elements -> CSS Tools

WorkFlowに移動

Click here to add an event... -> General -> page is loaded

Click here add an action... -> Element Actions -> CSS Tools -> Add Custom Style To Head a CSS Tools

スクロールバーのwidthとheightが０になります。

既読機能

最後に、一番苦労した機能である既読機能の実装をしていきます。

Text Elementとデータベースは前回の記事で設定まで終わっているので、あとは相手のユーザーさんがメッセージを見たときにMessageテーブルのReadを”yes”に変更することができれば機能としては実装できます。

chatページのWorkFlowに移動し、Click here to add an event...からイベントを選択していきます。

General -> Do every 5 seconds

Click here to add an action... -> Data(Things) -> Make change to a list of things...

これで既読機能が実装できました。

実際にPreviewで確認してみましょう。

別ユーザーでログインする場合はブラウザの種類を分けるか、Chromeのログインユーザーを分ける必要があります。

躓きポイント

Make change to にListがあるのを知らず、複数データの更新はどうやるんだと1日悩んでいましたが、NoCodeCampのFAQで解決できました。

masahide（筆者）

いつも素早い回答ありがとうございます！

まとめ

こちらのアプリはEveryone can viewに設定しているので、躓いたときはご自分のアプリと見比べてください。

LINEの機能の10%くらいしか再現できていませんが、クローンアプリを作成することで、チャットについての難しさを学ぶことができました。

これからも面白そうなアプリを模倣しながらBubbleを学んでいきます。

ここまでご覧いただき、ありがとうございました。

分からないところがあれば、お気軽にコメントください。