朝活コミュニティの運営もしているので、興味のある方は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」を作っていきましょう。前提条件Bubbleに登録している(FreeプランでOK)Bubbleの触り方がなんとなくわかるログイン機能や投稿機能を作ったことがあるこれからBubbleを始める場合はわかりにくい部分が多々出てくると思うので、下記のサイトからハンズオンで学習することをオススメします。appから新規アプリを作成していきます。appは「LOIN」としました。※同じ名前は使えないので、Loin-sample001などお好きなアプリ名を付けてください。Assistantから空白ページで始めましょう。以下のような新規登録画面を作っていきます。ログイン用のページを作成します。nameは「sign_up」とします。responsive[beta]を押しましょう。英語での解説動画が視聴できるので、一度見ておくと勉強になります。最初に作成されたページの余白を選択し、Layout設定をしていきます。width(最小横幅)はモバイル表示を意識して400にしています。bodyに変更します。Elementsは自動的にA,B,C...と割り振られていくので、分かりやすい名前を付けておくと後々迷わなくなります。color、Colorは#ECEDEFとします。Previewすると、以下のような灰色縦長のグループができたと思います。elementsからTextを追加します。contentにチェックを入れます。Textには基本的にこの設定を適用させていきます。Formを作成します。Uploaderを追加します。ボタンとテキストも追加します。50px横幅は親グループサイズに依存し、縦幅は50px固定になりました。コピー&ペーストで2つ追加します。Uploader)を配置します。0px最後に余白を整えて、新規登録画面の作成を終わります。64pxこれでそれっぽい新規登録画面ができました。同じ要領でログインフォームを作っていきます。fromを先ほど作った「sign_up」とします。これでsign_upページをコピーしてloginページが生成されました。formは削除します。※WorkFrowを設定するときに判別しやすくするために付けているので、分かればなんでもOKです。ログインついでに新規登録フォームへ遷移するテキストも追加しておきます。チェック新規登録ページからもログインページへ遷移できるようにしましょう。ログインの遷移が完了しました。新規登録機能の作成WorkFrowの設定をして、実際にユーザー登録できるようにします。workflowから設定していきます。fieldデータベースに上記以外のFieldが存在しないので、設定と同時に作ってしまいます。page...を選択し、indexページを指定しておきます。これでユーザー新規登録後にindexページへ遷移することができます。workflowから先ほどと同じようにWorkFlowを設定します。page...を選択し、indexページを指定しておきます。新規登録と同じように、ログイン後にindexページへ遷移することができるようになりました。動作確認sign_upページからPreviewして実際の動作を確認してみましょう。indexページにまだ何も配置していないので、真っ白いページに遷移したかと思います。Usersを選択すると先ほど作成したラスカールさんが登録されているのがわかります。ログインページも同じ要領で試してみてください。まとめ以上でLOINの新規登録&ログインページの作成が完了です。ご不明点がありましたら、お気軽にお問い合わせ下さい。次回はUser一覧ページを作成していきます。※追記事項:ボタンをマウスホバーしたときの色がデフォルトだったので、修正しました。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。WEB制作、Bubble開発で生計を立て、2023年までにフィンランド起業を目指している、まさひで(@john01tgmck)です。朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。ブログテックキャンプ受講終了後にカリキュラム見れる?1ヶ月延長方法も解説します。願望が絵本になりました。