未来エンジニア養成所Blog

月単価180万以上のプログラミング講師がプログラミングを皆に楽しんでもらうための情報をお届けします。

【Bubble/ノーコード】サインアップ・ログイン・ログアウト機能を作る

title


今回は「サインアップ」「ログイン」「ログアウト」の機能を作る方法を解説します。


完成イメージはこのようになります。

finish


実施する内容は

  • 「メールアドレス」と「パスワード」をユーザーが入力するフォーム
  • 「サインアップ」ボタン、「ログイン」ボタンの設定
  • ユーザーのメールアドレスを表示
  • 「ログアウト」ボタンの設定

です。


「メールアドレス」と「パスワード」をユーザーが入力するフォーム

メールアドレスを入力するできるように「Input」エレメントを設置します。

InputEmail


メールアドレスを入力するための枠なので、「Placeholder」は「メールアドレスを入力」とします。

「Content format」は、メールアドレス入力専用の枠なので「Email」を選択します。



同じようにパスワードを入力できるように「Input」エレメントを設置します。

InputPassword


パスワードを入力するための枠なので、「Placeholder」は「パスワードを入力」とします。

「Content format」は、パスワード入力専用の枠なので「Password」を選択します。



続いて、メールアドレスやパスワードの入力された情報を登録するための「ボタン」を設置します。


まずはサインアップするように「サインアップ」ボタンを設置します。

SignUpButton


「ログイン」ボタンも同じように設置します。

LoginButton



サインアップのワークフロー

今度は「サインアップ」ボタンが押された時に、ユーザー情報を登録するワークフローを作成。

SignUpButtonClicked


「When Button Signup is clicked」で、「サインアップ」ボタンが押された時の処理になります。

「Click here to add action ...」をクリックしてアクションを定義します。


今回はアカウントのサインアップをしたいので、「Account」から「Sign the user up」を選択します。

SignTheUserUp


アカウントを登録するには「メールアドレス」と「パスワード」が必要になります。

まずは「メールアドレス」を設定します。


フォームで作成した「Input Email」に入力されたメールアドレスを登録したいので、「Input Email」を選択し、そこに入力された値ということで「's value」を選択します。

SetEmail

SetEmailValue


同じようにパスワードについても設定します。

SetPassword

SetPasswordValue


これでサインアップの設定は完了です。



ログインのワークフロー

今度は「ログイン」ボタンが押された時のワークフローを作成します。

Login


「When Button Login is clicked」で、「ログイン」ボタンが押された時の処理になります。

「Click here to add action ...」をクリックしてアクションを定義します。

LoginButtonClickedAction


今回はログインをしたいので、「Account」から「Log the user in」を選択します。

LogTheUserIn


サインアップの時と同様に「メールアドレス」と「パスワード」を設定します。

SetLogTheUserIn



メールアドレスの表示

今度は、ログインした時に、ログインしたユーザーの「メールアドレス」を表示するようにしていきます。


まずは「Group」エレメントでグループを作成します。

Group


「Group」エレメントの中に「Text」エレメントを設置します。

Text


この「Text」エレメントに現在ログインしているユーザーのメールアドレスを表示させます。

「Text」エレメントのプロパティで、現在ログインしているユーザーのメールアドレスを表示する設定を行います。


「Insert dynamic data」をクリックします。

InsertDynamicData


「Current User」を選択します。

CurrentUser


「's email」を選択します。

Email


これで、現在ログインしているユーザーのメールアドレスを、Textエレメントで表示させる設定ができました。



ログアウト処理の設定

次に「ログアウト」ボタンを設置します。

「Button」エレメント「ログアウト」ボタンを「Group」の中に設置します。

LogoutButton


「ログアウト」ボタンのワークフローを作成します。

LogoutButton


「When Button Logout is clicked」で、「ログアウト」ボタンが押された時の処理になります。

「Click here to add action ...」をクリックしてアクションを定義します。

LogoutButtonClickedAction


今回はログアウトをしたいので、「Account」から「Log the user out」を選択します。

LogTheUserOut


これで「ログアウト」の処理が完成です。



ログイン時にグループを表示させる

次に、ログインした時に「Group」が表示されるように設定します。


「Click here to add an event ...」で新しいワークフローを作成します。

AddAnEvent


ユーザーがログインした時のワークフローですので、「General」から「User is logged in」を選択します。

UserIsLoggedIn


「Click here to add action ...」をクリックしてアクションを定義します。


今回はエレメントを表示するという設定をしたいので、「Element Actions」から「Show」を選択します。

ElementActionShow


どのエレメントを表示させるか聞かれますので、作成した「Group」エレメントを指定します。

ShowElement


これで、ログインしたら「Group」エレメントを表示するという設定ができました。



ログアウト時にグループを非表示させる

次に、ログアウトした時に「Group」が非表示されるように設定します。


「Click here to add an event ...」で新しいワークフローを作成します。

AddAnEvent


ユーザーがログアウトした時のワークフローですので、「General」から「User is logged out」を選択します。

UserIsLoggedOut


「Click here to add action ...」をクリックしてアクションを定義します。

UserIsLoggedOutClickedAction


今回はエレメントを表示するという設定をしたいので、「Element Actions」から「Hide」を選択します。

ElementActionHide


どのエレメントを非表示させるか聞かれますので、作成した「Group」エレメントを指定します。

HideElement


これで、ログアウトしたら「Group」エレメントを非表示にするという設定ができました。



プレビューで確認

さっそくプレビューで確認してみましょう。

Preview1


最初の状態ではログアウトボタンが含まれる「Group」エレメントは表示されていません。


適当にメールアドレスとパスワードを入力して、「サインアップ」してみましょう。

Preview2


ユーザーのメールアドレスとログアウトボタンが表示されます。


ログアウトボタンを押してみると、また「Group」エレメントの情報が消えます。



これで、「サインアップ」「ログイン」「ログアウト」の機能を作成することができました。


参考図書



LINE公式アカウント

仕事が辛くてたまらない人生が、仕事が楽しくてたまらない人生に変わります。
【登録いただいた人全員に、無料キャリア相談プレゼント中!】


LineOfficial

友だち追加



【まついのLINE公式アカウントはこちらから!】
Line公式アカウント