こんにちは!
WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。
2021年10月よりフリーランスになりました!
主な仕事内容
- WEB制作(サーバー契約からデザイン、WordPressでの公開〜保守まで担当可能)
- ノーコードツールを使ったWEBアプリ開発
そしてそして、2021年3月より日本最大のノーコードコミュニティ【NoCodeCamp】のコミュニティマネージャーとなりました。
イベントの企画・運営を行っており、「朝からBubbleでじょん」という朝活イベントを毎朝5:00~6:00開催しております。

NoCodeCamp詳細は以下のリンクより確認することができます。
それではさっそくLINE風アプリ「LOIN」を作っていきましょう。
前提条件
- Bubbleに登録している(FreeプランでOK)
- Bubbleの触り方がなんとなくわかる
- ログイン機能や投稿機能を作ったことがある
便利機能追加
前回までのブログで一通りのチャット機能は実装することができましたが、チャットが自動スクロールしなかったり、既読機能が付いていません。
今回は、このあたりの機能追加をしていきます。
リロードをトリガーとした既読機能は実装できたので、次はリロードなしでそのページいた場合既読つく方法を考えますー pic.twitter.com/gyBPH3mFVr
— じょん (@john01tgmck) March 29, 2022
この章で学べること
- メンバー一覧からRoom作成
- メッセージ自動スクロール
- RepeatingGroupのスクロールバー削除
- 既読機能
個別Room作成機能追加

indexページにユーザー一覧が表示されていますが、現在クリックできないと思います。
クリックと同時に2人用のRoomを作成し、もうすでに作成してる場合はチャットページに遷移できるような機能を追加します。
Group Usershowから[Start/Edit workflow]をクリック
Click here to add an action...からData(Things) -> Create a new thing...を選択
Step 1
- Type = Room
- Set another field
Member add Current User
Member add This Group's User
※Roomテーブルに新規レコードを作成し、ログインユーザーと選択したユーザーを追加
Only when
- Do search for...
Type: Room - Add a new constraint
Member contains Current User
Member contains Current cell's User - :count < 1
※Roomテーブルにログインユーザーと選択したユーザーが含まれているレコードが1より少ない場合(つまり0の場合)新たにレコードを作成
Step 2
Navigation -> Go to page...
- Destination = chat
- Data to send = Result of step 1 (Create a new Room...)
Only when
- Do search for...
Type: Room - Add a new constraint
Member contains Current User
Member contains Current cell's User - :count < 1
※Roomテーブルにログインユーザーと選択したユーザーが含まれているレコードが1より少ない場合(つまり0の場合)Step1で作成したRoomに遷移する
Step 3
Navigation -> Go to page...
- Destination = chat
- Data to send =Do search for...
- Type: Room
- Add a new constraint
Member contains Current User
Member contains Current cell's User - :first item
※Step2に該当しない場合はログインユーザーと選択したユーザーが含まれる最初のRoomに遷移する
これで個別Roomを作成する機能が実装できました。
Previewにて確認してみましょう。
User一覧ページ(index)からラスカールさんを選択
chatページに遷移するので、何か一言入力します。
その後、左上のangle-leftアイコンをクリックしてRoom一覧ページに戻ります。
ラスカールさんとのトークルームが作成され、最新のメッセージが表示されています。
ただ、トークルームから友達選択ページに遷移できないので、リンクを追加しておきます。
talk_roomページのIcon fa-commenting-oを選択し、Start/Edit workflow
Navigation -> Go to page... Destination = indexとしておきます。
これでトークルームから友達選択ページに遷移できるようになりました。
メッセージ自動スクロール
概要
RepeatingGroup内の最終メッセージがCustomStateに保存したUniqueidと一致しない場合、RepeatingGroupの最終メッセージの位置にスクロールさせ、CustomStateの値を更新する

