MENU

第5章 ユーザー登録、ログインを試してみる

bubbleチュートリアルver1第5章 ユーザー登録、ログインを試してみる

目次-全章

第1章 bubbleについて(bubbleの基礎知識からアカウントの作成、アプリ開発まで)
第2章 かんたんなアプリケーションを作成
第3章 ページレイアウト(UIデザイン)を作成
第4章 データベースの設計
第5章 ユーザー登録、ログインを試してみる
第6章 ユーザーログイン時の処理を実装してみる
第7章 ユーザー情報を更新、削除(退会、解約)できるようにしてみる
第8章 メールアドレス認証を実装してみる
第9章 パスワードの再設定、パスワードリセット機能を実装してみる
第10章 ユーザーがツイートできるようにする
第11章 ユーザーのフォロー機能、タイムライン表示機能をつくってみる
まとめ
目次

5.1 ユーザーの一覧ページにユーザーを表示させてみる

ユーザーテーブルと投稿テーブルを作成できたところで、ユーザー一覧ページに実際のデータを表示してみましょう。

ユーザー一覧ページにユーザーを表示させる

ビジュアルエディタのDesignタブに移動し、usersページを表示します。

グループ「Search Body」を表示します。

図5.1.1 「Search Body」を表示

Repeatign Groupにデータを設定

ユーザー一覧の設定をするため、Repeating Group「RG Userlist」のプロパティエディタを開きます。

Data sourceのClickをクリックして、「Do a search for」を選択します。

図5.1.2 Do a search forを選択

もう一つプロパティエディタが表示されるので、Typeに「User」を選択します。

図5.1.3 タイプを「User」に選択

この設定で、全てのユーザーを表示することができます。

ユーザー画像を表示させる

Repeating Groupの各セルに値を渡すことができたので、内部のエレメントにも値を設定します。

Group UserDetailは、Data sourceを「Current cell’s User」にします(第3章での設定のままです)。

図5.1.4 Current cell’s Userを選択

Imageエレメント「ListUser Image」に動的な画像を設定します。ListUser Imageを選択した状態で、プロパティエディタのDynamic imageで「Insert dynamic data」をクリックします。

図5.1.5 Insert dynamic dataを選択

「Parent group’s User」を選択します。

図5.1.6 Psrent group’s Userを選択

Userテーブルのカラム名などが選択肢として表示されるため、「’s image」を選択します。

図5.1.7 ‘s imageを選択

これで、各セルにそれぞれのユーザー画像が表示されるようになります。

ユーザー名を表示させる

Text ListUser Nameのプロパティエディタで、以下のように設定します。

図5.1.8 「Text ListUser Name」の設定

プロフィールにリンクを設定する

Link ListUserProfileのプロパティエディタでリンクを設定します。ユーザー一覧の「プロフィールを見る」をクリックした場合、usersページにクリックしたユーザー情報をパラメータで付与します。

Destination pageで「users」を選択します。

クエリでパラメータを付与する場合、「Send more parameters to the page」にチェックを入れます。

図5.1.9 「Link ListUserProfile」の設定

「+ Add another parameter」をクリックすると、keyの入力欄が表示されるので、以下の通り入力します。

図5.1.10 + Add another parameterへ

key はURLに付与されるパラメータの名称です。keyを入力すると「= (入力欄)」が表示されるため、Clickをクリックし、以下の通り選択肢から設定します。

図5.1.11 keyの入力例

これで「プロフィールを見る」をクリックすると、「https://(アプリ名).bubbleapps.io/users?user=(ユーザーID)」に遷移する設定ができました。

投稿件数を表示する

投稿件数は、Tweetテーブルからそのユーザーが作成した投稿を検索して件数を表示します。

Text ListUserTweetNumberのテキスト入力欄で「投稿」の文字の前にカーソルを合わせ、「Insert dynamic data」をクリックします。

図5.1.12 Insert dynamic dataを選択

「Do a search for」を選択し、Typeには「Tweet」を選択します。

図5.1.13 「Text ListUserTweetNumber」の設定

