今回は「サインアップ」「ログイン」「ログアウト」の機能を作る方法を解説します。
完成イメージはこのようになります。
実施する内容は
- 「メールアドレス」と「パスワード」をユーザーが入力するフォーム
- 「サインアップ」ボタン、「ログイン」ボタンの設定
- ユーザーのメールアドレスを表示
- 「ログアウト」ボタンの設定
です。
- 「メールアドレス」と「パスワード」をユーザーが入力するフォーム
- サインアップのワークフロー
- ログインのワークフロー
- メールアドレスの表示
- ログアウト処理の設定
- ログイン時にグループを表示させる
- ログアウト時にグループを非表示させる
- プレビューで確認
- 参考図書
「メールアドレス」と「パスワード」をユーザーが入力するフォーム
メールアドレスを入力するできるように「Input」エレメントを設置します。
メールアドレスを入力するための枠なので、「Placeholder」は「メールアドレスを入力」とします。
「Content format」は、メールアドレス入力専用の枠なので「Email」を選択します。
同じようにパスワードを入力できるように「Input」エレメントを設置します。
パスワードを入力するための枠なので、「Placeholder」は「パスワードを入力」とします。
「Content format」は、パスワード入力専用の枠なので「Password」を選択します。
続いて、メールアドレスやパスワードの入力された情報を登録するための「ボタン」を設置します。
まずはサインアップするように「サインアップ」ボタンを設置します。
「ログイン」ボタンも同じように設置します。
サインアップのワークフロー
今度は「サインアップ」ボタンが押された時に、ユーザー情報を登録するワークフローを作成。
「When Button Signup is clicked」で、「サインアップ」ボタンが押された時の処理になります。
「Click here to add action ...」をクリックしてアクションを定義します。
今回はアカウントのサインアップをしたいので、「Account」から「Sign the user up」を選択します。
アカウントを登録するには「メールアドレス」と「パスワード」が必要になります。
まずは「メールアドレス」を設定します。
フォームで作成した「Input Email」に入力されたメールアドレスを登録したいので、「Input Email」を選択し、そこに入力された値ということで「's value」を選択します。
同じようにパスワードについても設定します。
これでサインアップの設定は完了です。
ログインのワークフロー
今度は「ログイン」ボタンが押された時のワークフローを作成します。
「When Button Login is clicked」で、「ログイン」ボタンが押された時の処理になります。
「Click here to add action ...」をクリックしてアクションを定義します。
今回はログインをしたいので、「Account」から「Log the user in」を選択します。
サインアップの時と同様に「メールアドレス」と「パスワード」を設定します。
メールアドレスの表示
今度は、ログインした時に、ログインしたユーザーの「メールアドレス」を表示するようにしていきます。
まずは「Group」エレメントでグループを作成します。
「Group」エレメントの中に「Text」エレメントを設置します。
この「Text」エレメントに現在ログインしているユーザーのメールアドレスを表示させます。
「Text」エレメントのプロパティで、現在ログインしているユーザーのメールアドレスを表示する設定を行います。
「Insert dynamic data」をクリックします。
「Current User」を選択します。
「's email」を選択します。
これで、現在ログインしているユーザーのメールアドレスを、Textエレメントで表示させる設定ができました。
ログアウト処理の設定
次に「ログアウト」ボタンを設置します。
「Button」エレメントで「ログアウト」ボタンを「Group」の中に設置します。
「ログアウト」ボタンのワークフローを作成します。
「When Button Logout is clicked」で、「ログアウト」ボタンが押された時の処理になります。
「Click here to add action ...」をクリックしてアクションを定義します。
今回はログアウトをしたいので、「Account」から「Log the user out」を選択します。
これで「ログアウト」の処理が完成です。
ログイン時にグループを表示させる
次に、ログインした時に「Group」が表示されるように設定します。
「Click here to add an event ...」で新しいワークフローを作成します。
ユーザーがログインした時のワークフローですので、「General」から「User is logged in」を選択します。
「Click here to add action ...」をクリックしてアクションを定義します。
今回はエレメントを表示するという設定をしたいので、「Element Actions」から「Show」を選択します。
どのエレメントを表示させるか聞かれますので、作成した「Group」エレメントを指定します。
これで、ログインしたら「Group」エレメントを表示するという設定ができました。
ログアウト時にグループを非表示させる
次に、ログアウトした時に「Group」が非表示されるように設定します。
「Click here to add an event ...」で新しいワークフローを作成します。
ユーザーがログアウトした時のワークフローですので、「General」から「User is logged out」を選択します。
「Click here to add action ...」をクリックしてアクションを定義します。
今回はエレメントを表示するという設定をしたいので、「Element Actions」から「Hide」を選択します。
どのエレメントを非表示させるか聞かれますので、作成した「Group」エレメントを指定します。
これで、ログアウトしたら「Group」エレメントを非表示にするという設定ができました。
プレビューで確認
さっそくプレビューで確認してみましょう。
最初の状態ではログアウトボタンが含まれる「Group」エレメントは表示されていません。
適当にメールアドレスとパスワードを入力して、「サインアップ」してみましょう。
ユーザーのメールアドレスとログアウトボタンが表示されます。
ログアウトボタンを押してみると、また「Group」エレメントの情報が消えます。
これで、「サインアップ」「ログイン」「ログアウト」の機能を作成することができました。
参考図書
LINE公式アカウント
仕事が辛くてたまらない人生が、仕事が楽しくてたまらない人生に変わります。
【登録いただいた人全員に、無料キャリア相談プレゼント中!】