１）Bubbleでメールによるユーザー登録を実装する方法ほとんどのWebサービスやアプリに実装されているログイン機能ですが、もちろんノーコードのBubbleにも実装されています。今回に関しては、・前編の記事でログインするユーザーをまずは登録する機能の説明・中編の記事で登録時のパスワード強化やメール認証等の細かい実装・後編の記事でメールアドレスでのログインを実装する方法の説明というようにそれぞれ分けて説明しています。目次📝ユーザー登録の基本概念ユーザー登録は画面に入力フォームやボタン、そして登録時の処理をワークフローを実装することで登録ができるようになります。まずは分かりやすい画面に入力フォーム、ボタンを配置するところから解説していきます。📺画面とエレメントの配置画面を作成します。Add a new pageをクリックして、sign_upと入力し、createてください。clone fromは未入力で大丈夫です。エレメントというのは入力フォームやボタンなどの各要素のことです。左側に項目から選択できます。選択してドラッグ&ドロップ（クリックしたまま置きたい場所に配置する）と表示がされます。２）メールアドレス、パスワード入力画面の作成📝入力エレメントの追加方法今回はシンプルにメールアドレスとパスワード（確認のための再入力あり）だけで実装します。左の項目Input fromsから「Input」という項目をエディタ上に３つ並べて、Placeholder（入力前に薄い文字として表示される部分）に、それぞれの項目名を入れてください。きれいにレイアウトを並べる方法については別途記事で説明しますので、今回は並びは気にせず３つ項目を設定してください。３つ並べることができたら、左側のVisual ElementsからButtonを選択し、表示名（Label）を「登録」にしましょう。☑️フォーマットの設定とエラーチェックメールアドレスはメールアドレス用のフォーマット（xxx@xxx.xxのように@や.が含まれる等）が存在します。Bubbleでは入力項目が何であるかを指定することでフォーマットに合わない場合のチェックをしてくれます。メールアドレスには、Content formatからEmailを選択してください。パスワードとパスワード再入力のフォームには同じくContent formatからPasswordを設定してください。今回は３項目とも必須で入力してもらわないといけない項目になるため、「This input should not be empty」にそれぞれチェックを入れてください。これで未入力を防げます。３）ユーザー登録機能の実装エラーメッセージの表示などの細かい処理はありますがそちらは後ほど説明しますので、先にユーザーを登録する部分を実装していきましょう。🤖クリック時のワークフロー処理エディタで先程の登録ボタンをクリックすると「Add workflow」というボタンが出るので、そちらをクリックしてください。ワークフローと呼ばれるボタンを押した時に実装すべき処理をここで定義します。下記のようにactionの部分（点線）をクリック、Sign the user upを選択してください。パスワードの再入力をするため「Require a password comfirmation」にチェックを入れてください。Emailの入力欄をクリックし、「Input メールアドレス」を選択し、その後「's value」を選んでください。これは何をしているかというと、先程設定した入力項目から値を取得しています。Passwordには「Input パスワード」を選択し、その後「's value」を選んでください。Comfirmationには「Input パスワード再入力」を選択し、その後「's value」を選んでください。☑️ユーザー登録の動作確認ここまでできたらpreviewをクリックして画面を表示し、メールアドレス、パスワード、パスワード再入力を入れて登録がされるか試してみましょう。正しく設定できていれば、Userというテーブルにデータが登録できます。左端の上から３つ目のデータベースのアイコンをクリックし、All Usersを選択してください。ちなみにBubbleではUserに登録したパスワードは、セキュリティの観点から表示されていませんし、見ることもできない仕様になっています。４）エラーメッセージの表示登録ボタンを押した時に、入力内容に問題があった場合、画面上部にエラーメッセージを表示するようにします。📝メッセージエレメントの配置左側のVisual ElementsからTextを選択し、画面の上部に配置してください。色をFont colorで赤になるよう設定してください。このままだと常にこのメッセージが表示されてしまうため、Layoutのタブをクリックして、「This element is visible on page load」のチェックを外します。更に表示していない時にはスペースを詰めたいので「Collapse when hidden」にチェックを入れてください。💬エラーメッセージの出しわけ今回の登録処理でエラーにしたいパターンは以下の４通りです。１：メールアドレスの形式が正しくない（未入力含む）２：パスワードが未入力３：パスワード再入力が未入力４：パスワードとパスワード再入力が一致しない４は先程のワークフローの「Sign the user up」でチェックが行われるため１〜３をチェックしてエラーメッセージを出します。（※４のエラーメッセージは英語になっているため後続の記事で日本語にする方法を説明します）ここからは少し難しいですが、Conditionalというタブにどのような条件の場合にメッセージを出すか設定して、メッセージの表示・非表示や文言の設定を行います。Conditionalタブで「Define another conditon」をクリックして条件を入れます。ワークフローでやったように「Input メールアドレス」を選択し、「isn't valid」を選んでください。これがメールアドレスの入力値がエラーの場合という条件になります。その際には「メールアドレスの形式で入力してください」というメッセージを出したいので、Select a property to change when true から「Text」と「This element is visible」の２つを選び下記のように設定してください。上記の要領でパスワードとパスワード再入力も設定してください。正しく設定できていれば、下記のようにメッセージが表示されます。もし複数エラーがある場合に全て表示したいようでしたら、先程のエラーメッセージのTextを３つ分作って、それぞれに条件を設定し表示すると良いかと思います。５）登録完了後のリダイレクト設定👉ユーザー登録完了後の遷移先画面の作成ここまで来ればあと少しです！ユーザー登録後には通常ログイン後の画面に遷移することが多いかと思いますので先程のワークフローに処理を追加します。登録ができたら、indexに遷移させるように実装します。分かりやすいようにindexに「登録完了」という文字を設定しておきます。左側の上から２番目のワークフローのアイコンを選択し、先ほどの登録ボタンの処理を表示します。登録後に画面遷移させたいので、step2に「go to page」のactionを設定します。遷移先（Destination）にindexを設定してください。Previewしてユーザー登録後にindexのページが表示されば完成となります。次回の中編の記事ではパスワード強化方法、メッセージの日本語化、メール認証の方法といった部分を記載します。