こんにちは！開発部の米村です。
bubble公式チュートリアルにあるユーザーの新規登録とログイン機能を作っていきます。
完成物はこちらです。
前回の記事をまだご覧になっていなければ、どうぞご覧ください。
Bubbleのチュートリアルをやってみた:データを保存してマップへピンを表示してみよう -1
目次
見た目を作る
- まず左の「Input forms」から「Input」を選択し、右側の空白の好きな箇所をクリックしましょう。すると入力の枠が表示されます。
- Placeholderに「Email」と入力し、ここにはメールアドレスが入りますという説明書きを追加します。
3. メールアドレスと同じやり方で、パスワードの入力フォームも追加します。
4. 会員登録「Sign up」ボタンとログイン「Log in」ボタンを追加していきます。左側の「Visual elements」から「Button」を選択し、右側の好きな箇所をクリックして、ボタンを追加します。ポップアップウィンドウのAppearanceに「Sign up」と入力し、ボタンに「Sign up」と表示させましょう。
5.「Sign up」ボタンと同じ方法で、「Log in」ボタンも追加しましょう。
新規登録機能を作る
6. 見た目ができたので、Sign upボタンを押した時にユーザーが新規登録できるという機能を追加していきます。Sign upボタンをクリックして出てくるポップアップウィンドウから「Start/Edit workflow」をクリックします。
7. すると、左サイドバーの「Design」から「Workflow」に移ります。「Click here to add an action..」をクリックしてください
8. 「Sign the user up」をクリックし、新規登録の機能を追加します。このようにすでにオプションとして用意されているので、選択していくだけで機能が追加できます。
9. ポップアップウィンドウのEmail欄に「Input」といれると「Input Email」「Input Password」と候補が出てきます。
上記の候補は先ほど「Design」で見た目を作った時に設定した「Input Email」「Input Password」のことです。
10. まず候補に挙がった「Input Email」をクリックします。すると、さらに候補が出てきます。今回は「’s value」を選択します。
11. 同じやり方で、Passwordの方もvalueを設定します。
ところで、なぜEmail’s value, Password’s valueを設定する必要があるかと言うと、メールアドレスとパスワードの値をデータベースに送って保存するためです。
保存しておくことで、次回ログインする時は、データベースを参照して、ログイン画面でこの人が入力した値は以前新規登録した人のメールアドレス及びパスワードと合致しているかをチェックしてくれます。
これで新規登録の機能は終わりです。
ログイン機能を作る
12. 続いて、ログイン機能を追加します。サイドバーの「Design」をクリックし、見た目の画面に戻ります。「Log in」ボタンをクリックし、ポップアップウィンドウの「Start/Edit workflow」をクリックします。
13. 「Workflow」の画面に遷移するので、新規登録の時と同じように、「Click here to add an action..」を選択し、今度は「Log the user in」を選択します。
14. これは、先ほど設定した新規登録機能です。
15. 新規登録同様、Email欄に「Input Email’s value」、Password欄に「Input Password’s value」を設定します。
これでログイン機能も終わりました。
ログイン後に登録したメールアドレスとログアウトボタンを表示する
16. ログインした後、実際にログインできたか確認するために、ログイン後に表示するものを用意したいと思います。「Design」に戻り、左側の「Containers」から「Group」を選択します。そして、右側の好きな余白部分に枠線を引きます。こちらの枠内をログイン後に表示する部分にしていきます。
17. 続いて左側の「Visual elements」から「Text」を選択し、⑯で作った枠内にテキストボックスを配置します。
18. テキストボックス配置によって、表示されるポップアップウィンドウのAppearenceの「Insert dynamic data」をクリックします。
19.「Current User」が候補で出てくるので選択し、続いて候補に出る「’s email」を選択します。
20. サイドバー「Visual elements」の「Button」をクリックし、ログイン後の枠内にLog outボタンを設置します。
21. ログアウトの機能を追加します。20の「Log out」のポップアップウィンドウの「Start/Edit workflow」をクリックします。
「Workflow」の画面に移り「Click here to add an action..」から「Log the user out」を選択しましょう。
22. ログイン後にメールアドレスとログアウトボタンを表示するという機能を追加します。「Click here to add an event..」をクリックし、「General」の「User is logged in」を選択します。これで「ユーザーがログインしている状態で」という条件ができました。
23. 「ユーザーがログインしている状態で」何をするかということで、「Click here to add an action..」をクリックし、「Element Actions」の「Show」を選択します。
24. 「Show」のElement欄で候補が出てきますが、「Design」画面で作ったログイン後に表示する枠内である「Group B」を選択します。「Group B」をホバーすると、表示内容をプレビューで出してくれます。
ログアウト後に登録したメールアドレスとログアウトボタンを非表示にする
25. 最後にログアウト後は、メールアドレスとログアウトボタンを非表示にするという機能を追加します。「Click here to add an event..」をクリックし、「General」の「User is logged out」を選択します。これで「ユーザーがログアウトしている状態で」という条件ができました。
26. 「ユーザーがログアウトしている状態で」と言う条件で、非表示したいので、「Click here to add an action..」をクリックし、「Element Actions」の「Hide」を選択します。
27. 「Hide」のElement欄で候補が出てくるので、ログイン後に表示する枠内である「Group B」を選択します。
プレビューで動作を確認する
28. これで一通り設定が終わったので、実際の動きを確かめるため右上の「Preview」をクリックします。
29. メールアドレス、パスワードを入力し、Sign upボタンをクリックすると、下にGroup BのメールアドレスとLog outボタンが表示されます。Log outボタンをクリックすると、GroupBのメールアドレス、Log outボタンが非表示になります。
これで完成です！おつかれさまでした。