Bubble LINE風アプリの作り方

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

masahide

フィンランドへの移住を目指し、場所に縛られない働き方を模索中していたところ、NoCodeCampに出会い、朝活イベント毎日開催しています。 2022年3月よりコミュニティマネージャーとしてイベント運営にも携わっています。

スポンサーリンク

こんにちは!

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

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

主な仕事内容

  • WEB制作(サーバー契約からデザイン、WordPressでの公開〜保守まで担当可能)
  • ノーコードツールを使ったWEBアプリ開発

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

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

masahide(筆者)
盆正月関係なく365日開催していく予定です!

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

NoCodeCamp公式HP

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

前提条件

  • Bubbleに登録している(FreeプランでOK)
  • Bubbleの触り方がなんとなくわかる
  • ログイン機能や投稿機能を作ったことがある

便利機能追加

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

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


この章で学べること

  • メンバー一覧からRoom作成
  • メッセージ自動スクロール
  • RepeatingGroupのスクロールバー削除
  • 既読機能

個別Room作成機能追加

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

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の値を更新する

masahide(筆者)
伝われ!脳内イメージ!

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

キーとなる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から動かしてみましょう。

Image from Gyazo

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

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

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

  • Onlywhen追記 = and RepeatingGroup chat's List of Message: count > 7

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

Image from Gyazo

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

Image from Gyazo

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になります。

Image from Gyazo

既読機能

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

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

前回の記事

BubbleとGoogle MeetをZapierを使って接続してみた

目次1 前提条件2 この章で学べること3 作るもの4 Bubble側の設定4.1 データベース作成4.2 Zapierプラグインのインストール4.3 データAPIの有効化4.4 投稿用フォームの作成5 ...

続きを見る

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のログインユーザーを分ける必要があります。

Image from Gyazo

躓きポイント

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

masahide(筆者)
いつも素早い回答ありがとうございます!

まとめ

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

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

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

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

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

Bubble LINE風アプリの作り方

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

こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...

Bubble LINE風アプリの作り方

BubbleでLINE風チャットアプリ作成方法解説【その5】 ~新レスポンシブ対応~

こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...

Bubble LINE風アプリの作り方

BubbleでLINE風チャットアプリ作成方法解説【その4】 ~新レスポンシブ対応~

こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...

Bubble LINE風アプリの作り方

BubbleでLINE風チャットアプリ作成方法解説【その3】 ~新レスポンシブ対応~

こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...

Bubble LINE風アプリの作り方

BubbleでLINE風チャットアプリ作成方法解説【その2】 ~新レスポンシブ対応~

こんにちは! WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました! 主な ...

スポンサーリンク

-Bubble, LINE風アプリの作り方

© 2022 まさブログ Powered by AFFINGER5