MENU

第7章 ユーザー情報を更新、削除(退会、解約)できるようにしてみる

bubbleチュートリアルver1第7章 ユーザー情報を更新、削除(退会、解約)できるようにしてみる

目次-全章

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

7.1 マイページにユーザー情報の編集処理を実装

ユーザー情報の編集処理を実装

ポップアップを表示させる

編集するボタンをクリックした時にポップアップを表示させるには、Button Editからワークフローを開始します。

アクションは Element Actions > Show を選択します。

図7.1.1 Element Actions > Showを選択

プロパティエディタで Element に Popup Edit を選択します。

図7.1.2 ElementにPopup Editを設定

これでボタンをクリックしたときに Popup Edit が表示されます。

編集ポップアップを設定する

Popupエレメントはビジュアルエディタでは非表示になっているので、Elements treeで表示させます。

図7.1.3 Popup Editの状態

Popup Editは「Current User」を設定しておきます。

Input Usernameのプロパティエディタで、Initial contentに Parent group’s User’s name を設定します。これで、Popup Edit = Current User(自分自身)’s nameとなり、自分自身の登録した名前が表示されることになります。

図7.1.4 Input Usernameの設定

編集を実行するには、Button UserEdit(ポップアップの編集するボタン)にワークフローを設定します。

アクションは Account > Make changes to current user を選択します。

図7.1.5 Account > Make changes to current userを選択

「+ Change another field」をクリックします。

図7.1.6 + Change another fieldへ

Userテーブルのname = Inputの入力値、image = Picuture Uploaderの値として設定します。

図7.1.7 Make changes to current userでの設定

その後、ポップアップを非表示にする必要があるので、Element Actions > Hide を選択します。

図7.1.8 Element Actions > Hide を選択

プロパティエディタで Element に Popup Edit を選択します。

図7.1.9 Element に Popup Edit を選択

これで、ポップアップで自分の名前を編集し、保存、ポップアップを非表示にするというアクションができました。

ユーザー名が空のとき編集させない

今のままだとユーザー名が空でも登録できてしまうので、必須チェックを追加します。

Input Usernameのプロパティエディタで「This input should not be empty」のチェックを入れておきます。

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

Button UserEditのプロパティエディタで「This element isn’t clickable」にチェックを入れます。

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

Conditionalタブで「Inputの入力が空でないときクリック可能」とします。

図7.1.12 Button UserEditのConditionalの設定

ポップアップを閉じる設定を追加する

ポップアップを表示しても編集しないでポップアップを閉じる場合があると思います。ポップアップの「閉じる」ボタンをクリックしたとき、ポップアップを非表示にするワークフローを追加します。

アクションは上記でも利用した Hide を設定します。

図7.1.13 ElementをPopup Editに設定

このとき、もしユーザー名を編集したあとに「閉じる」をクリックすると入力した内容が残ったままになるため、ポップアップの内容をリセットする設定を追加します。

Element Actions > Reset data を選択します。

図7.1.14 Element Actions > Reset data を選択

Element  は Popup Edit を選択します。

図7.1.15 ElementをPopup Editに設定

これで、ポップアップを非表示にした後、ポップアップのデータがリセットされるため、編集して保存していない入力値は破棄されます。

ポップアップ背景をクリックした時にポップアップを非表示にしない設定

サイトやシステムによって設定は異なりますが、bubbleではポップアップを表示している際に背景の黒い部分をクリックするとポップアップが非表示になります。

これを防止するには、「This popup can’t be closed by pressing ‘Esc’」にチェックいれます。

図7.1.16 This popup can’t be closed by pressing ‘Esc’にチェック

以上でユーザー情報の編集処理の設定が完了しました。

プレビューで確認

マイページをプレビューし、編集するボタンをクリックしてみましょう。

図7.1.17 Popupのpreview画面

表示されたポップアップでUsernameを変更し、編集するボタンをクリックします。

図7.1.18 変更されたmypageの状態

ポップアップが非表示になったとき、入力した名前と画像に変更されていることを確認します。

また、以下も確認しましょう。

・Usernameを空にした場合、編集するボタンをクリックできない

・Usernameを変更して閉じるボタンをクリックする。再度ポップアップを表示しても編集内容は破棄されている

・ポップアップの背景をクリックしてもポップアップが非表示にならない

7.2 マイページにユーザー情報の削除処理を実装

マイページにユーザー情報の削除処理を実装

退会ページを作成する

マイページからユーザーが退会できるよう、退会ページを作成します。

図7.2.1 退会ページ作成例

ヘッダーが存在するページをクローンして、withdrawalページを作成します。ここではhomeをクローンしました。

図7.2.2 新規ページ作成例

不要なエレメントを削除します。Body内のエレメントを全て削除した状態です。

図7.2.3 withdrawalページの状態

Bodyをレスポンシブ対応する

