マイページを作成する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

タブを作成する

タブボタンの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Repeating Groupの情報を変更する

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

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

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

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

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

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

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

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

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

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

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

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

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

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