「+ Add a new constraint」をクリックし、「作成者 = 現在のセルのユーザー」となるように設定します。 

現在検索しているテーブルの「作成者」を指定するには「Created By」を選択します。

現在のセルのユーザーですが、セル内部にGroup UserDetailが存在するので、Parent group’s User = Group UserDetail’s User となります。Group UserDetail’s Userは、Group UserDetailに設定されているUserデータなので、Current cell’s userとなります。

図5.1.14 「Text ListUserTweetNumber」の設定

このように、グループに値を設定しているとグループの内部のエレメントは親エレメントから値を引き継ぐことができます。

このままだと「Search for Tweets(More…)」が赤文字になってしまいます。これはエラーになっていることを示しています。ここで(More…)をクリックし、選択肢から「:count」を選択します。

図5.1.15 Search for Tweets(More…)の表示
図5.1.16 :countを選択

これで「このセルのユーザーが作成した投稿の件数」を取得できます。

以上で、userページにアクセスした場合、ユーザー一覧を表示させる設定は完了です。

5.2 ユーザー登録処理を実装

新規ユーザー登録フォームから、ユーザー登録を行う処理を実装していきます。

ユーザー登録のロジックを設定

ユーザー登録は、必要項目を入力し「新規登録する」ボタンをクリックするとユーザー情報を作成し、ログイン状態にします。

ボタンからワークフローを開始

Button Signupのプロパティエディタで「Start/Edit workflow」をクリックします。

図5.2.1 Start/Edit workflowへ

アクションは Account > Sign the user up を選択します。

図5.2.2 Account > Sign the user upを選択

Sign the user upのプロパティエディタで「Email」に入力欄の値を設定できるようにします。Emailの入力欄である「Input Email」を選択します。続けて「’s value」を選択します。

図5.2.3 Sign the user upのEmail設定

同様に、Passwordも設定します。

図5.2.4 Sign the user upの設定

サインアップと同時に、入力したユーザー名を登録するには、「+ Change another field」をクリックします。

図5.2.5 + Change another fieldへ

ここで、Userテーブルのnameカラムに入力したUsernameを設定します。

図5.2.6  Usernameを設定

これで、新規登録時にメールアドレス・パスワード・ユーザー名を登録できます。

新規登録後、homeページに遷移させる

今のままだと、新規登録をした後、新規登録ページに止まってしまうので、homeページに遷移させるアクションを追加します。

Navigation > Go to page … を選択します。

図5.2.7 Navigation > Go to page … を選択

ページの遷移先 Destination に home を選択します。

図5.2.8 Destinationをhomeに選択

これで、新規登録後にhomeページに遷移されます。

図5.2.9 ワークフロー設定例

5.3 ユーザー情報が不適切な場合のバリデーションを作成

バリデーションとは

バリデーションとは、入力内容や記述内容が要件を満たしているか、妥当性を確認することです。例えばメールアドレスの入力欄に全角文字が入っていたり、必須入力の欄が空であった場合、登録を可能にするわけにはいきません。このようなチェックを行うことが必要になります。

第3章3で前述していますが、EmailやPasswordの入力内容のバリデーションチェックは自動で行われます。パスワードポリシーを設定している場合、パスワードポリシーに適合しないパスワードが入力された場合も、自動でアラートが表示されます。

そのため、本項では必須チェックを追加していきます。

バリデーションチェックを追加する

必須項目のチェックを追加する

ユーザー名、メールアドレス、パスワードはそれぞれ必須である必要があります。

必須チェックをするには、各入力エレメントを選択し、プロパティエディタに「This input should not be empty」にチェックを入れます。

図5.3.1 This input should not be emptyにチェック

メールアドレス、パスワードも同様に This input should not be empty にチェックを入れます。

プレビューを見て確認する

3つのinputで This input should not be empty にチェックを入れたら、Previewをクリックします。

プレビューで何も入力しないまま「新規登録する」をクリックしてみましょう。

図5.3.2 「新規登録する」をクリック

ユーザー名、メールアドレス、パスワードのそれぞれの入力欄が赤枠になります。

