タイムラインページの作成します。

タイムラインページを作成する

ログイン後の投稿をするページ、投稿を表示するページを作成していきます。

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

第2章で作成した、ツイートして表示するページを流用して作成していきます。

第2章ではindexページに作成していましたので、「home」というページ名でindexページをクローンします。

ページの基本設定を他のページに合わせる

indexページはbubbleのデフォルトサイズになっているため、homeページに移動し、縦幅・横幅を以下の通り入力します。ページのStyleを新規会員登録ページで利用した「Body」を設定し、背景色を白に設定します。

 homeページにレスポンシブエンジンを適用し、Container layoutはColumnを選択します。

ヘッダーを配置する

第3章2で作成した「Reusable elements」のヘッダーを画面に配置します。

左メニューのReusable elementsから「Header」をページにドラッグ&ドロップします。

レスポンシブエンジンを起動しヘッダーを選択し画面幅いっぱいに表示するため、横幅を100%にします。

ページの枠組みを用意する

ページに複数のエレメントが存在する場合、セクションごとにグループでまとめておくようにしましょう。ページ本体やメインとなる要素には「Body」や「Main」などの名前をつけるのが一般的です。

すでに存在する投稿欄、投稿ボタン、投稿表示はページ本体のグループ内部に配置したいため、まず3つのエレメントを選択します。

この状態でプロパティエディタの「Group elements in a Fixed container」をクリックすると、選択しているエレメントを内包するグループが作成されます。

Group Aという名称でグループが作成されるので、TimeLineという名称に変更しておきます。

TimeLineの各エレメントを縦に並べたいので、Container layoutはColumn、Apply gap spacing between elementsにチェックを入れ、Row gapは20とします。Min widthは280px、Min heightは100pxにします。

また、画面左側のユーザー表示部分を内包するグループGroup User を配置します。（GroupはサイドバーのContainersから配置します。）

Group Userは画像とGroup UserInfoを横並びにするため、レスポンシブエンジンを起動してContainer layoutをRow、Apply gap spacing between elements にチェックを入れColumn gapを20とします。

横幅はもともと228pxですが、スマートフォンで表示したとき横幅いっぱいになるようにMax Widthを280pxにしておきます。

最後に、Group UserとTimeLineを内包する本体のグループを作ります。

Group UserとTimeLineを選択した状態で、「Group elements in a Row container」をクリックします。

グループ名を「Body」に変更します。今まで作成したグループのStyleは全てDefault Groupを選択します。

Body内部のGroup UserとTimeLineを横に並べるため、Container layoutはRowにします。Padding Left / Rightに20pxを設定しておきます。Apply gap spacing between elementsにチェックを入れ、column gap を34にします。

Horizontal alignmentはCenteredを選択します。

ユーザー情報の表示を作成する

Group Userの内部に、ユーザー情報を表示させるためのエレメントを配置していきます。

画像を表示させるためには　Visual elements > Image をGroup User内部にドラッグします。後でレスポンシブ対応を行いますが、一旦Figmaを参考にサイズは100px四方に、配置は親グループから見て左上になるよう（X, Y） = （0, 0）とします。名称はUser Imageにしておきます。

画像を円にするには、Styleで指定します。

Roundnessはエレメントの角の丸め具合をピクセルで設定します。Style下にある「Remove style」を押し、画像サイズは100pxなので、半分の50px丸める設定にすると円になります。選択肢にない数字でも直接入力することで任意の値を設定できます。

このStyleをUser Imageとして保存しておきます。

ユーザー名等の情報表示部分を作成する

画像横にユーザー名等を表示する部分を内包するグループをGroup User内部に配置します。グループの名称をGroup UserInfoとしました。

Group UserInfoはこれから配置していくエレメントを縦並びにするため、Container layoutはColumnにし、Apply gap spacing between elements にチェックを入れ、Column Capを8にします。

横幅はMake this element fixed-widthのチェックを外しておきます。こうすると、Group Userの内部で、ユーザー画像とColumn Gapを除いたサイズまで自動で横幅を広げてくれます。

Group UserInfoの内部にユーザー名を表示するTextエレメント、投稿数を表示するTextエレメント、マイページへのリンクを表示するLinkエレメントをそれぞれ配置します。

Group UserInfo内部のTextエレメントやLinkエレメントの横幅は、LayoutからMake this element fixed-widthのチェックを外します。

Fit height to contentにチェックがついていることを確認します。

Text エレメントのスタイルはページの多くの場所で利用されているので、デフォルトのBodyスタイルを編集し、以下のように登録します。

LinkエレメントのスタイルもFigmaを参考に以下のように設定します。スタイルの名前を「12px Blue Link」とします。

投稿欄を調整する

レスポンシブエンジンを起動して投稿欄Tweet、投稿するボタンSave Tweetは横幅を100％に設定しておきます。

投稿入力欄のスタイルは以下の通り設定し、Tweet Inputとして保存します。

ここでTweet、Save Tweet、をGroup TweetEditというグループに入れておきます。2つのエレメントを選択した状態で右クリックし、Group element in a Column containerをクリックします。

