Bubbleでログイン機能を実装する方法

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

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

ノーコードツール「Bubble」でログイン機能を実装する方法をサクッとご紹介。

入力項目は、メールアドレス・パスワードの2項目。シンプルなログイン画面です。

Bubbleを触り始めの方のログイン機能実装の助けになれば幸いです。

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

なお、ノーコードBubbleの概要については以下の記事で解説しています。

【公認代理店が解説】ノーコードツールBubbleとは?使い方やデメリット、料金を解説

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

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

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

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

実装イメージ

メールアドレスとパスワードを入れて、ログインボタンをクリック。ログインに成功したらhome画面へ遷移するイメージです。

実装手順

ログインページは以下の手順で実装します。

  1. loginページを作る(メールアドレス・パスワードの入力欄とログインボタンを設置)
  2. ログインボタンに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を指定してあげます。

【日本最大級のノーコード開発実績】
無料でアプリ・システム開発の相談を受付中

    氏名

    法人名

    メールアドレス

    電話番号

    お問い合わせ詳細 ※分かる範囲でご記入ください

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

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