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

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

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

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

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。

目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

 無料で相談する →

実装イメージ

実装方法その1:Sign the user upのOnly when

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

  1. UserのPrivacy設定をする
  2. 新規登録ボタンのWorkflowのSign the user upにOnly whenを設定する
  3. Step2にGo to pageを設定し、①と同じOnly whenの設定をする
  4. ユーザー名入力欄の下にアラート文を設置する

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で表示非表示を制御します。

Layout設定
  • This element is visible on page loadのチェックを外す
  • Collapse when hiddenにチェックを入れる
Conditonal設定
  • Do a Search forでnameの値がお名前入力欄の値と同一のユーザーの数をカウントし、0より大きい(既存である場合)に、This element is visibleにチェックを入れることでアラート文を表示させる
  • Search for Users:count > 0
  • name = Input お名前’s value

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

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

実装方法その2:Terminate this workflowを使う

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

  1. 新規登録ボタンのWorkflowのStep1でTerminate this workflowを設定する
  2. Step2にSign the user upを設定し新規登録処理を行う
  3. Step3にGo to pageを設定しホーム画面などに遷移させる

新規登録ボタンの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の処理が実行されます。

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

  • Do a Search forで条件に合ったユーザーの数を取得する
  • 絞り込むユーザーの条件は、nameが、新規登録フォームのお名前入力Inputの値と同一であること
  • 条件にマッチするユーザー数が1人でもいる場合、つまり0より大きいときにTerminate this workflowする
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を使ってホーム画面などに遷移させてあげましょう。お疲れ様でした。

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次