ノーコード bubble 解説_ログイン処理 ユーザー登録の設置
新規登録ボタンやログインボタンを押すと
メールアドレス、パスワードなど入力をする窓が出て登録（又はログイン）完了、Bubbleだとそれも簡単に設置出来ます◎
目次
登録、ログインボタンを設置する
まずはUI Builder のButtonでボタンを作ります。
登録、ログインはリユーザブルエレメントに既にある
Reusable elements の中に既にあるものを日本語にしたりデザイン変更して使います◎ Signup/Login Popup を選択＞画面上にクリックします。
こんな感じです。Sign up 以外の画面上をクリックすると元の画面に戻ります。ひとまず戻して「新規登録」と「ログイン」のワークフローを設置しようと思います。
ボタンのワークフローを設置する
「新規登録」ボタンをクリック＞Start/Edit workflow
When Button 新規登録 is clicked が濃いグレーで選択された状態になっています。Click here〜＞ Element Actions＞Show で、
「新規登録」ボタンが押された時に何をShow したいかなのでSignup/Login〜を選びます。
「ログイン」ボタンにも同様の事をします。それが済んだらPreview で実際の表示を確認、
ボタンを押してみると、
どちらを押してもSign up （登録）でログインが表示されないよ？
そうなのです。それを今から修正します◎
左上、現在index担っている所をSignup/Login Popup に切り替えます。
Elements tree を見ると上からログイン、登録、パスワードを忘れた時用３つのポップアップが用意されているのが分かります。
下の２つは目のマークで見えない状態になっているね
なので例えばGroup Sign up の横の目をクリックすると透けて見える状態に。
これからの作業を分かりやすくする為に各ポップアップのタイトルだけ日本語にしました。
Signup/Login Popup のワークフローを設定する
indexに戻ってWorkflow を開きます。
「Button ログイン is clicked 」を選択します。step 1 は先程設定したワークフローです。今からstep 2 を作ります。Click here〜をクリック＞Element Actions＞Set state（セットステイト、状態を設定する）
Element にSignup/Login〜を選びます。
すると下の項目がこのように変化するのでCustom state ＞modeを選択、Value にはlogin と入力します。
When Button 新規登録 is clicked にも同様のワークフローを追加します。
「When Button 新規登録〜」をクリック、
Click here 〜＞Element〜＞Set state
Element にSignup〜を選択
Custom〜はmode、Valueにはsignupと入力します。
さっきはloginだったけど今回はsignupだね
実際の表示を見てみます。
「新規登録」「ログイン」ボタンそれぞれをクリックして、、
パスワードを忘れた時のメール文の変更
パスワードを忘れた方にパスワード変更メールを送る設定も今回同時に出来ています。しかし文面が英語なので日本語に直す場合の説明です。
ログインボタンを押してパスワードを忘れてRESET PASSWORD を押すと
登録したメールアドレスにBubbleからメールが届きます。
デフォルトのタイトルと内容です。「ここでリセットする」で新しいパスワードを作れました。
このタイトルと文面を日本語に変更します◎
左上、Signup / Login Popup にしてWorkflowタブをクリックしてこのページを開きます。
四角いブロックWhen Button SEND RESET〜をクリック＞下に表示されるstep1 Send password reset emailをクリックします。Subjectタイトル やBodyメールの中身の文面を、
日本語に変更しました。
ログインボタン＞RESET PASSWORD＞パスワードの再発行を押すと、日本語に修正したこのようなメールが届きました◎
Signup/Login Popup デザインの変更
英語を日本語に直すだけでも使えます。ボタンにはホバー効果も付いています。
でも青系だからサイトのイメージに合わないなぁ
そんな方はちょこちょこっとデザインの変更を。
右がデフォルトで左はサイトに合わせて変更したものです。「登録する」ボタンをヘッダーに似た濃いグレーに、メールアドレスなどの枠（フォーカス時も）は画像にあるファスナーの金のような濃いクリーム色にしました。
サイトの中にある印象的な色やブランドカラーを使う事で、ポップアップだけが別物にならず一体感が出ます◎
なるほど簡単だね
Group Sign up の変更をしてみます。左の「＋」マークをクリックすると、
中に収まっている項目「子」（Group Sign up が「親」）が見れます。（「新規登録」は「Sign up 」だったのをこのページの最初の方に変更しました）
「アカウント作成（新規登録）」と変更してStyleを空欄にし、下に出てくる色を＃000000黒に変更しました。
次の項目Email はメールアドレスとしました。ちなみにここはContent format がEmail になっているので「〇〇＠〇〇」のようにメールの体裁をとっていないと、
このように注意されます。
ここにはデフォルトでStandard Input と言うスタイルが適応されていますが、Edit style からこのStandard Inputスタイルを変更する事も出来ます。
枠は透明に近い黒だったので不透明で濃いクリーム色に。
Conditional のタブをクリックして条件も変更します。hoverマウスホバーした時の枠の色です。こちらも濃いクリーム色にしました。
同じ色だとホバーしても分からないのでは？
ホバー前の線の太さは１こちらは２、そこで変化を付けました◎
Conditional の横の（３）はhovered、focused 、isn’t valid（無効です）の３つの条件をここで決めている事を表しています。isn’t valid（無効です）はメールアドレスを記入せずにSignup、登録しようとした時に表示される条件です。
「登録する」ボタンもEdit style でSecondary Buttonを変更してしまいます。
勿論Add style から新しいStyle を作ってもOKです
このボタンは条件がホバーした時の１つだけなのでConditional (1)ですね。ホバーも何も付けたくなければ上の方、remove condition で消せます。Boxshadow など細かい条件がいらない場合もゴミ箱マークで削除出来ます。
逆にもっと色々付けたければ下のDefine another condition で追加します。するとConditional (2)となります。
こんな感じで元のデザインを利用しながらサイトオリジナルに◎
