【Bubble】既存のユーザー名で新規登録を行えなくする方法

ノーコードツール「Bubble」で新規登録ページ（signup）を作るときに、すでに使用されているユーザー名で登録しようとしたときにサインアップ処理をさせない方法をご紹介。

今回は、Sign the user upのOnly whenなどで制御する実装方法と、Terminate this workflowで、ある条件にマッチしたときにサインアップ処理までさせないようにする実装方法の２つを紹介します。

動画解説バージョンはこちら！

無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

• ノーコード開発会社の選び方
• EPICsのノーコード受託開発の特徴
• 支援実績・事例集

氏名

法人名

メールアドレス

電話番号

送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

実装イメージ

実装方法その１：Sign the user upのOnly when

以下の手順で実装します。

Data Type「User」にtext型で「name」というフィールドを追加している前提で話を進めさせていただきますのでご注意ください。

UserのPrivacy設定をする

まず最初に、DataメニューでUserのPrivacy設定を行います。

上の画像のようにEveryone else（default permissions）のnameとFind this in searchesにチェックを入れます。

この設定を行わないと、Do a Search forのUserで登録されてる全ユーザーのデータから検索できないので注意しましょう。

新規登録ボタンのWorkflowのSign the user upにOnly whenを設定する

次に、サインアップページの新規登録ボタンにWorkflowで[ Sign the user up ]を設定します。

上の画像のように、Email、Password、nameに各Inputエレメントで入力された値をセットします。

そして、Only whenに以下を指定します。

Only when：Search for Users:each item’s name doesn’t contain Input お名前’s value

Step2にGo to pageを設定し、①と同じOnly whenの設定をする

WorkflowのStep2にGo to pageをたとえばホーム画面などをDestinationで設定してあげます。Only whenには①と同じ設定をします。

Only when：Search for Users:each item’s name doesn’t contain Input お名前’s value

ユーザー名入力欄の下にアラート文を設置する

最後に、ユーザー名の入力欄直下にアラート文（入力されたユーザー名が既存だった場合に表示させる）を設置します。エラーメッセージだとユーザーに直感的に伝わるよう、赤文字にすると親切でしょう。

アラート文はLayoutとConditionalで表示非表示を制御します。

あとおまけで、アラートテキストのテンプレは以下です。ご自由に活用してください。

このユーザー名はすでに使われています。別の名前を入力してください。

実装方法その２：Terminate this workflowを使う

以下の手順で実装します。手順①が今回の肝です。実装方法その１が主役でその２はおまけと考えていただければ。

新規登録ボタンのWorkflowのStep1でTerminate this workflowを設定する

サインアップページの新規登録ボタンにWorkflowでまず以下のように[ Terminate this workflow ]を設定します。

Only when：Search for Users:count > 0
name = Input お名前’s value

Only whenで指定する条件がTrueの場合はここでWorkflowが終了され、Step2以降には続きません。逆にOnly whenの条件がFalseのときはWorkflowが続行され、Step2の処理が実行されます。

ここでやっていることは以下です。

EPICs合同会社

毎回Do a Search forでデータベースから探しに行くのはパフォーマンス的にあれだと思うので、もう少し良い実装方法が分かったらまた追記しようかなと思います。

Step2にSign the user upを設定し新規登録処理を行う

ここからは普通の新規登録処理なのでサラッといきます。Step2で以下のようにSign the user upを設定します。

Email、Password、nameに各Inputエレメントで入力された値をセットします。

Step3にGo to pageを設定しホーム画面などに遷移させる

最後にStep3でGo to pageを使ってホーム画面などに遷移させてあげましょう。お疲れ様でした。