【Adalo】新規登録・サインアップ機能の作り方!

【Adalo】新規登録機能の作り方

こんにちは!ノーコードツール特化で開発を行っております。

EPICs合同会社です!

今回はノーコードツールAdaloを使用した「新規登録・サインアップ機能の作り方」を解説していきます!

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

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

目次

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

 無料で相談する →

実装イメージ

実装手順

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

  1. データベースの用意
  2. Formの配置
  3. Formの設定

データベースの用意

まずは新規登録時に入力をしてもらいたいデータ項目を用意しましょう

今回は下記のデータを設定します

PROPERTY NAMEDATA TYPE
User name最初から準備されています
Email最初から準備されています
Full Name最初から準備されています
Password最初から準備されています
Birth day(生年月日)date

Formの配置

次に画面上にFormを配置します。

※Adaloではプロジェクトを立ち上げた時点で、新規登録用のスクリーンとFormが用意されているのでそちらを使用しても構いません。

Formの設定

Formを選択し、表示データとアクションを下記のように設定します

Which data collectionUser
What do you want the form to doSign the User up

次にForm内に表示させる項目を設定します。

「FIelds」を開き、表示データの追加や削除を行いましょう。

今回は下記の4つを表示させたいと思います。

・User name
・Email
・Password
・Birth day(生年月日)

不要なデータがある場合は「ゴミ箱のアイコン」を押して削除し、

追加したいデータがある場合は「ADD VISIBLE FIELD」をクリックして追加したいデータ項目を選択しましょう。

表示項目が確定したら、細部の設定を行います。

Fieldsに表示されているデータ項目をクリックし、「Label」や「Placeholder」の設定を行っていきます。

それぞれの項目の意味は下記です。

Labelインプット上部に表示されるテキスト
Placeholder初期状態でインプット内に表示されるテキスト
input type一行のみの入力か複数行の入力を可能にするかの設定
Required Error Text必須入力にするか?
必須入力の場合、空白の状態でボタンが押された際にどのようなエラー文言を表示させるか?

今回は全ての項目を「Input Type」は「Single line」。

「Required Error Text」は「ON」にして「こちらの項目は必須入力です」というエラーが出るように設定します。

「Label」と「Placeholder」は画像の通りです。

参考としてUsername部の画像を添付します。

最後に「Submit button」の設定をしましょう。

「Submit button」は最下部のボタンを設定をする項目になります。

「Submit button」を開いたら、「text」「新規登録」などの文言に変更。

続いて「ADD ANOTHER ACTION」でボタンをクリックした際のアクションを設定します。

今回は新規登録をしたらHOME画面に飛ぶようにしたいので、

「ADD ANOTHER ACTION」→「Link」→「HOME」を選択します。

これで新規登録に必要な設定は以上です!

最後にプレビューで新規登録が出来るか確認しましょう!

情報を打ち込み、「新規登録ボタン」を押したらホーム画面に遷移。

登録データがUserデータに追加されていれば正常に登録が出来ているかと思います!

いかがでしたでしょうか?

本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。

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

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

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

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

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

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

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

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

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