MENU

3.6 マイページの作成

目次-全章

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

マイページを作成する

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

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

図3.6.2 新規ページ作成例

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

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

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

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

図3.6.4 「Group User」の配置

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

※「container layoutをFixed・Row・Columnのどれに設定するか」など、elementのgroupへの入れ方によっては、完成レイアウトが変わってくることがありますcontainer layoutについては、「Row」で設定するようにしてください。

図3.6.5 「フォロー」、「フォロワー」の調整

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

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

図3.6.6 「Button Edit」の設定

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

図3.6.7 「Button Edit」の設定

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

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

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

図3.6.8 「Secondary Button」の設定

Group Userのサイズをボタンの横幅や高さを内部の要素の高さに揃えます。

※elementのgroupへの入れ方によっては、完成レイアウトが変わってくることがあります
(例:「container layoutをfixed・row・columnのどれに設定するか」など)

図3.6.9 「Group User」の配置調整

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

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

図3.6.10 Popupを配置

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

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

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

サイズを調整して、Standard PopupのStyleを変更します。

図3.6.12 「Popup Edit」の設定
図3.6.13 「Standard popup」の設定

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

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

図3.6.14 各エレメントの配置

画像のアップロードは、Picture Uploaderを利用します。横幅500px、高さ140px、Placeholderは「画像を選択してください」とします。もともと設定されていた際に表示されるよう、Dynamic imageは Parent group’s User’s image とします。StyleはデフォルトのStandard Image Uploaderを利用します。

図3.6.15 各エレメントの配置

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

図3.6.16 PictureUploaderの設定

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

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

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

図3.6.18 「login」の設定

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

図3.6.19 「White Button」の設定

タブを作成する

タブボタンの作成

タブを内包するグループ「Group Tab」を配置し、内部に3つのTextエレメントを配置します。

図3.6.22 TextをGroupに配置

3つのTextエレメントは全て同じサイズ(幅200px × 高さ72px)にし、名称を変更します。それぞれ隙間なく横並びにし、Group Tabを内部のエレメントに合わせたサイズにします。

図3.6.21 Textを3つ配置

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

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

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

図3.6.22 「Tab」の設定

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

図3.6.23 「Tab」の適用

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

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

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

グループ「Time Line」をコピー&ペーストし、名前を「Follow User」とします。Follow Userの(X, Y)はTimeLineの(X, Y)と同じ位置にしておきます。

図3.6.24 コピー&ペースト後の状態

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

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

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

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

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

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

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

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

※「container layoutをFixed・Row・Columnのどれに設定するか」など、elementのgroupへの入れ方によっては、完成レイアウトが変わってくることがありますcontainer layoutについては、「Row」で設定するようにしてください。

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

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

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

※「図3.26.27 各ボタンの配置」と同様、elementのgroupへの入れ方によっては、完成レイアウトが変わってくることがあります

図3.6.28 各ボタンの配置

Repeating Groupの情報を変更する

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

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

図3.6.29 Userタイプへ変更

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

図3.6.30 Data sourceを空にする

同様に、Group FollowUserのType of contentも「User」に修正します。(図3.6.31はcontainer layout が”Row”でColumn gapが20の時の画像です)

図3.6.31 「Group FollowUser」の設定

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

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

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

図3.6.32 「Follow User」の設定

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

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

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

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

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

ボタンは常にどちらかが表示され、どちらかが非表示でも同じ位置に表示したいので、2つのボタンの(X, Y)は同じ値にします。

図3.6.33 「Buttton AddFollow」の配置
図3.6.34 「Button DeleteFollow」の配置

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

図3.6.35 マイページ完成例
【未経験・経験者】システムエンジニア募集中!

当社では現在一緒に働くメンバー募集しています!
正社員でシステムエンジニアとして当社のシステム開発業務に携わってみませんか?
未経験者から経験者まで広く募集しているのでぜひエントリーをお待ちしています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

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

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

コメント

コメントする

目次