実際に機能追加してみましょう。
キーとなるCustomStateを作成
RepeatingGroup chatの右上にある(i)マークをクリック -> Add a new custom state
- State name = last_message
- State type = text
WorkFlowに移動
When
Click here to add an event... -> Elements -> Do when condition is true
- Run this = Every time
- Only when = RepeatingGroup chat's last_message is not RepeatingGroup chat's List of Messages:last item's unique id
RepeatingGroupの最終メッセージがCustomStateに保管したuniqueidであれば起動
Step 1
Element Actions -> Repeating Group -> Scroll to entry
- Element = RepeatingGroup chat
- Entry to scroll to = RepeatingGroup chat's List of Messages:last item
- Animate the scrolling = チェック
Step 2
Ellement Actions -> All elements -> Set state
- Element = RepeatingGroup chat
- Custom state = last_message
- Value = RepeatingGroup chat's List of Messages:last item's unique id
Step 3
CustomState更新後にスクロールされるように、Step 1の内容をコピーしてStep3とします。
では、Previewから動かしてみましょう。
下にグイっと動いてしまいました・・・。
このような動きは想定していないので、力技ですが、条件を追加します。
WorkFlowから先ほどのDo when RepeatingGroup...を選択し、Onlywhen条件にメッセージが7以上の場合を追記します。
- Onlywhen追記 = and RepeatingGroup chat's List of Message: count > 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
- This element is visible on page load = チェック外す
- Collapse when hidden = チェック
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
- Element = SCCTools A
- Your CSS = ::-webkit-scrollbar { width: 0px; height: 0px;}
スクロールバーのwidthとheightが0になります。
既読機能
最後に、一番苦労した機能である既読機能の実装をしていきます。
Text Elementとデータベースは前回の記事で設定まで終わっているので、あとは相手のユーザーさんがメッセージを見たときにMessageテーブルのReadを”yes”に変更することができれば機能としては実装できます。
前回の記事
-
-
Bubbleで背景画像を入れ替える方法を解説
目次1 前提条件2 この章で学べること3 機能実装方法3.1 RemoveBG APIキーの取得3.2 API Connectorの設定3.3 入力フォームの作成3.4 WorkFlowの作成4 まと ...
続きを見る
chatページのWorkFlowに移動し、Click here to add an event...からイベントを選択していきます。
General -> Do every 5 seconds
- Interval(seconds) = 3
3秒ごとに設定したアクションを実行
Click here to add an action... -> Data(Things) -> Make change to a list of things...
- Type of things = Message
- List to change = RepeatingGroup chat's List of Messages:filtered
Read = "no"
Creator <> Current User
※RepeatingGroup内のメッセージのReadがnoでMessage作成者がログインしているユーザーではないMessageを抽出 - Change another field : Read = "yes"
※抽出したMessageのReadをyesに変更
これで既読機能が実装できました。
実際にPreviewで確認してみましょう。
別ユーザーでログインする場合はブラウザの種類を分けるか、Chromeのログインユーザーを分ける必要があります。
躓きポイント
Make change to にListがあるのを知らず、複数データの更新はどうやるんだと1日悩んでいましたが、NoCodeCampのFAQで解決できました。

まとめ
こちらのアプリはEveryone can viewに設定しているので、躓いたときはご自分のアプリと見比べてください。
LINEの機能の10%くらいしか再現できていませんが、クローンアプリを作成することで、チャットについての難しさを学ぶことができました。
これからも面白そうなアプリを模倣しながらBubbleを学んでいきます。
ここまでご覧いただき、ありがとうございました。
分からないところがあれば、お気軽にコメントください。
-
-
BubbleでLINE風チャットアプリ作成方法解説【おまけ】 ~新レスポンシブ対応~
こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...
-
-
BubbleでLINE風チャットアプリ作成方法解説【その5】 ~新レスポンシブ対応~
こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...
-
-
BubbleでLINE風チャットアプリ作成方法解説【その4】 ~新レスポンシブ対応~
こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...
-
-
BubbleでLINE風チャットアプリ作成方法解説【その3】 ~新レスポンシブ対応~
こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...
-
-
BubbleでLINE風チャットアプリ作成方法解説【その2】 ~新レスポンシブ対応~
こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...