MENU

3.6章 マイページの作成

bubbleチュートリアルver1第3.6章 マイページの作成

目次-全章

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

マイページを作成します。

図3.6.1 マイページ完成例
目次

マイページを作成する

ページをクローンして作成する

マイページの内容も、第3章5で作成したタイムラインページに似ているため、タイムラインページをクローンします。

図3.6.2 新規ページ作成例

レスポンシブエンジンを適用する

mypageページでは、Header、Bodyを縦に並べるため、Container layoutはColumnを選択します。Row gapはhomeと同様に34pxに設定します。

基本的にページの設定はどのページも同じにします。

図3.6.3 mypageの設定

Headerの設定もHomeと同じです。

図3.6.4 Headerの設定

Bodyの設定も同じようにします。

図3.6.5 Bodyの設定①
図3.6.6 Bodyの設定②

作成後、マイページに不要な投稿入力欄を削除します。

図3.6.7 不要なエレメントの削除

自分の情報表示欄を作成する

Group UserをグループTime Lineの上に移動させ、サイズを調整します。

Group Userはエレメントが横並びなのでContainer layoutをRow、Column gapを20 、横幅を100%にします。

図3.6.8 「Group User」の配置

User Imageを調整します。

図3.6.9 User Imageの設定

Link Mypageをコピー&ペーストして、フォローとフォロワーのリンクに修正し、名称を調整します。

図3.6.10 リンクエレメントのテキストを「フォロー」、「フォロワー」に変更

フォロー人数、フォロワー人数はあとから設定します。

編集とログアウトボタンを設置するため、Group User内に Visual elements > Button を2つ配置します。

図3.6.11 「Button Edit」の設定

編集ボタンの名称を「Button Edit」に変更し、サイズ・位置・スタイルを調整します。

図3.6.12 「Button Logout」の設定

ログアウトボタンの名称は「Button Logout」にし、サイズ・位置を調整します。

ボタン色が変わるので、デフォルトのStyleで用意されているSecondary Buttonのスタイルを以下のように変更します。

※2023年1月以降に本チュートリアルに取り組んだ場合、初期設定として「Secondary Button」にあたるStyleが存在しないことがあります。その場合は、「Secondary Button」にあたるStyleを新たに作成してください。

図3.6.13 「Secondary Button」の設定
図3.6.14 Button Editの設定

LayoutタブからButton Edit / Button Logoutの横幅を120px-150pxに調整します。

Group UserInfoは、縦・横にエレメントが並んでいるため、まずユーザー名と投稿数をグループに入れます。次にフォロー数、フォロワー数をグループに入れます。

それぞれ、Group UserText、Group UserLinkというグループに入れた状態です。

図3.6.15 各エレメントのグループ構成

Group UserInfoの設定は以下の通りです。

図3.6.16 Group UserInfoの設定

Group UserTextを以下の通り設定します。Group UserLinkも設定内容は同じです。

図3.6.17 Group UserTextの設定①

内部のText、Linkエレメントは横幅100%、高さ Fit height to contentにチェックを入れます。

図3.6.18 Group UserTextの設定②

編集ポップアップを作成する

マイページ画面で「編集する」ボタンをクリックしたときに、ユーザー名を編集するポップアップを作成します。

図3.6.19 Popupを配置

Containers > Popup を画面上に配置します。

Popupの名称を「Popup Edit」に変更し、Type of content:User、Data source:Current Userを選択します。

図3.6.20 Type of content:User、Data source:Current Userを選択

Popup EditをContainer layoutはColumnにします。

スマートフォンのとき横幅より少し小さくなるようにMin widthを300px、Max widthはもともとの設定値にします。Row gapは16pxにしておきます。

また、余白を持たせたいので、Padding Top / Bottomに70、Left / Rightに20を設定します。

図3.6.21 Popup Editの設定

Standard PopupのStyleを変更します。

図3.6.22 「Standard popup」の設定

画像に含まれていない「Horizontal offset」以降を以下で設定します。
Vertical offset:2
Blur radius:4
Spread radius:0
Boxshadow color:#000000

Popup内のエレメントを配置します。

