Bubble LINE風アプリの作り方

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

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の触り方がなんとなくわかる
  • ログイン機能や投稿機能を作ったことがある

トークルーム作成

今回はこのようなトークルームページを作成していきます。

この章で学べること

  • データベースのリレーション
  • 日付表記の変更
  • Conditionalの設定方法

ユーザー一覧ページを元に作成

開発画面左上のPage index よりAdd a new page...

前回作成したユーザー一覧ページを元に作成していくので、Clonefromをindexとします。

※Clonefromは指定したページをコピーできる機能です。

  • Page name = talk_room
  • Clone from = index

ヘッダー修正

Text 友達を選択をトークに変更

Group headerーtitle内のtext 作成は削除し、アイコンを3つ並べます。

アイコンがたくさんあって迷ってしまうので、黄色マーカー部分を検索かけてみてください。

  • icon fa fa-clone
  • icon fa fa-commenting-o
  • icon fa fa-ellipsis-v
  • Icon color = #000000
  • Width = 20px
  • Height = 20px

作成した3つのアイコンを選択して、グループ化します。

  • Icon color = #000000
  • Width = 20px
  • Height = 20px
  • Container layout = Row
  • Container alignment = centered
  • Apply gap spacing between elements = チェック
  • Column gap(px) = 8
  • Vertical alignment = Centered
  • Make this element fixed-width = チェック外す
  • Min width = 0px
  • Max width = 400px
  • Min height = 0px

検索フォーム作成

こちらはほとんど変更する箇所はありません。

Seach boxのPlaceholderを「検索」に変更

Group search内にsquare-oアイコンを追加

※先ほど作ったアイコンをコピーしてGroup search内に移動すると便利です。

Image from Gyazo

 

トークルーム一覧表示(データベース)

トークルーム一覧表示のためのデータベースを作っていきます。

データベース

  • Roomテーブル
  • Messageテーブル

テーブルイメージ

GitMindの矢印設定がうまくいかず、鳥の爪が出せなかったので、矢印になっていますが、テーブル間のリレーションは以下のように想定しています。

  • User:Room = 多:多
  • User:Message = 1:多
  • Room:Message = 1:多

リレーションの関係上、内容無しでRoomテーブルを作成してからMessageテーブルを作成します。

続いてRoomテーブルの中身を作成します。

image,Member,MessageすべてThis field is a list(multiple entries)にチェックを入れます。

項目をリスト化することで、1つのレコード内に複数のデータを持たせることができます。

今回の場合は1対1のトークルーム内に複数のデータ(画像/ユーザー/メッセージ)を登録する設定です。

トークルーム一覧表示(フロント側)

RepeatingGroupの設定

  • Type of Content = Room
  • Date source = Search for Rooms
    Member contains Current User
    Sort by = Modified Date
    Descending = yes

これでログインしているユーザーが参加しているルームのみを表示することができます。

更新が新しい順に表示したいので、Modified DataのDescndingをyesにしています。

RepeatingGroup内のGroupUsershowをGroup Roomに名称変更します。

そして子要素のTextを削除しておきます。

  • Type of content = Room
  • Date source = Current cell's Room

 

Group Room 内にユーザーアイコン設置

Appearance

  • Type of content = User
  • Date source = Parent group's Room's Member:minus item Current User:first item
  • Dynamic image = Group UserIcon's User's userIcon
  • center the image = チェック

Layout

  • Container layout = Row
  • Width = 40px
  • Height = 40px

ルームには必ずユーザーが2人いる設定なので、そこからログインしているユーザーを抜いて最初のユーザーのアイコンが表示されるように設定しています。

つまりトーク相手が表示されるという設定ですね。

 

ユーザーネームを設置

先ほど作ったアイコンのユーザー情報からユーザーネームを持ってきます。

Appearance

  • Group UserIcon's User's nickname

Layout

  • Make this element fixed-width = チェック外す
  • Min width = 0px
  • Fit width to content = チェック
  • Min height = 0px