図5.3.3 新規会員登録のpreview画面例

Input formには、入力値が正しい形式か、空でないかなどのバリデーション内容を保持する「valid」プロパティが存在します。

validプロパティは「Content format」がEmailのとき、メールアドレスとして認識されない場合に valid = no となります。また、必須項目にしたInputが空のときも valid = no となります。

bubbleの言語は英語なので、InputのContent formatが「Integer」のとき全角文字が入っていても正しいバリデーションチェックが行われません。このように自動的にvalidプロパティが設定されない項目もありますので、主にメールアドレスと必須チェックでのみ利用するつもりでいましょう。

Inputのvalidプロパティの値でStyleを設定するには、StylesのConditionalタブで設定します。

図5.3.4 Standard inputの設定

必須項目が入力されていないときボタンをクリックできないようにする

必須項目が入力されていないとき、そもそも「新規登録する」ボタンをクリックできないようにしておきます。

Button Signupのプロパティエディタで「This element isn’t clickable」にチェックを入れます。こうすると、ボタンをクリックできなくなります。もちろんボタンをクリックできないとワークフローも開始されません。

図5.3.5 This element isn’t clickableにチェック

Conditionalタブに移動して、条件を追加します。

Input Username、Input Email、Input Password全てが空でない時、クリック可能という条件を設定します。

図5.3.6 Button Signupの設定

This element isn’t clickable のチェックを外します。

これで、3つのInputが全て空でないときにクリック可能になります。

クリック不可のときのStyleを変更しておく

StylesタブでButton Signupのスタイルを選択し、「+  Define another condition」をクリックします。

図5.3.7 +  Define another conditionを選択

条件は、ボタンがクリックできないとき = This Button isn’t clickable とします。Background colorは背景色の透明度を50%とします。

図5.3.8 条件設定

プレビューで見てみよう

ここで、プレビューをクリックすると「新規登録する」ボタンの背景色が薄くなっていることが確認できます。

図5.3.9 新規会員登録のpreview画面例

ユーザー名、メールアドレス、パスワードを全て入力すると「新規登録する」の背景色が濃くなり、クリックできるようになります。

図5.3.10 preview画面での動作確認

新規登録からユーザー一覧まで確認する

ここまで設定したところで、実際に新規登録をした後、ユーザー一覧を表示して自分のユーザー情報が表示されることを確認してみましょう。

singup画面でプレビューを表示し、ユーザー名、メールアドレス、パスワードを入力し、新規登録します。

図5.3.11 signup画面で新規登録

新規登録後、home画面が表示されることが確認できます。

図5.3.12 home画面へ移動

ビジュアルエディタに戻り、usersページを表示してからプレビューします。

図5.3.13 usersページからのプレビュー画面

画像を設定していないためユーザー画像は表示されませんが、先ほど入力したユーザー名が表示されていることが確認できます。

5.4 最後に

第5章では、データベースからデータを取得して表示する方法、新規登録のワークフローを設定しました。

bubbleではワークフローも表示するデータもほとんどがクリックで設定できることが体感できたかと思います。

また、bubbleにはもともと用意されているアクションやプロパティがあります。

アクションやプロパティの内容はマウスオーバーすると表示される「? See reference →」をクリックして内容を確認できます。

わからないことがあれば、ドキュメントを確認してみましょう。

実際に働く社員とカジュアル面談しませんか?

【毎週金曜日開催中】カジュアル面談しませんか?


参加はこちら!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私たち株式会社ファンリピートは、ITを通じてお客様の課題解決を行うスタートアップベンチャーです。ノーコード・ローコードを用いたDX支援事業を主軸に、スピード感を持ってお客様のご要望にお応えしています。

2019年の創業から、出版業界・広告業界をはじめ、幅広い業界のデジタル施策を支援。財務管理・顧客管理などの基幹・業務システムから、新規Webサービスなど開発前検証フェーズのシステム導入支援まで、ワンストップでサポートを実施しています。この先も本質的なご提案を通じて、お客様の課題を解決し続けます。

コメント

コメントする

目次