図3.6.23 各エレメントの配置

画像のアップロードは、Picture Uploaderを利用します。

Horizontal alignmentをCenteredに設定し、横幅を260〜500pxにします。Placeholderは「画像を選択してください」とします。

もともと設定されていた際に表示されるよう、Dynamic imageは Parent group’s User’s image とします。StyleはデフォルトのStandard Image Uploaderを利用します。

また、配置したボタン間の余白が気になるため、2つのボタンをグループで内包します。ボタンのグループをGroup Buttonsとします。

Row gap、横幅などは以下を参考にしてください。ポップアップの横幅よりさらに少し狭くなるようにします。

図3.6.24 Group Buttonの設定

Picture UploaderのプロパティエディタからMake this file privateにチェックを入れます。チェックを入れないと画像が外部の第三者からも画像が確認できてしまうためです。チェックを入れるとAttach this file toと表示されます。画像ファイルをプライベート化する場合、カラムに保存するのとは別に、テーブルのレコードに画像を紐づける必要があります。ユーザー画像なので、このユーザーに紐づけることにします。

図3.6.25 PictureUploaderの設定

Userにプライバシールールを設定しておきます。Data > Privacy タブでUserを選択し、Define a new ruleをクリックします。

図3.6.26 Data > Privacy タブでUserを選択

loginという名前をつけて、「ユーザーがログインしているとき」という条件にし、以下のようにチェックを入れます。これで、ログインしているユーザーがUserのデータの閲覧、検索、紐づけたファイルの閲覧ができる設定になります。

図3.6.27 「login」の設定

「閉じる」ボタンのStyleを新しく「White Button」として作成し、設定します。

図3.6.28 「White Button」の設定

タブを作成する

図3.6.29 タブの作成例

タブボタンの作成

タブを内包するグループ「Group Tab」を配置します。

Container layoutをRow、横幅を320〜600pxにします。横位置中央に表示されるようHorizontal alignmentをCenterにします。

図3.6.30 Group Tabの設定

内部に3つのTextエレメントを配置します。

図3.6.31 TextをGroupに配置

各Textのサイズは、スマートフォンでも入りきるように320pxの1/3幅を最小値としますが、BodyにPaddingが左右20pxずつ設定されているため、280pxの1/3幅とします。

割り切れないので90pxとすれば問題ありません。

図3.6.32 Text Timelineの設定
図3.6.33 Textを3つ配置

ここで、Textエレメントのスタイルを設定します。

Figma上で現在表示されているタブの色が変わっている部分についてはワークフローの設定時に対応するため、ここでは3つとも選択されていないタブのスタイルとして設定します。

Tab Timelineを選択して以下のようにStyleを設定し、スタイル名をTabとして保存します。

図3.6.34 「Tab」の設定

保存したスタイル「Tab」を残り2つのTextエレメントに適用します。

図3.6.35 「Tab」の適用

フォロー・フォロワー一覧を作成する

次に、フォロー・フォロワーのタブをクリックした時に表示する一覧を作成します。

タブで切り替えるページを作る際、タブごとに内容を構築することが一般的ですが、フォロー中ユーザー一覧とフォロワー一覧はほぼ同じ構成のため、同じ要素を利用することにします。

グループ「Time Line」をコピー&ペーストし、名前を「Follow User」とします。

こちらもCollapse when hiddenにチェックを入れます。横幅やgapなどのサイズはTimeLineと同じです。Follow UserもTimeLineと同じような設定をしていきます。

図3.6.36 Follow Userの設定
図3.6.37 コピー&ペースト後の状態

このままだと要素が重なって見づらいため、Elements treeでTimeLine横にある目のアイコンをクリックしましょう。

TimeLineの文字が以下のようになっていると、エディタ上で非表示になります。

図3.6.38 「TimeLine」を非表示にする

Repeating Group内のエレメントを書き換える

コピーしたままだとRepeating GroupはTweetの内容になっているので、それぞれ名称を書き換えていきます。 また、投稿表示用のTextエレメント「Tweet」は不要ですので削除します。

図3.6.39 不要なエレメントの削除

