NoCode Ninja@Bubbleを中心にプロトタイプの制作過程をアウトプット

プログラミング不要の「NoCode」について発信します。作ってみたいサービスや企画などありましたらDMくださいー。

【Bubble】Element templatesを改めて確認しよう 2、「Log in」「Reset Password」

f:id:nocodejp:20200220194048p:plain

こんにちは。NoCodeNinjaです。

今回は、前回の続きで「Log in」と「Reset Password」を紹介します。

前回はこちら

nocodejp.hatenablog.com

 

今回はその続きで、Element templatesにある「Log in/Reset Password」です。

 

f:id:nocodejp:20200220172002p:plain

f:id:nocodejp:20200220194659p:plain

 

NoCodeBankでもアレンジして採用しています。

 

f:id:nocodejp:20200220172423p:plain

f:id:nocodejp:20200220194829p:plain

前回同様、既に用意されているのでそのまま使うわけですが、機能としてきちんと確認しておくと後々に応用が利いたりとメリットがあるので今回も紹介します。

理解しておいた上で使うほうがやはり良いのは、何においても言えますよね。

またBubbleがあらかじめ作っているということはOfficialの作り方を覗けるということでもあるので、App作りの一つの物差しにもなるかと思います。

そういう視点でも、意味があります。

それでは、いってみましょう。

 

構成しているElement(Log in/Reset Password)

 

f:id:nocodejp:20200220174844p:plain

Log in

 

f:id:nocodejp:20200220182354p:plain

Reset password

 

前回同様、基本的にシンプルですので特徴のあるところをとらえつつ見ていきましょう。

2つとも構成している各Elementの値は同じです(サイズや位置を除く)。

 

Input

f:id:nocodejp:20200220180525p:plain

  1. Input全てに「This input should not be empty」のチェックを入れている
  2. 「Minimum width」は「20」
  3. 「Apply a max width when the page is stretched」にチェックを入れており、値「150」

前回の「Sign up」と値がほとんど同じです。統一感から考えると当然ではあります。

 

Text

f:id:nocodejp:20200220180643p:plain

 

こちらも特別変わった設定は無いのですが、前回同様

  1. 「Minimum width」は「20」
  2. 「Apply a max width when the page is stretched」のチェックは外している

というところです。

 

Button

f:id:nocodejp:20200220180957p:plain

 

  1. 「Minimum width」は「50」
  2. 「Apply a max width when the page is stretched」にチェックを入れており、値「100」

 

Shape

f:id:nocodejp:20200220181223p:plain

 

 

  1. 「Minimum width」は「20」
  2. 「Apply a max width when the page is stretched」のチェックは外している

 

Checkbox

f:id:nocodejp:20200220181521p:plain

 

こちらにはCheckboxが設置されています。

パスワード記憶用ですね。

  1. 「Minimum width」は「50」
  2. 「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

f:id:nocodejp:20200220184557p:plain

f:id:nocodejp:20200220184641p:plain


「Log in」Buttonをクリックすると各inputの値が入るという、もうお馴染みの仕様ですね。

ただ一点、「Stay logged in」の項目は「Checkboxにチェックが入っているとPasswordを記憶する」という指定がされています。

逆に言うと他のElementでも指定すればパスワード記憶を実行することが出来るわけです(Checkboxで十分ですけどね)。

 

When Button Forget password is clicked

f:id:nocodejp:20200220185412p:plain

f:id:nocodejp:20200220185451p:plain

 

そのままですが、パスワードを忘れた時のReset Passwordを表示させる挙動です。

至ってシンプルです。

 

When Button Send Reset Link is clicked

f:id:nocodejp:20200220185704p:plain

f:id:nocodejp:20200220185811p:plain

 

こちらはここにしかない機能ですので注目です。

パスワードリセットのメールについて設定していて、送り先はinputの値で珍しくはないのですが、パスワードリセットのメールの件名と内容はこちらで設定することになっています。

メールの文言自体を完全オリジナルで作れるわけです。

デフォルトは英語ですので書き換えます。日本語で書き換えるというと通常は「Settingsタブ」「Languages」から変更していたのですがこちらだけはここのみになります。

内容的に一度設定してしまえば特に変更することはない性質なのですが、もし変更したくなった時に「あれ?どこだったっけ」となると厄介ですので覚えておきましょう(筆者探したことがあります・・)。

 

When Button Switch to Sign up is clicked

f:id:nocodejp:20200220190652p:plain

f:id:nocodejp:20200220190913p:plain

 

こちらはSign upへの切り替えButtonを押した時の挙動です。

前回同様Set stateでSign upへ一発で行くように指示しています。

以上で、設定は全て紹介しました。

 

前回と違う点は正直そんなに多くないので、ここで筆者NoCodeBankのサイト用にアレンジした箇所を紹介しておきます。

実際に設置する際の参考にしていただけましたら幸いです。

 

NoCodeBankで追加した箇所

 

プロフィール画像Twitter URL

こちらをSign up時に設定しました。

DBへの値は他のinputの同様に設定すればOKです。

 

利用規約&プライバシーポリシー

こちら2点をリンクでjump出来るように設定→「Sign the user up」で「Checkboxにチェックが入っていたら動く」ようにWorkflowを設定しました。

f:id:nocodejp:20200220192151p:plain

 

reCAPTCHA

以前紹介したreCAPTCHAです。

詳しくは以下をご覧ください。

nocodejp.hatenablog.com

 

Twitterログイン

Twitterログインの機能も追加しています。

ちょっと複雑なのでまた別記事にて紹介します。

 

以上で、全て紹介しました。

 

まとめ

いかがだったでしょうか。

BubbleのOfficialで用意されているというところに意味があり、色々参考にすることが出来ます。

そこから自分で機能を追加したりということで、Bubbleではアカウント周りで大きく失敗することはあまり無さそうです。

もし使わない場合でも、WorkflowでAccountの選択肢が豊富に用意されています。

今回のことを理解出来れば、自分で一から作ることも簡単です。

色々試してみてはいかがでしょうか。

 

それでは、また!