Bubbleでログイン機能を実装する方法
ノーコードツール「Bubble」でログイン機能を実装する方法をサクッとご紹介。
入力項目は、メールアドレス・パスワードの２項目。シンプルなログイン画面です。
Bubbleを触り始めの方のログイン機能実装の助けになれば幸いです。
動画解説バージョンはこちら！
なお、ノーコードBubbleの概要については以下の記事で解説しています。
【公認代理店が解説】ノーコードツールBubbleとは？使い方やデメリット、料金を解説
また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
実装イメージ
メールアドレスとパスワードを入れて、ログインボタンをクリック。ログインに成功したらhome画面へ遷移するイメージです。
実装手順
ログインページは以下の手順で実装します。
- loginページを作る（メールアドレス・パスワードの入力欄とログインボタンを設置）
- ログインボタンにWorkflowでLog the user inとGo to pageを設定する
loginページを作る
まず、ログインページを作ります。作業内容は以下のとおり。
- Textエレメントで「メールアドレス」「パスワード」というラベルを設置
- Inputエレメントでメールアドレス・パスワード入力欄を作成
- Buttonエレメントでログインボタンを作成
各InputエレメントのAppearanceの設定を行います。
Content formatをそれぞれ、
・メールアドレスは「Email」
・パスワードは「Passwrod」
に設定します。
ログインボタンにWorkflowでLog the user inとGo to pageを設定する
これで終いです。Buttonエレメントで設置したログインボタンにWorkflowでLog the user inとGo to pageを設定します。
Sign the user upの設定は以下のようにInputエレメントに入力された値をセットしてあげます。
- Email：Input メールアドレス’value
- Password：Input パスワード’s value
次にStep2でGo to pageを設定します。
最後に、ログイン後の遷移先のページ（Destination）とそのページに渡すデータCurrent Userを指定してあげます。
-
facebookで
シェアする -
Xで
シェアする -
LINEで
送る -
URLをコピーしました！