2つのエレメントがGroupで囲まれますので、名称をGroup TweetEditに変更します。

エレメントを縦並びにするため、Container layoutはColumn、Apply gap spacing between elementsにチェックを入れRow gapは10、Min widthは280px、Min heightは100pxにします。

内部のTweet、Picture Uploader、Save Tweetは横幅100%に設定します。

タイムラインのRepeating Groupを修正する

既存のRepeatingGroup Tweetのサイズを調整します。

また、投稿の表示数は1ページに5件となっているので、AppearanceタブからRowsを5にします。

Appearanceタブの「Show partial list on last page if needed」にチェックを入れておきます。このチェックがないと最終ページを表示した際に5件存在しない場合、前のページに表示されていたアイテムも含め5件表示されてしまいます。

Repeating GroupのデフォルトStyle「Standard Repeating Group」は以下のように修正します。Separatorを指定すると、Repeating Groupの要素の間に線が表示されますが、今回はNoneにして指定しないようにしました。

ツイート内容を作成する

Repeating Groupの横幅を280px〜にしておきます。また、このRepeating GroupのCell’s Container layoutはcolumnに設定します。

Repeating Groupの内部を作成していきます。

既存のTextエレメント「Tweet」を選択した状態で右クリックし「Group elements in 」→「Row container」をクリックします。

新しく作成したグループはGroup Tweetとなっているので、このままにします。

サイズを調整し、Group Tweetはセルの中央に配置します。

投稿者の画像を表示するImageエレメントを配置し、サイズを調整します。名称は「Creator Image」としました。

Creator Imageのサイズを40px〜100pxとなるように設定します。画像やShapeは「Keep element aspect ratio fixed」にチェックを入れるとアスペクト比（縦横比）を保ったまま縮小されます。

要素をコピー＆ペーストする

先ほど左側Group UserInfo内に作成したエレメントをコピー＆ペーストして、投稿者の名前、リンクを表示するためのエレメントを配置します。

まずコピーしたいエレメント（Text UserName）を選択した状態で右クリックのメニューから「Copy」を選択します。

コピー先のエレメント（Group Tweet）を選択した状態で右クリックのメニューから「Paste」を選択します。

以下のようにText UserNameが作成されるので、名称を「Text CreatorName」にしておきます。

同様にLinkエレメントをコピー＆ペーストし、名称を「Link Creator」にします。

Group Tweetの内部エレメントTweet、Text CreatorName、Link Creator、Tweet Imageを選択し、Group elements in a Column containerでグループを作成します。

このグループをGroup TweetDataという名称にします。

次にGroup TweetのContainer layoutをRow、Apply gap spacing between elementsにチェックを入れColumn gapを28にします。

横幅は100%、高さは小さめの100pxでFit height to contentにチェックを入れ、Paddingを設定します。

ページングを作成する

ページング要素を作成

グループ「Time Line」内にグループ「Group Paging」を配置し、ページングの数字は横並びなので、レスポンシブエンジンを起動してContainer layoutをRowにします。

Column gapを設定するとスマートフォンの時に横幅が入りきらないことがあるので、Container alignmentをSpace betweenにします。こうすると横幅に余裕がある場合、エレメントの間に余白が作成され、余裕がない場合は余白がなくなります。

横幅は280px〜とします。

アイコンを配置

bubbleにはfont awesomeというアイコンのうちいくつかが用意されています。

Group Paging内に Visual elements > Icon をドラッグし、名称を「Icon Prev」にします。

アイコンを変更するには、Iconをクリックすると複数のアイコンが表示されるので、利用したいアイコンを選択します。リアルタイムでアイコンが変更されるのが確認できます。

サイズ、スタイルを調整します。

「＞」のアイコンは、Icon Prevをコピー＆ペーストし、名称とサイズを調整します。

レスポンシブエンジンを起動してIcon Prev、Icon NextはVertical alignmentをcentered（高さ中央）にしておきます。

数字を表示するエレメントは、Repeating Groupを利用します。Group Paging内にRepeating Groupを配置し、名称を「RG Paging」とします。

数字を横に表示するため、Type of contentを「number」、Rows「1」、Columns「7」とします。

RG Pagingの横幅は、280 – ( 22 × 2 ) = 236px に設定します。最大値の280pxから、Icon Prev、Icon Nextの横幅を引き算したサイズです。

Type of content、Data sourceに値を設定すると、Repeating Groupにデータのリストを設定することができます。この場合、「数字リスト」をRepeating Groupに設定したことになります。

Data sourceは別途設定します。

RG Pagingの内部にTextエレメントを配置しスタイルを調整します。

Text Pagingを選択した状態で、表示テキストを編集するエリアで「Insert dynamic data」をクリックします。

選択可能な動的データが表示されるので、「Current cell’s number」を選択します。

このようにすると、Repeating Groupに設定された「数字リスト」に対してこのセルに対する「数字」を表示するようになります。

Text Numberの横幅は30〜44pxにします。Text Numberの横幅が、RG Pagingに入りきるサイズです。

以上でタイムラインページのレイアウトの作成が完了しました。