【NoCode】Bubbleのチュートリアルを初心者向けに解説！ ② 新規ユーザー登録及びログイン機能を実装する

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールBubbleのチュートリアル Lesson 2 を初心者向けに解説していきます！

    この記事で学ぶこと
・新規ユーザー登録及びログイン機能の実装
・ログイン後にユーザー情報を表示する方法
・ログアウト機能の実装

チュートリアルの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。

1. 実装するサンプル

新規ユーザー登録及びログイン機能を実装していきます。ログイン後には、ユーザーのメールアドレスとログアウトボタンを表示します。

このチュートリアルのみでは、本格的なシステムを構築するには不十分ですが、ログインシステムについて基礎を学ぶことができます。

2. 入力フォーム及び送信ボタン作成

「Input」を配置し、「Placeholder」を「Email」に変更します。

この「Input」に対しては「Input Email」という名前が設定されています。後ほど、データベースに保存する際にこの名前を使用します。

もう1つ「Input」を配置し、「Placeholder」を「Password」に変更します。

この「Input」に対しては「Input Password」という名前が設定されています。こちらも同様に、データベースへの保存時に使用します。

「Sign up」及び「Log in」ボタンを配置します。次章で、それぞれのボタンに対して「Workflow」を作成していきます。

3. 新規ユーザー登録機能の実装

新規データをデータベースに保存する方法については、前回のチュートリアルで学習しました。復習のために以下に実装の流れをまとめます。

・「Type」を作成する
・「Field」を作成し、データ型を設定する
・「Field」と入力フォームの値を紐づける

「Type」及び「Field」につきましては、次の記事で詳しく解説しましたので、まずはこちらをご覧ください。

基本的な流れは同じなのですが、ユーザー情報を保存するための「User」という「Type」は、Bubbleがあらかじめ準備してくれるため、作成する必要はありません。

チュートリアルの指示を無視して、左メニューの「Data」をクリックしてみてください。「User」という「Type」がすでに準備されており、「email」「Modified Date」「Created Date」という「Field」が設定されているのが分かります。

「Modified Date」と「Created Date」は「変更日」と「作成日」のデータを保存する「Field」なので、今回は気にしないでください。

「password」はセキュリティ上の理由で表示されませんが、暗号化されてしっかり保存されるようになっています。

したがって、「email」及び「password」それぞれの「Field」を入力フォームの値と紐づける設定を行うだけで、新規ユーザー登録機能を実装することができます。

「Sign up」ボタンの「Workflow」を作成します。

「Click here to add an action」をクリックし、「Account」から「Sign the user up」を選択します。

「Email」に「Input Email's value」となるように順に選択します。「Password」に「Input Password's value」となるように順に選択します。

ここで、先程「Input」を配置したときに確認した名前を使用します。
「's value」は「値」という意味です。

これにより、それぞれの「Field」に入力フォームの値を保存することができます。

以上での実装で、「User」にユーザー情報を保存することができるようになりました。

4. ログイン機能の実装

「Log in」ボタンの「Workflow」を作成します。

「Click here to add an action」をクリックし、「Account」から「Log the user in」を選択します。

新規ユーザー登録機能の実装と全く同じ方法で、それぞれの「Field」と入力フォームの値の紐づけを行います。

「Email」に「Input Email's value」となるように順に選択します。「Password」に「Input Password's value」となるように順に選択します。

以上で、ログイン機能の実装は完了です。

5. ログインユーザーのメールアドレスを表示

「Group」を配置します。この白背景の枠の部分を、ログイン時に表示し、ログアウト時には非表示にします。

この「Group」には、チュートリアル用に「Group Logged in」という名前が設定されています。
後ほどこの名前を使用して、表示・非表示を切り替える設定を行います。

「Text」を「Group」内に配置します。
「Group」からはみ出さないように注意してください。

「Insert dynamic data」をクリックし、「Current User's email （現在のユーザーのメールアドレス）」となるように順に選択します。

これにより、ログインユーザーのメールアドレスを「User」から読み込み、表示することができるようになりました。

6. ログアウト機能の実装

「Log out」ボタンを「Group」内に配置し、「Workflow」を作成します。

「Click here to add an action」をクリックし、「Account」から「Log the user out」を選択します。

以上で、ログアウト機能の実装は完了です。
しかし、今のままでは、ログインしていない状態でもログアウトボタンが表示されてしまうので、次章で「Group」の表示・非表示切り替え設定を行います。

7. グループ 表示・非表示 切り替え

「Click here to add an event」をクリックし、「General」から「User is logged in」を選択します。

これにより、ユーザーログイン時の処理を追加することができます。

「Click here to add an action」をクリックし、「Element Actions」から「Show」を選択します。

「Element」に「Group Logged in」を選択します。
これは、先程「Group」を配置した際に確認した名前です。

これにより、ログイン時に「Group Logged in」を表示することができるようになりました。

上記と同じ手順で、ログアウト時に「Group Logged in」を非表示にする処理を追加します。

「Click here to add an event」をクリックし、「General」から「User is logged out」を選択します。

「Click here to add an action」をクリックし、「Element Actions」から「Hide」を選択します。

「Element」に「Group Logged in」を選択します。

これにより、「Group Logged in」の表示・非表示の切り替えが可能になりました。

以上で、今回の実装は完了です。「Preview」ボタンをクリックし、テストを行ってください。

8. まとめ

最後に、今回のチュートリアルの流れをまとめます。

①  入力フォーム及び送信ボタンを作成する
②  新規登録「 Workflow」を作成する
③  ログイン 「Workflow」を作成する
④  ログインユーザーのメールアドレスを表示する
⑤  ボタンを配置し、ログアウト「Workflow」を作成する
⑥  グループの表示・非表示 切り替えを設定する

今回は、新規ユーザー登録、ログイン、ログアウトの基礎を学びました。
しかし、このチュートリアルで実装したのは最低限の機能であり、本格的なログインシステムを構築するためにはまだまだ学習が必要です。

引き続きBubbleの理解を深めていきましょう！
次のチュートリアルはこちらです！