MENU

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

bubbleチュートリアルver1第3.5章 タイムラインページの作成

目次-全章

第1章 bubbleについて(bubbleの基礎知識からアカウントの作成、アプリ開発まで)
第2章 かんたんなアプリケーションを作成
第3章 ページレイアウト(UIデザイン)を作成
第4章 データベースの設計
第5章 ユーザー登録、ログインを試してみる
第6章 ユーザーログイン時の処理を実装してみる
第7章 ユーザー情報を更新、削除(退会、解約)できるようにしてみる
第8章 メールアドレス認証を実装してみる
第9章 パスワードの再設定、パスワードリセット機能を実装してみる
第10章 ユーザーがツイートできるようにする
第11章 ユーザーのフォロー機能、タイムライン表示機能をつくってみる
まとめ

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

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

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

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

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

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

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

図3.5.2 新規ページ作成例

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

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

図3.5.3「home」のStyle設定

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

図3.5.4 homeの設定

ヘッダーを配置する

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

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

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

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

図3.5.7 Headerの設定

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

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

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

図3.5.8 Group elements in Fixed containerを選択

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

図3.5.9 「TimeLine」へ変更

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

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

図3.5.10 TimeLineの設定

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

図3.5.11 「Group User」を配置

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

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

図3.5.12 Group Userの設定

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

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

図3.5.13 「Group elements in a Row container」を選択

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

図3.5.14 「Body」へ変更

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

Horizontal alignmentはCenteredを選択します。

図3.5.15 Bodyの設定

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

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

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

図3.5.16 「User Image」の座標設定

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

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

図3.5.17 Roundnessの値指定

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

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

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

図3.5.18 「Group UserInfo」の配置 

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

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

図3.5.19 Group UserInfoの設定

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

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

図3.5.20 Fit height to contentにチェック

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

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

図3.5.21 「Body」の設定

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

図3.5.22 「12px Blue Link」の設定

投稿欄を調整する

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

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

図3.5.23 「Tweet Input」の設定 
図3.5.24 「Save Tweet」の設定

ここで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にします。

図3.5.25 Group TweetEditの設定
図3.5.26 Group TweetEditの設定

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

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

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

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

図3.5.27 「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.28 「Standard Repeating Group」の設定

ツイート内容を作成する

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

図3.5.29 container layoutとMin widthの設定

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

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

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

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

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

図3.5.31 「Group Tweet」の配置

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

図3.5.32 「Creator Image」へ変更

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

図3.5.33 Creator imageの設定

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

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

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

図3.5.34 Copyを選択

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

図3.5.35 Pasteを選択

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

図3.5.36 「Text CreatorName」へ変更

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

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

図3.5.37 Group elements in a Column containerを選択

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

図3.5.38 Group TweetDataの設定

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

図3.5.39 Group Tweetの設定

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

図3.5.40 Group Tweetの設定

ページングを作成する

ページング要素を作成

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

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

図3.5.41 Group Pagingの設定①

横幅は280px〜とします。

図3.5.42 Group Pagingの設定②

アイコンを配置

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

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

図3.5.43 Iconの選択と設定

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

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

図3.5.44 「Icon Prev」の設定 
図3.5.45 「Standard Icon」の設定

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

図3.5.46 Iconの位置調整

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

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

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

図3.5.47 「RG Paging」の設定

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

図3.5.48 RG Pagingのレスポンシブ設定

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

Data sourceは別途設定します。

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

図3.5.49 Text Numberの配置
図3.5.50 「Paging Number」の設定

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

図3.5.51 「Insert dynamic data」へ

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

図3.5.52 「Current cell’s number」を選択 
図3.5.53 「Current cell’s number」を選択した状態

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

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

図3.5.54 Text Numberの設定

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

図3.5.55 レイアウト完成例
実際に働く社員とカジュアル面談しませんか?

【毎週金曜日開催中】カジュアル面談しませんか?


参加はこちら!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

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

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

コメント

コメントする

目次