BodyのContainer layoutはColumn、Horizontal alignmentはcenter、横幅は320〜526px、Min heightは100pxにしFit height to contentにチェック、Padding Left / Rightに20を設定します。

図7.2.4 Bodyの設定
図7.2.5 BodyのPadding設定

Figmaを参考に、エレメントを追加します。

退会前に表示する要素を Group Withdrawal 内に、退会後に表示する要素を Group Withdrawal Confirm内に作成します。

退会するボタンのStyleは以下のようにします。Primary Buttonの背景色のみ変更して、Red Buttonというスタイル名で保存しました。

図7.2.6 Red Buttonの設定

ここで、レスポンシブエンジンを起動しGroup WithdrawalのContainer layoutはColumn、Row gapは32、Collapse when hiddenにチェック、Horizontal alignmentはCenter、横幅を100%にします。

図7.2.7 Group withdrawalの設定

2つのボタンが縦に並んでしまっているので、グループで内包します。

作成したグループ Group Buttonsの設定は以下のようにします。

図7.2.8 Group Buttonの設定

Group Withdrawalに戻り、Min heightを100px、Fit height to contentにチェックを入れます。内部エレメントの高さに合わせて、高さが変更されます。

図7.2.9 Group Withdrawalの設定

Group Withdrawal内部のTextエレメントは横幅100%に設定します。

図7.2.10 Group Withdrawal Confirmの配置

Group Withdrawal Confirm要素は、退会処理後に表示するので「This element is visible on page load」のチェックを外しておきます。 

図7.2.11 This element is visible on page loadのチェックを外す

Group Withdrawal Confirmも同じようにLayoutを設定をします。

図7.2.12 Group Withdrawal Confirmの設定

内部のTextエレメントは横幅100%にします。

図7.2.13 Textエレメントの設定

Linkエレメントは横幅100px、Fit width to contentにチェックを入れ、文字幅と同じ横幅にします。

図7.2.14 Linkエレメントの設定

退会処理を実装する

退会処理は、ユーザーを削除することで実装します。ユーザーデータを削除すると、当然ログインもできなくなります。

Button Yes(退会する)ボタンからワークフローを開始し、Data > Delete thing… アクションを選択します。

To deleteには Current User を設定します。

図7.2.15 To deleteにCurrent Userを設定

これでユーザーが削除されることになりますが、投稿があった場合に投稿のみ残ってしまうため、Current Userの全投稿も削除します。

データの一括削除は、Delete a list of things… アクションを利用します。

Type of thins:Tweet、List to delete:Do search for Tweetsを設定し、作成者がCurrent Userのものになるよう設定します。

図7.2.16 Delete a list of Tweets…の設定

ここで、ユーザーの削除と投稿の削除の順番を入れ替えます。ユーザーの削除が実行されると、投稿の削除時にCurrent Userが見つからず、削除ができなくなるためです。

図7.2.17 ワークフローの入れ替え

削除後にGroup Withdrawalを非表示、Group Withdrawal Confirmを表示させます。

図7.2.18 Hide Group Withdrawalの追加

退会しない場合の処理を追加する

Button No(まだ続ける)ボタンをクリックしたときに、マイページに戻る処理をワークフローに追加します。

図7.2.19 Destinationをmypageに設定

ヘッダーの設定を修正

退会前にはヘッダーを表示、退会後にヘッダーを非表示にしたいので、withdrawalページのヘッダーのConditionalに以下の設定を追加します。

図7.2.20 HeaderAのConditionalの設定

Group Withdrawal Confirmが表示されているときに、ヘッダーを表示しない設定です。

Group Withdrawal Confirmが表示されているときとは、退会処理が完了した時になるため、退会処理後にヘッダーが非表示になるということになります。

マイページにリンクを設定する

マイページのフォロワー数リンクの下に、リンク要素をコピー&ペーストしてLinkエレメントを作成し、設定を変更します。

図7.2.21 Link Withdrawalの配置と設定

Responsiveタブで確認する

Responsiveタブを横幅320pxで確認すると、以下のように表示されます。

図7.2.22 Responsive対応例①
図7.2.23 Responsive対応例②

プレビューで確認する

マイページを表示した状態でプレビューをします。

図7.2.24 mypageのpreview画面

退会するリンクをクリックして、退会ページを表示します。

図7.2.25 退会動作の確認

退会するボタンをクリックすると、退会完了の表示がされ、ヘッダーが非表示になっていることが確認できます。

図7.2.26 退会完了の確認

その後、退会したユーザーでログインをしてみてください。以下のアラートが表示されます。

図7.2.27 アラートの表示

このメッセージは Settings > Languages の以下で変更可能です。

図7.2.27 メッセージ変更例
実際に働く社員とカジュアル面談しませんか?

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


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

この記事を書いた人

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

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

コメント

コメントする

目次