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

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

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

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

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

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

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

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ
【一分で完了】資料をダウンロード

実装イメージ

実装方法その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のノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

    氏名

    法人名

    メールアドレス

    電話番号

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

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