ワークフローの設定をする際に同じ名称が存在しているとわかりにくいため、なるべく名称は重複しないように工夫して変更します。

Text FollowUser Nameと名称変更したユーザー名のTextエレメントをコピー&ペーストし、ユーザーの投稿数を表示するエレメントとします。また、Link FollowUserと名称変更したリンクをコピー&ペーストし、ユーザーのフォロー者一覧、ユーザーのフォロワー一覧へのリンクを作成します。

図3.6.40 各エレメントの名称変更

ユーザーのフォローボタン、フォロー解除ボタンを配置します。

フォローボタンのStyleは「Primary Button」、フォロー解除ボタンのStyleは「Secondary Button」を設定しています。

図3.6.41 各ボタンの配置

RG FollowUserはContainer layoutをColumn、横幅100%とします。

図3.6.42 RG FollowUserの設定

Repeating Groupの情報を変更する

現在、RG FollowUserのデータはTweetになっているので、Userタイプに変更します。

RG FollowUserのプロパティエディタで Type of content を「User」にします。

図3.6.43 Userタイプへ変更

データベースの設定はまだできておらず、データの取得条件を設定できないため、Data sourceは空にしておきます。Data sourceの欄で右クリックをすると選択肢が表示されるので「Clear expression」を選択すると空にできます。

図3.6.44 Data sourceを空にする

Group FollowUserはContainer layoutをRow、横幅100%にします。

図3.6.45 Group FollowUserの設定

TimeLineのGroup Tweetエレメントと同様に、Paddingも設定しておきます。

図3.6.46 エレメントのPadding設定

やはり横幅がはみ出すため、フォローユーザーの画像サイズやボタンのサイズを調整していきます。

ユーザー画像のサイズを80〜100pxにします。

図3.6.47 FollowUser Imageの設定

ユーザー情報を縦並びにするために、グループでまとめます。

図3.6.48 Group FollowUserInfoの設定

ユーザー情報をまとめたグループGroup FollowUserInfoの設定は以下の通りです。最大値を設定していないため、ユーザー画像、フォローボタンを除いた横幅まで自動的に広がります。

図3.6.49 Group FollowUserInfoの設定

内部のユーザー名、投稿数、フォロー数、フォロワー数の横幅を100%、Fit height to contentにチェックを設定します。

図3.6.50 Fit height to contentにチェック

プロフィールを見るリンクのみ、Fit width to contentにチェックを入れておきます。

図3.6.51 Link UserProfileの設定

Group FollowUserのType of contentも「User」に修正します。

図3.6.52 「Group FollowUser」の設定

画面読み込み時に非表示にする設定

ここまでで画面に必要な要素は設定しましたが、このままだとグループ「TimeLine」と「Follow User」は同時に表示されてしまいます。そのため、マイページにアクセスした際デフォルトで表示しない項目は非表示にする設定を追加します。

Follow Userのプロパティエディタで「This element is visible on page load」のチェックを外します。

図3.6.53 「Follow User」の設定

このプロパティがオフになっているエレメントは、画面読み込み時に表示されません。

※画像では Container layoutが「Fixed」となっていますが、「Row」で設定するようにしてください。

条件で表示を切り替える設定

フォロー、フォロー解除のボタンについても、同様に「This element is visible on page load」のチェックを外します。

チェックがついたままで、ワークフローで条件を確認してエレメントを非表示にする設定をした場合でも、画面にアクセスした時に一瞬表示されて消えるといった挙動をします。そのため、条件で表示を切り替える要素については、デフォルトで「読み込まない」設定にしておく方が画面が綺麗になります。

ボタンは常にどちらかが表示され、どちらかが非表示でも同じ位置に表示したいので、Collapse when hiddenにチェックを入れます。ユーザー情報の横幅を広く利用できます。

図3.6.53 Button AddFollowの設定

最後に、ページ内の各エレメントの位置・サイズを調整してマイページの作成は完了です。

図3.6.54 マイページ完成例
実際に働く社員とカジュアル面談しませんか?

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


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

この記事を書いた人

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

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

コメント

コメントする

目次