【Bubble】Element templatesを改めて確認しよう 2、「Log in」「Reset Password」
こんにちは。NoCodeNinjaです。
今回は、前回の続きで「Log in」と「Reset Password」を紹介します。
前回はこちら
今回はその続きで、Element templatesにある「Log in/Reset Password」です。
NoCodeBankでもアレンジして採用しています。
前回同様、既に用意されているのでそのまま使うわけですが、機能としてきちんと確認しておくと後々に応用が利いたりとメリットがあるので今回も紹介します。
理解しておいた上で使うほうがやはり良いのは、何においても言えますよね。
またBubbleがあらかじめ作っているということはOfficialの作り方を覗けるということでもあるので、App作りの一つの物差しにもなるかと思います。
そういう視点でも、意味があります。
それでは、いってみましょう。
構成しているElement(Log in/Reset Password)
前回同様、基本的にシンプルですので特徴のあるところをとらえつつ見ていきましょう。
2つとも構成している各Elementの値は同じです(サイズや位置を除く)。
Input
- Input全てに「This input should not be empty」のチェックを入れている
- 「Minimum width」は「20」
- 「Apply a max width when the page is stretched」にチェックを入れており、値「150」
前回の「Sign up」と値がほとんど同じです。統一感から考えると当然ではあります。
Text
こちらも特別変わった設定は無いのですが、前回同様
- 「Minimum width」は「20」
- 「Apply a max width when the page is stretched」のチェックは外している
というところです。
Button
- 「Minimum width」は「50」
- 「Apply a max width when the page is stretched」にチェックを入れており、値「100」
Shape
- 「Minimum width」は「20」
- 「Apply a max width when the page is stretched」のチェックは外している
Checkbox
こちらにはCheckboxが設置されています。
パスワード記憶用ですね。
- 「Minimum width」は「50」
- 「Apply a max width when the page is stretched」のチェックは外している
Checkboxは文言用のTextも備わっているので、Minimumの値は大きめです。
以上、「Log in/Reset password」の全エレメントです。
Sign upの時と共通しているものがほとんどですね。
Workflowを確認
続いてWorkflowを見てみましょう。
When Button Log In is clicked
「Log in」Buttonをクリックすると各inputの値が入るという、もうお馴染みの仕様ですね。
ただ一点、「Stay logged in」の項目は「Checkboxにチェックが入っているとPasswordを記憶する」という指定がされています。
逆に言うと他のElementでも指定すればパスワード記憶を実行することが出来るわけです(Checkboxで十分ですけどね)。
When Button Forget password is clicked
そのままですが、パスワードを忘れた時のReset Passwordを表示させる挙動です。
至ってシンプルです。
When Button Send Reset Link is clicked
こちらはここにしかない機能ですので注目です。
パスワードリセットのメールについて設定していて、送り先はinputの値で珍しくはないのですが、パスワードリセットのメールの件名と内容はこちらで設定することになっています。
メールの文言自体を完全オリジナルで作れるわけです。
デフォルトは英語ですので書き換えます。日本語で書き換えるというと通常は「Settingsタブ」「Languages」から変更していたのですがこちらだけはここのみになります。
内容的に一度設定してしまえば特に変更することはない性質なのですが、もし変更したくなった時に「あれ?どこだったっけ」となると厄介ですので覚えておきましょう(筆者探したことがあります・・)。
When Button Switch to Sign up is clicked
こちらはSign upへの切り替えButtonを押した時の挙動です。
前回同様Set stateでSign upへ一発で行くように指示しています。
以上で、設定は全て紹介しました。
前回と違う点は正直そんなに多くないので、ここで筆者NoCodeBankのサイト用にアレンジした箇所を紹介しておきます。
実際に設置する際の参考にしていただけましたら幸いです。
NoCodeBankで追加した箇所
プロフィール画像、Twitter URL
こちらをSign up時に設定しました。
DBへの値は他のinputの同様に設定すればOKです。
利用規約&プライバシーポリシー
こちら2点をリンクでjump出来るように設定→「Sign the user up」で「Checkboxにチェックが入っていたら動く」ようにWorkflowを設定しました。
reCAPTCHA
以前紹介したreCAPTCHAです。
詳しくは以下をご覧ください。
Twitterログイン
Twitterログインの機能も追加しています。
ちょっと複雑なのでまた別記事にて紹介します。
以上で、全て紹介しました。
まとめ
いかがだったでしょうか。
BubbleのOfficialで用意されているというところに意味があり、色々参考にすることが出来ます。
そこから自分で機能を追加したりということで、Bubbleではアカウント周りで大きく失敗することはあまり無さそうです。
もし使わない場合でも、WorkflowでAccountの選択肢が豊富に用意されています。
今回のことを理解出来れば、自分で一から作ることも簡単です。
色々試してみてはいかがでしょうか。
それでは、また!