MENU

3.5 タイムラインページの作成

目次-全章

図3.5.1 タイムラインページ完成例
目次

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

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

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

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

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

図3.5.2 新規ページ作成例

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

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

図3.5.3.1「home」のStyle設定
図3.5.3.2「home」のサイズ設定

ヘッダーを配置する

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

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

図3.5.4 「Header」の選択
図3.5.5 「Header」の配置

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

図3.5.6 「Header」の位置調整

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

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

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

図3.5.7 Group elements in Fixed containerを選択

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

図3.5.8 「TimeLine」へ変更

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

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

図3.5.9 「Group User」を配置

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

図3.5.10 「Group elements in a Fixed container」を選択

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

図3.5.11 「Body」へ変更

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

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

画像を表示させるためには Visual elements > Image をGroup User内部にドラッグします。Figmaを参考にサイズは100px四方に、配置は親グループから見て左上になるよう(X, Y) = (0, 0)とします。名称はUser Imageにしておきます。

図3.5.12 「User Image」の座標設定

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

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

図3.5.13 Roundnessの値指定

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

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

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

図3.5.14 「Group UserInfo」の配置
図3.5.15 「Group UserInfo」の設定

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

図3.5.16 各エレメントの配置

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

図3.5.17 「Body」の設定

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

図3.5.18 「12px Blue Link」の設定

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

図3.5.19 各エレメントのサイズ調整

投稿欄を調整する

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

図3.5.20 「Tweet」の設定

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

図3.5.21 「Tweet Input」の設定
図3.5.22 「Save Tweet」の設定

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

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

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

図3.5.23 「RepeatingGroup Tweet」の設定

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

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

図3.5.24 「Standard Repeating Group」の設定

ツイート内容を作成する

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

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

図3.5.25 「Group elements in 」→「Row container」を選択

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

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

図3.5.26 「Group Tweet」の配置

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

図3.5.27 「Creator Image」へ変更

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

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

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

図3.5.28 Copyを選択

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

図3.5.29 Pasteを選択

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

図3.5.30 「Text CreatorName」へ変更

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

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

図3.5.31 各エレメントの調整

ページングを作成する

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

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

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

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

図3.5.32 ページ高さの調整

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

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

ページング要素を作成

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

図3.5.33 「Group Paging 」の設定

アイコンを配置

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

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

図3.5.34 Iconの選択と設定

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

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

図3.5.35 「Icon Prev」の設定
図3.5.36 「Standard Icon」の設定

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

図3.5.37 Iconの位置調整

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

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

図3.5.38 「RG Paging」の設定

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

Data sourceは別途設定します。

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

図3.5.39 「RG Paging」の座標設定

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

図3.5.40 Textの配置
図3.5.41 「Paging Number」の設定

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

図3.5.42 「Insert dynamic data」へ

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

図3.5.43 「Current cell’s number」を選択
図3.5.44 「Current cell’s number」を選択した状態

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

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

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

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

図3.5.45 「Center horizontally」を選択

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

図3.5.46 レイアウト完成例
【未経験・経験者】システムエンジニア募集中!

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

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

この記事を書いた人

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

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

コメント

コメントする

目次