こんにちは！
WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。
2021年10月よりフリーランスになりました！
主な仕事内容
- WEB制作（サーバー契約からデザイン、WordPressでの公開〜保守まで担当可能）
- ノーコードツールを使ったWEBアプリ開発
そしてそして、2021年3月より日本最大のノーコードコミュニティ【NoCodeCamp】のコミュニティマネージャーとなりました。
イベントの企画・運営を行っており、「朝からBubbleでじょん」という朝活イベントを毎朝5:00～6:00開催しております。
NoCodeCamp詳細は以下のリンクより確認することができます。
それではさっそく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 作成は削除し、アイコンを３つ並べます。
アイコンがたくさんあって迷ってしまうので、黄色マーカー部分を検索かけてみてください。
- 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内に移動すると便利です。
トークルーム一覧表示（データベース）
トークルーム一覧表示のためのデータベースを作っていきます。
データベース
- Roomテーブル
- Messageテーブル
テーブルイメージ
GitMindの矢印設定がうまくいかず、鳥の爪が出せなかったので、矢印になっていますが、テーブル間のリレーションは以下のように想定しています。
- User：Room = 多：多
- User：Message = 1：多
- Room：Message = １：多
リレーションの関係上、内容無しで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キーを押しながら選択し、右クリックで簡単にグループ化できます。
- 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を使って、日付によって表示形式を変更します。
投稿が１日前であれば昨日と表示
- 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などを参考にしてください。
次回はメインのチャットページを作成していきます。
LOIN作成において最も苦労した既読機能を紹介します。
-
-
BubbleでLINE風チャットアプリ作成方法解説【おまけ】 ～新レスポンシブ対応～
こんにちは！ WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました！ 主な ...
-
-
BubbleでLINE風チャットアプリ作成方法解説【その５】 ～新レスポンシブ対応～
こんにちは！ WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました！ 主な ...
-
-
BubbleでLINE風チャットアプリ作成方法解説【その４】 ～新レスポンシブ対応～
こんにちは！ WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました！ 主な ...
-
-
BubbleでLINE風チャットアプリ作成方法解説【その３】 ～新レスポンシブ対応～
こんにちは！ WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました！ 主な ...
-
-
BubbleでLINE風チャットアプリ作成方法解説【その２】 ～新レスポンシブ対応～
こんにちは！ WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。 2021年10月よりフリーランスになりました！ 主な ...
です。 2021年10月よりフリーランスになりました！ 主な){kind=link}