【Adalo】ログイン/ログアウト機能の作り方

【Adalo】ログイン/ログアウト機能の作りかた

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

EPICs合同会社です!

今回はノーコードツール【Adalo】で「ログイン/ログアウト機能の作り方」を解説しています!

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

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

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

目次

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

 無料で相談する →

実装手順

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

  1. ログインページにFormを配置する
  2. Formの変更とアクション設定
  3. ログアウトボタンの配置
  4. ログアウトのアクション設定

ログインページにFormを配置する

まずはログインを行うページにFormを配置していきます。

※Adaloはプロジェクト立ち上げ時に、ログインページが自動で作成されているのでそちらを使用しても問題ありません。

Formの変更とアクション設定

次にFormの表示やアクション設定を行っていきます。

まずはFormを選択して、下記の設定をしましょう。

・Which data collection→「User」
・What do you want the form to do→「Log The User In」

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

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

今回はメールアドレスとパスワードでログインを出来るように設定したいので、下記の2つのみを表示させます。

・Email
・Password

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

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

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

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

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

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

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

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

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

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

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

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

「Submit button」を開いたら、「text」を「ログイン」などの文言に変更。

ログイン後のアクションに関しては「Link」→「HOME」が自動的に設定されているかと思いますが、されていない場合は「ADD ANOTHER ACTION」→「Link」→「HOME」を設定しましょう。

ログイン機能はこちらで完了です!

ログアウトボタンの配置

ここからはログアウト機能の実装方法をお伝えします。

まずはログアウトをさせるためのボタンやアイコンを設置しましょう。
※設置するものはボタンでもアイコンでも構いません。
※今回は画面右上に配置をしました。

ログアウトのアクション設定

配置した要素を選択して「ADD ACTION」からアクション設定をしていきましょう。

設定すべきアクションは下記の二点です!

①ログアウトをさせるための設定
「ADD ACTION」→「More」→「User Login」→「Log out」
②ログアウト後にログイン画面に遷移させるための設定
「ADD ACTION」→「Link」→「login(ログインする画面)」

◇ログアウトの設定画面

◇ログイン画面への遷移

これでログアウト機能の実装も完了です!

最後にプレビューでログイン及びログアウトが無事にできるか試してみましょう!

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

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

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

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

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

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

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

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

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

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