ノーコーダーのつかさです。
前回「ログイン」機能の実装方法についてご紹介しました！今回はその続きとして「ログイン後の画面とログアウト後で画面を切り替える方法」についてご紹介したいと思います。
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
ログイン後に表示するエリアを作る
前回はログイン処理を行うところまで実装しました。今回はその続きから実装していきましょう！
まずContainersのGroupを下部に配置します。このGroupの表示、非表示をログイン、ログアウトで切り替えることが、この記事の目標です。
さらに①Textを下図のようにGroup内に配置します。表示は②Insert Dynamic Dataから③Current User’s emailを選んでください。ログイン中のユーザーのメールアドレスがグループ内で表示されるようになります。
ログアウト機能を実装する
さらに①ButtonをGroup内に配置して、②Appearanceから表示名をログアウトに変更します。変更できたら③Start/Edit workflowをクリックして、WorkFlow画面に移動しましょう！
ここまで来ればログアウト機能の実装も簡単です。
- Click here to ad an action
- Account
- Log the user out
の順で項目を選んでください。
ログイン、ログアウトで画面の表示、非表示を切り替える
いよいよこの記事の目標地点である「ログイン時にGroup Aを表示させる」という記述を行います。まずは「ユーザーがログインしている時」というイベントを追加しましょう。
- Click here to ad an event(イベントを追加する)
- General(一般的な操作)
- User is logged in(ユーザーがログインしている時の処理)
の順に選んでいきましょう。
イベントが追加できたら、それに紐付くアクションを設定します。今回はGroupを表示するという処理を記述します。
- Click here to ad an action(アクションを追加する)
- Element Actions(要素アクション)
- Show(表示する)
- Group Aを選択
英語で少し分かりづらいので日本語に翻訳すると「Group Aを表示させる(Show)Element Actionsを追加」という意味になります。
ログイン時にGroup Aを表示させることができたら、今度はログアウト時にGroup Aを非表示にする処理を記述します。
基本的には先程と同じ処理です。今度はログアウト時の処理を選びましょう。
- Click here to ad an event(イベントを追加する)
- General(一般的な操作)
- User is logged out(ユーザーがログアウトしている時の処理)
先程と異なるのは「Hide(非表示にする)」という部分だけです。
- Click here to ad an action(アクションを追加する)
- Element Actions(要素アクション)
- Hide(非表示にする)
- Group Aを選択
これで完成です！せっかくなのでPreviewから動作を確認してみましょう！
まとめ
うまく表示、非表示を切り替えることができたでしょうか？
ログインユーザーとそれ以外で見えるページを変えるというのはあらゆるWebサービスで基本となる機能なので、しっかり基礎を抑えておきましょう！
Enjoy NoCode!
コメント