プログラミング言語を使ったコーディングをせずにアプリを作れるノーコードツール。
その中でもやや上級者向けのツールがBubbleです。
Bubbleで以下の条件を持つ新規会員登録ページ（サインアップ機能）を作る方法をご紹介します！
- アバター画像（無しの場合はデフォルト画像）
- ユーザー名（他のユーザーと重複不可）
- メールアドレス
- パスワード（桁数や英数字などの条件付き）
データベースの構築
まずは、登録してほしいデータを入れるためのデータベース構築が必要です。
フィールド追加
Userテーブル（DataType）に必要なフィールドを追加していきます。
会員登録機能を作ろうとしている場合は、表示用のユーザーネームは必須かと思います。
DataType「User」はデフォルトで作成済みのはずで、そのFieldに「Name」をtext型で追加します。
アバター画像も追加する場合は「Avatar」をimage型で追加します。
新規登録ページの画像アップロード機能でデフォルト画像を設定することになります。
よってここではデフォルト画像は不要です。
ユーザーは画像を登録できず、全員一律で同じ画像を設定する場合のみここで設定します。
AvatarのdefaultのUploadをクリックすると、画像選択ダイアログが出現します。
そこで選択した画像が、デフォルト画像として使用されます。
プライバシー設定
これは任意ですが、他人と重複するユーザーネームを入力されたらエラーにします。
このプライバシー設定は、ユーザーネームの重複を不可とする場合のみ実施してください。
Bubbleではユーザーを一意に特定できる方法がデフォルトで用意されているので、ユーザーネームは重複しても問題ありません。
データベースのプライバシー設定を変更し、ユーザーネーム一覧をどこからでも取得できるようにします。
“Privacy”タブでDataType「User」を選択し、次のように変更します。
- Everyone elseの”View all fields”のチェックを外す
- Everyone elseの”Name”をチェック（Name 部分は前項step1で設定した名称）
- veryone elseの”Find this in searches”をチェック
新規ユーザー登録ページの作成
新規ユーザー登録用のページを作成します。
新しいページに必要なエレメントを設置してから、各エレメントに必要な処理を実装する流れです。
見た目の作成
とりあえず細かい処理は後回しにして、先に見た目を整えていきます。
空のページを新規に作ります。
Bubbleの左上にある「Page: index」のようなコンボボックスを選択し、「Add a new page…」をクリックします。
するとダイアログが表示されます。
Page nameには「regist」や「signup」など登録だと分かるようなページ名を付けます。
Clone fromは空欄のままでCreateします。
次のステップ以降を順に実施してエレメントを設置します。
グループに関しては任意ですが、グループ化しておくと編集が簡単です。
特に、グループのレイアウト中央揃えにすると見栄えも良くなります！
Textエレメント「プロフィール写真」
PictureUploaderエレメント
PictureUploaderエレメントの”Appearance”タブにある”Static image”をクリックすると、画像選択ダイアログが表示されます。ここで設定した画像がデフォルト画像として登録されます。
PictureUploaderエレメントの角を丸くしたい場合は、”Appearance”タブにある”Roundness”に（20～150くらいの範囲でお好み）値を設定しましょう。
Textエレメント「ユーザー名」
Inputエレメント
【任意】Textエレメント「このユーザー名はすでに使われています。（など）」
Inputエレメントの”Appearance”タブにある”This input should not be empty”にチェックを入れます。
この設定にチェックを入れると、空欄はエラーとして扱います（入力必須扱い）。
また、現段階では注意メッセージ（既に使われています、など）は見えたままで問題ありません！
Textエレメント「ユーザー名」
Inputエレメント
メールアドレスも基本的には入力必須かと思うので、Inputエレメントの”Appearance”タブにある”This input should not be empty”にチェックを入れます。
もしメールアドレスとは別の項目を設けて、そちらを重要視する場合は、未チェックでもなんとかなります。
（DataTypeのUserにデフォルトでEmailの項目があるため、emptyだとうまく動作しない機能もあります。その場合は専用対策が必要になります。）
Textエレメント「パスワード」
Inputエレメント
【任意】Textエレメント「××桁以上の文字列にしてください。（など）」
Inputエレメントの”Appearance”タブにある”This input should not be empty”にチェックを入れます。
この設定にチェックを入れると、空欄はエラーとして扱います（入力必須扱い）。
こちらも、現段階では注意メッセージ（×桁数以上にして、など）は見えたままで問題ありません！
最後にButtonエレメントを配置します。
ボタンの表示名称は「新規登録」など機能が分かりやすいように命名しましょう。
ページの背景色や各エレメントのPlaceholderなど、見た目をここで完全に整えます。
特に文字色とエレメント間のマージン（間隔）を設定しましょう。
文字色は背景色によりますが、注意メッセージは赤や黄色など気を引く色に、それ以外の文字は白や黒など強すぎない色にすると良いでしょう。
マージンに関しては、まず下層の方から設定します。
※ページの上にグループがあり、グループの上に各エレメントがあるので、最下層はページになります。
“Layout”タブの”Apply gap spacing between elements”にチェックを入れます。
Row gapに値を設定すると、そのエレメント上に配置された各エレメント間のマージンが設定されます。
その後、上位層のエレメントに対してマージン（Margins）に値を入れて見た目を完成させましょう。
Workflowや入力条件などの作成
次に各エレメントに処理を実装していきます。
Buttonエレメント（新規登録ボタン）にWorkflowで「Sign the user up」と「Go to page」を設定します。
「Sign the user up」は、各Inputエレメントに入力された値を設定していきます。
EmailとPasswordはデフォルトで設定欄があります。
NameとAvatarは「+ Change another field」ボタン押下して設定欄を追加してください。
「Go to page」には、サインアップ完了後に遷移させるページとそのページに渡すデータを指定します。
ここは各自異なるため、ご自身のアプリに応じて設定してください。
他人と重複するユーザーネームを入力されたらエラーにします。
入力（inputエレメント）ではなくエラーメッセージ（textエレメント）に対して条件を追加します。
”Appearance”タブの”Content format”にTextを設定します。これは通常の文字列入力の許可です。
”Layout”タブの”This element is visible on page load”のチェックを外します。これで画面起動時に非表示になります。
次に「Collapse when hidden」にチェックを入れます。
これで非表示時は不自然な空白が空きません。
続いて、”Conditinal”タブに以下の順で設定していきます。
- When欄に「Do a search for」を設定
- Serch for UsersダイアログのTypeにUserを設定
- Serch for Usersダイアログの「+ Add a new constraint」ボタンを押下
- Serch for Usersダイアログの条件に「Name = Input ●×■▲’s value」を設定（●×■▲部分はInputエレメントのプレースホルダーに設定した文字列です）
- Serch for Usersダイアログをクローズ
- When欄に「:count」を設定後に「>」を選択、さらに0を入力
Email欄にメール形式以外の文字列が入力されたらエラーにします。
Bubbleでは”Content format”にEmailを指定するだけで、自動的にメール形式チェックをしてくれます。
強力なパスワードを入力させて、セキュリティを向上させます。
Bubbleでは”Content format”にPasswordを指定するだけで、自動的にパスワードエラーチェックをしてくれます。
ただし、パスワードエラーと判定する条件はこのInputエレメントではなく、アプリ全体の設定となります。
全体設定の”General”タブにあるPrivacy & Security欄から、パスワードポリシーを決めます。
条件は組み合わせも可能で、最強のパスワードとして英字（小文字大文字両方含む）と数字と記号が全て入力されて且つ●桁以上の文字列を強要することもできます。
- Password minimum length
-
パスワードの最低文字数です。当記事では8文字に設定しています。
- Require a number
-
パスワードに必ず数値が含まれていないとエラーになります。（英数字混合）
- Require a capital letter
-
パスワードに大文字のアルファベットが含まれていないとエラーになります。（大文字小文字区別）
- Require a non-alphanumeric character
-
パスワードに英数字以外の文字（つまり記号）がが含まれていないとエラーになります。（英字記号混合）
完成！
新規ユーザー登録機能の作成はこれで終わりです。
いろいろ操作して、動作を確認しましょう！
なお、エラー文字列を作っていない入力項目もあると思います。（メールアドレスなど）
Bubbleデフォルト機能のエラーは、ポップアップで出ることもありますので心配しないでください。
注釈や参考記事など
- 対象にマウスオーバーした際に表示される注釈や補足情報のこと。 ↩︎
コメント