最新メッセージ用テキストを作成

Text Group UserIcon's Useをコピー&ペースト

Appearance

  • Parent group's Room's Message:last item's message
  • font-size = 12px
  • font-color = #7A7A7A

 

Group Room memberの作成

作成した3つのElements(アイコン/ユーザーネーム/最新投稿文)をグループ化

Shiftキーを押しながら選択し、右クリックで簡単にグループ化できます。
Image from Gyazo

  • Container layout = Row
  • Container alignment = Left-aligned
  • Apply gap spacing between elements = チェック
  • Column gap(px) = 8
  • Make this element fixed-width = チェック外す
  • Min width = 0px
  • Min height = 0px

Group name&lastmessageの作成

先ほどと同じ要領で、Text Group UserIcon's UseとText Parent group's Roomを選択しColumnでGroup化します。

  • Container layout = Column
  • Make this element fixed-width = チェック外す
  • Min width = 0px
  • Min height = 0px

最新更新日の作成

Group Room内にTextを配置します。

Appearance

  • Parent group's Room's Modified Date:formatted as 17:14
  • font-size = 11px
  • font-color = #7A7A7A

Layout

  • いつもの設定

format type は24時間表記のものを選択します。

※現在時刻を表示しているので、17:14とは表示されません。

Conditionalを使って、日付によって表示形式を変更します。

投稿が1日前であれば昨日と表示

  • When = Parent group's Room's Modified Date:formatted as 4/05/22 is Current date/time +(days): -1:formatted as 4/05/22
  • Text = 昨日

投稿が2日前であれば日付を表示

  • When = Parent group's Room's Modified Date +(days):2 < Current date/time
  • Text = Parent group's Room's Modified Date: formatted as 04/05
  • Format type = Custom
  • Custom format = mm/dd
    表示する日付を「04/05」という表示に設定しています。

データ登録

このままではPreviewしても何も表示されないので、テストデータを登録しましょう。

DataタブからApp data => All Roomsを選択

New entryからRoomを作成します。

mic@gmail.comとtorao@gamil.comを選択しました。

作成したRoomのUnique idをコピーしておいてください。

続いてメッセージを2つほど登録します。

Roomには先ほどコピーしたUnique idを貼り付けます。

 

作成したメッセージのUnique idをコピーして、RoomのMessageに追加します。

 

これでmic@gmail.comかtorao@gamil.comでログインしてみましょう。

ログインしていない方のユーザーアイコンと名前、更新日、最終メッセージが表示されました。

どれか一つでも抜けている場合は、データベースのリレーションがうまくできていない可能性があります。

Unique idやログインユーザーが間違っていないか確認してみてください。

 

フッター作成

こちらはほぼ飾りなので、読み飛ばしてもらっても構いません。

Group icons footerを作成します。

  • Container layout = Row
  • Container alignment = Space around
  • Width = 390px
  • Height = 60px
  • Padding = top: 8px, Bottom: 8px

30pxのHomeアイコンと、11pxのテキストを作成

2つのElementsをColumnでGroup化します。

同じ要領で、「トーク、Voom、ニュース、ウォレット」を追加します。

参考

アイコン名

  • ホーム = home
  • トーク = commenting
  • Voom = superpowers
  • ニュース = newspaper
  • ウォレット = window-maximiz

まとめ

以上でLOINのトークルーム一覧ページの作成が完了です。

ややこしい箇所

  • Cnditionalを使った日付表示変更
  • データベースのリレーション

前回まではデータベースを触ることはほぼなかったので、今回は少しややこしかったと思います。どうしても理解できないときは、BubbleフォーラムやElementをマウスホバーすることでリンクが出てくるreferenceなどを参考にしてください。

Image from Gyazo

次回はメインのチャットページを作成していきます。

LOIN作成において最も苦労した既読機能を紹介します。

masahide(筆者)
次回で最終章になります!

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