朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。スポンサーリンクこんにちは!WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。2021年10月よりフリーランスになりました!主な仕事内容WEB制作(サーバー契約からデザイン、WordPressでの公開〜保守まで担当可能)ノーコードツールを使ったWEBアプリ開発そしてそして、2021年3月より日本最大のノーコードコミュニティ【NoCodeCamp】のコミュニティマネージャーとなりました。イベントの企画・運営を行っており、「朝からBubbleでじょん」という朝活イベントを毎朝5:00~6:00開催しております。masahide(筆者)盆正月関係なく365日開催していく予定です!NoCodeCamp詳細は以下のリンクより確認することができます。NoCodeCamp公式HPそれではさっそくLINE風アプリ「LOIN」を作っていきましょう。今回はこのようなトークルームページを作成していきます。page...前回作成したユーザー一覧ページを元に作成していくので、Clonefromをindexとします。※Clonefromは指定したページをコピーできる機能です。作成は削除し、アイコンを3つ並べます。アイコンがたくさんあって迷ってしまうので、黄色マーカー部分を検索かけてみてください。20px作成した3つのアイコンを選択して、グループ化します。0px検索フォーム作成こちらはほとんど変更する箇所はありません。search内に移動すると便利です。トークルーム一覧表示(データベース)トークルーム一覧表示のためのデータベースを作っていきます。データベースRoomテーブルMessageテーブルテーブルイメージGitMindの矢印設定がうまくいかず、鳥の爪が出せなかったので、矢印になっていますが、テーブル間のリレーションは以下のように想定しています。1:多リレーションの関係上、内容無しでRoomテーブルを作成してからMessageテーブルを作成します。続いてRoomテーブルの中身を作成します。entries)にチェックを入れます。項目をリスト化することで、1つのレコード内に複数のデータを持たせることができます。今回の場合は1対1のトークルーム内に複数のデータ(画像/ユーザー/メッセージ)を登録する設定です。yesこれでログインしているユーザーが参加しているルームのみを表示することができます。DataのDescndingをyesにしています。Roomに名称変更します。子要素のTextを削除しておきます。40pxルームには必ずユーザーが2人いる設定なので、そこからログインしているユーザーを抜いて最初のユーザーのアイコンが表示されるように設定しています。トーク相手が表示されるという設定ですね。先ほど作ったアイコンのユーザー情報からユーザーネームを持ってきます。作成した3つのElements(アイコン/ユーザーネーム/最新投稿文)をグループ化Shiftキーを押しながら選択し、右クリックで簡単にグループ化できます。Roomを選択しColumnでGroup化します。Room内にTextを配置します。24時間表記のものを選択します。※現在時刻を表示しているので、17:14とは表示されません。Conditionalを使って、日付によって表示形式を変更します。mm/dd表示する日付を「04/05」という表示に設定しています。データ登録このままではPreviewしても何も表示されないので、テストデータを登録しましょう。entryからRoomを作成します。mic@gmail.comとtorao@gamil.comを選択しました。idをコピーしておいてください。続いてメッセージを2つほど登録します。idをコピーして、RoomのMessageに追加します。これでmic@gmail.comかtorao@gamil.comでログインしてみましょう。メッセージが表示されました。どれか一つでも抜けている場合は、データベースのリレーションがうまくできていない可能性があります。idやログインユーザーが間違っていないか確認してみてください。フッター作成こちらはほぼ飾りなので、読み飛ばしてもらっても構いません。footerを作成します。8px30pxのHomeアイコンと、11pxのテキストを作成2つのElementsをColumnでGroup化します。同じ要領で、「トーク、Voom、ニュース、ウォレット」を追加します。window-maximizまとめ以上でLOINのトークルーム一覧ページの作成が完了です。ややこしい箇所Cnditionalを使った日付表示変更データベースのリレーション前回まではデータベースを触ることはほぼなかったので、今回は少しややこしかったと思います。しても理解できないときは、BubbleフォーラムやElementをマウスホバーすることでリンクが出てくるreferenceなどを参考にしてください。次回はメインのチャットページを作成していきます。LOIN作成において最も苦労した既読機能を紹介します。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。ブログテックキャンプ受講終了後にカリキュラム見れる?1ヶ月延長方法も解説します。願望が絵本になりました。