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

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

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

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

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

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

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

ヘッダーを配置する

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

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

Header A という名称でドラッグした位置にエレメントが配置されるため、ページの一番上に表示されるように（X, Y）の位置を（0, 0）に設定します。

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

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

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

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

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

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

最後に、Group UserとTimeLineを内包する本体のグループを作ります。Group UserとTimeLineを選択した状態で、「Group elements in a Fixed container」をクリックします。

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

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

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の内部にユーザー名を表示するTextエレメント、投稿数を表示するTextエレメント、マイページへのリンクを表示するLinkエレメントをそれぞれ配置します。サイズはFigmaを参考に設定します。

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

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

Group UserやGroup UserInfoのサイズを調整しておきます。

投稿欄を調整する

投稿欄のサイズをFigmaを参考に変更します。

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

タイムラインの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の内部を作成していきます。

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

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

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

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

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

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

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

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

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

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

Text CreatorName、Link Creatorの配置と、投稿を表示するTextエレメントTweetのサイズと位置を調整します。

ページングを作成する

ページの高さをプロパティエディタにて調整

ここで、ページの高さがページング要素を作成する余裕がなくなっているため、高さを調整します。

高さの調整はページのプロパティエディタで変更します。

ページを選択した状態にします。

Heightの数値を大きくし作業をしやすくします。

同様に グループ「Time Line」、「Body」の高さも広げておきます。

ページング要素を作成

グループ「Time Line」内にグループ「Group Paging」を配置し、サイズを調整します。

アイコンを配置

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

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

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

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

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

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

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

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

Data sourceは別途設定します。

RG Pagingのサイズや位置、Cell’s container layout「Row」を調整します。
※画像上では「Fixed」と記載されていますが、「Row」を選択してください。

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

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

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

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

ページング要素を作成したら、グループ「Body」「TimeLine」、ページ本体の高さを調整しておきます。

最後に「Body」をページ横位置中央に配置します。

「Body」を選択した状態で右クリックし「Center horizontally」を選択します。

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