MENU

3.4章 ログインページの作成

bubbleチュートリアルver1第3.4章 ログインページの作成

目次-全章

第1章 bubbleについて(bubbleの基礎知識からアカウントの作成、アプリ開発まで)
第2章 かんたんなアプリケーションを作成
第3章 ページレイアウト(UIデザイン)を作成
第4章 データベースの設計
第5章 ユーザー登録、ログインを試してみる
第6章 ユーザーログイン時の処理を実装してみる
第7章 ユーザー情報を更新、削除(退会、解約)できるようにしてみる
第8章 メールアドレス認証を実装してみる
第9章 パスワードの再設定、パスワードリセット機能を実装してみる
第10章 ユーザーがツイートできるようにする
第11章 ユーザーのフォロー機能、タイムライン表示機能をつくってみる
まとめ

ログインページの作成します。

図3.4.1 ログインページ完成例
目次

ログインページを作成する

ページをクローンして作成する

新規ページを作成する場合で、既存のページと似たようなレイアウトのページを作成する場合は、既存ページをクローンして編集していくと効率的に構築できます。

この時、クローン元のレスポンシブ設定もコピーされます。

ログインページは新規会員登録ページとよく似たレイアウトのため、ページをクローンして作成しましょう。

ビジュアルエディタからページ一覧を表示し、「Add a new page…」をクリックします。

図3.4.2 Add a new page…へ

ポップアップでPage nameを「login」とし、Clone fromに「signup」を選択します。

図3.4.3 Page nameを「login」、Clone fromに「signup」

「CREATE」をクリックするとページが複製されます。 singupと同じ内容が表示されていることが確認できます。

ワークフローを設定していた場合は、ワークフローも複製されます。

ページ、エレメントのスタイル等の設定もそのままコピーされます。

要素を配置する

図3.4.4 コピーされた「login」ページ

ページをクローンしたので、不要なエレメントを削除し、必要なエレメントを追加しましょう。

不要なエレメントを削除する

新規登録ページの「username」はログインページに不要なので、Group Usernameを選択した状態で右クリックし、メニューからDeleteをクリックしてエレメントを削除します。

図3.4.5 不要なエレメント削除

必要なエレメントを追加する

新規会員登録ページの「ログインはこちら」というリンクをコピーし、Linkエレメントをもう一つ追加します。

Link Loginを選択した状態で右クリックし、メニューから「Copy」をクリックします。再度右クリックし、メニューから「Paste」をクリックします。

図3.4.6 Copyを選択

図3.4.7 Pasteを選択

このとき、元々のLinkエレメントに設定してあるレスポンシブの設定も引き継がれるので自動的に元々あったログインはこちらの下に配置されます。

複製したリンクエレメントは「パスワードを忘れた場合はこちら」というテキストに変更します。

各エレメントの名前を変更する

エレメントの名称は変更しなくても問題ありませんが、ワークフロー内で利用する時にわかりづらくなるので、それぞれ以下のように変更しておきます。

図3.4.8 エレメントの名称変更(1/2)
図3.4.9エレメントの名称変更(2/2)

表示テキストの内容を変更する

ログインページに合わせて、エレメントの表示テキストを変更します。

図3.4.10 Text内容の変更

これでログインページのレイアウトは完成です。

実際に働く社員とカジュアル面談しませんか?

【毎週金曜日開催中】カジュアル面談しませんか?


参加はこちら!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私たち株式会社ファンリピートは、ITを通じてお客様の課題解決を行うスタートアップベンチャーです。ノーコード・ローコードを用いたDX支援事業を主軸に、スピード感を持ってお客様のご要望にお応えしています。

2019年の創業から、出版業界・広告業界をはじめ、幅広い業界のデジタル施策を支援。財務管理・顧客管理などの基幹・業務システムから、新規Webサービスなど開発前検証フェーズのシステム導入支援まで、ワンストップでサポートを実施しています。この先も本質的なご提案を通じて、お客様の課題を解決し続けます。

コメント

コメントする

目次