朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。スポンサーリンクこんにちは!WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。2021年10月よりフリーランスになりました!主な仕事内容WEB制作(サーバー契約からデザイン、WordPressでの公開〜保守まで担当可能)ノーコードツールを使ったWEBアプリ開発Bubbleで作成したWEBアプリケーション成果物その1:PokeVoiceエンドレスな絵本読み聞かせは録音した自分の声にお任せ!https://pokevoice.bubbleapps.io/version-test/loginpage?debug_mode=true成果物その2:ぱぱコミュ子育てパパ達専用のコミュニケーションツールhttps://papacomu.bubbleapps.io/そしてそして、2021年3月より日本最大のノーコードコミュニティ【NoCodeCamp】のコミュニティマネージャーとなりました。イベントの企画・運営を行っており、「朝からBubbleでじょん」という朝活イベントを毎朝5:00~6:00開催しております。masahide(筆者)盆正月関係なく365日開催していく予定です!NoCodeCamp詳細は以下のリンクより確認することができます。まとめノーコードツールBubbleとはコードを書かずにアプリが開発できるのが「ノーコード」になります。コードを書くツールは「ローコード」すべて自分でコードを書くことを「フルスクラッチ」と言います。その「ノーコード」の中でもやれることの幅が広く、使っている人が多いツールがBubbleになります。データベース設計に関するクセや全て英語表記でとっつきにくさもありますが、簡単なメモアプリやSNSアプリを一つ作ることですぐになれることができます。Bubble始めてから2か月でNoCodeCamp内のアプリコンテストに応募させてもらい、なんとコンテスト2位に選ばれ、賞金5,000円いただきました!学習から2か月でもアプリが作れる!それくらい自分の想いを形にするのが簡単なんです!!当時の状況をNoCodeCampメディアに投稿しているので、興味のある方は下記からご覧ください。https://no-code.media/2021/12/30/post-2898/完成品「LOIN」あの有名なメッセージアプリLINEを模倣して作成しています。ページ遷移は以下の画像のように設定しました。機能一覧メッセージやりとりにおいて必要と思われる機能のみを厳選し、簡単なチャットアプリにしています。考え方が少し複雑でしたが、プラグインの導入も必要なく、作成することができました。DM機能やチャット機能を実装したいと考えている方の参考になれば幸いです。新レスポンシブ解説【基礎編】さっそくLOINのフロント作成をしていきたいのですが、まず初めに新レスポンシブについて解説します。基礎編なので、もう新レスポンシブわかっているよ!という方は読み飛ばしてください。急に現れたリロードマーク2021年の11月あたりにResponsiveにbeta版移行的なマークがついていました。masahide(筆者)なんだこれ??触らぬ神にたたりなしなので、何事もなくすごしていると、NoCodeCamp内で新レスポンシブに関するイベントがバンバン立ち上がりはじめ、少し焦ったのを覚えています。このResponsiveマークを押すことで、対象ページを新レスポンシブ対応に変更することができます。responsive[beta]を押して、UPGRADEボタンを押下すると、旧レスポンシブデザインには戻せないので、注意して下さい。旧レスポンシブから新レスポンシブに変更したときに何が変わるかというと、自由に動かすことができなくなる代わりに、レスポンシブ対応が容易になります。旧レスポンシブでは、パワーポイントのように自由自在にElementを配置することができていましたが、レスポンシブ対応がとても大変でした。新レスポンシブは反対に、最初の設定が少し面倒ですが、レスポンシブ対応は非常に簡単になりました。今後は新レスポンシブに移行していくので、今のうちに覚えておくことをオススメします。変更点をまとめました。参考にした資料はBubbleの公式Docsです。動画でも説明されているので、併せてご覧ください。layoutを理解することで、新レスポンシブでの作り方がわかります。ParentRowColumnFixed旧レスポンシブと同じ、どこにでもElementを置けるlayoutになります。layoutを使うのであれば、新レスポンシブに変更した利点が全くないので、使わないと思ってください。layoutになります。背景に重ねてユーザーアイコンを表示したり、付箋のように重ねて表示したい場合に使えます。typeを変更することで、右上に表示したり、左下に表示することができます。Row子要素が横並びするようになります。layoutをRowに設定し、子要素としてShapeAとShapeBを配置しています。子要素のwidth(横幅)を固定しておくことで、PC表示では横並びだけど、スマホ表示では縦並びといった挙動も可能です。Column子要素が縦に並ぶようになります。HTML/CSS(マークアップ言語)を学んだ方なら、左上に重力があるという表現がしっくりくるかもしれません。layoutを使うことになります。※余談ですが、RowとColumnが縦横どっちか、分からなくなったときは頭文字の空いている部分を埋めるための線を考えてください。最後にデータベース設計を確認して終わります。Usersとして2人以上格納できるようにしています。今回のLOINでは2人のユーザーしか入りませんが、Listにすることで複数のデータが格納できるようになります。Messageテーブルメッセージと画像を格納するためのテーブルになります。Readにyes/noとありますが、こちらはチャットの相手が既読したかどうかのフラグになります。RoomはこのメッセージがどこのRoomに紐づくものかという設定ですね。次回から実際に作り方を紹介していくので、ここでデータベースの理解をしていなくても大丈夫です。テーブル3つ使うんだーくらいに覚えておいてくれると嬉しいです。まとめ今回LINEを模倣してアプリ作成してみましたが、チャット機能はとても難しいということに気づけました。コメント投稿機能とはまた違った考え方なので、DM機能作りたい方はそっくりそのままコピーして使えると思います。次回からハンズオン形式で進められるように丁寧に解説していくので、最後まで見ていただけると嬉しいです。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。ブログテックキャンプ受講終了後にカリキュラム見れる?1ヶ月延長方法も解説します。願望が絵本になりました。