第5章Part1 homeページに投稿表示欄、投稿処理機能を実装する

bubbleチュートリアルver2 第5章Part1 homeページに投稿表示欄、情報処理機能を実装する

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

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

5.1 homeページの実装

ページ全体のstyle設定

indexページに移動し、第2章に作っておいたエレメントをすべて選択し(Ctrl+A又ページに右クリックし「Select all」をクリック)、すべてのエレメントが選択された状態で右クリックしCopy to another appをクリックします。

コピーを行う

homeページに移動し、右クリックしPasteした後、縦幅・横幅を以下の「homeの設定」通り入力します。Workflowなど含めてコピペできますので、ページや別々のアプリの間でもエレメントを楽にクローンできます。

homeに2章で作成したindexページをペースト

homeページのAttribute Styleに新規会員登録ページで利用した「Body」を設定し、背景色を白に設定します。Layoutを設定した際にページ内の要素が左に寄ります。

homeの設定:
  • Appearance
    • Page title:ホーム
    • Style Attribute:body(事前に登録済み)
  • Layout
    • Container layout:Column
    • Apply gap spacing between elements:checked
    • Row gap(px):34
    • Preset page width:Full width
    • Width for UI builder:1200px
    • Min width:320px
    • Min height:600px

bubbleでアプリケーションを作成すると自動で作成されるindexページは削除することができません。一般的にはログインページにしたり、ランディングページにすることがありますが、今回はloginページが別に存在し、indexページを利用しないため indexにアクセスした場合はリダイレクトするように設定します。

indexページに戻り、設定されているエレメント(Ctrl+Aで全選択、右クリックからDelete)は全て削除します。エレメントを削除すると、エレメントに設定していたワークフローはすべて削除されます。

indexページの状態
ワークフローの状態

ログインしている場合のワークフローをlogin又はpassword_resetからコピペします。ログアウトしている場合はloginページへ遷移、という設定を追加します。

ワークフローの状態
Go to page loginをワークフローに追加

では、homeへ戻りましょう。

5.2 ヘッダーを配置する

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

左メニューのReusable elementsから「Header」をページ上部にドラッグ&ドロップします。ページのContainer layoutがcolumnになっているため自動的に他の要素は下にずれます。

「Header」の選択
HeaderをHome上部に追加

ヘッダーを選択し画面幅いっぱいに表示するため、横幅を100%にします。

  • HeaderのLayout
    • Width:100%

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

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

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

3つのエレメントを選択

選んだ要素の上で右クリックをし、「Group elements in」の「Column container」をクリックすると、選択しているエレメント縦に並べて、内包するグループが作成されます。

Columnのグループに内包させる
「TimeLine」へ変更

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

TimeLineのグループの設定
  • Layout
    • Container layout:Column(設定済み)
    • Apply gap spacing between elements:checked
    • Row gap:20
    • Min, Max width:280px, 611px
    • Fit height to content: unchecked
    • Min, Max height:100px, inf
    • Fit height to content: checked

また、画面左側にユーザー表示部分を内包するグループ「Group_User」 を配置します。「TimeLine」の上に配置してください。

「Group User」を配置

Group Userは画像とGroup UserInfoを横並びにするため、以下の通りに設定してください。

Group Userの設定
  • Layout
    • Container layout:Row
    • Row gap:0
    • Column gap:20
    • Min, Max width:228px, 280px
    • Fit height to content: unchecked
    • Min, Max height:100px, inf
    • Fit height to content: checked
    • Top, Bottom, Left, Right Margins:10px, 10px, 10px, 10px

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

最後に、Group_UserとTimeLineを内包する本体のグループを作ります。Group_UserとTimeLineを選択した状態で、「Group elements in」>「Row container」をクリックします。グループ名を「Body」に変更します。今まで作成したグループのStyleは全てDefault Groupを選択します。

「Group elements in a Row container」を選択
「Body」へ変更
BodyのLayout設定
  • Layout
    • Container layout:Row(設定済み)
    • Apply gap spacing between elements:checked
    • Row gap:0
    • Column:34
    • Horizontal alignment:Centered
    • Min, Max width:320px, 875px
    • Fit height to content: unchecked
    • Min, Max height:0px, inf
    • Fit height to content: checked
    • Padding: Left, Right:20px, 20px
Bodyの設定

Bodyの内部にGroup UserとTimeLineが入って、Tweet_Inputと投稿ボタンをGroup_TweetEditというグループ(Column)にグループ化します。

Group_TweetEditのLayout設定:
  • Layout
    • Container layout:Column
    • Row gap:10
    • Horizontal alignment: Center
    • Min, Max width:280px, 500px
    • Fit width to content: unchecked
    • Min, Max height:100px, inf
    • Fit height to content: checked

Tweetと投稿ボタンやRepeating Group&テキストエレメントのwidthを100%、必要に応じてheight(固定値で設定)も直します。

グループ化後にグループ化されたエレメントを広さをもとに戻します

5.4 画像添付を実装する

Picture Uploaderを追加する

投稿入力欄Tweet、投稿ボタンbutton_save_tweetの間に Input forms > Picture Uploader を以下のように設置します。

PictureUploader_tweetを設置

ユーザーがPicture Uploaderをクリックすると、ファイルの選択ダイアログが表示されます。ファイルを選択した時点で、bubbleのファイルストレージに画像のアップロードが実行されます。

PictureUploader_tweetのLayout設定:
  • Horizontal alignment:Left
  • Make this element fixed-width: checked
  • Width:100%
  • Make this element fixed-height: checked
  • Height:50px

Tweetテーブルを変更する

Data > Data typesタブから、Tweetテーブルに画像の保存用カラムを追加します。

TweetにCreate a new fieldにてimageカラム(Field name: image, Field type: image)を追加します。

Tweetにimageカラムを追加

ついでにUser typeを確認し、第4章2で追加したnameがあることを確認しプロフィール画像を保管できるfield、imageも作っておきましょう。

Uset typeにimageフィールドを追加

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

Bodyの内部TimeLineの左隣にあるGroup_Userのデータソースを設定します。TimeLineと違って、内部のエレメントはすべてUserテーブルからデータを表示するため、Type of content: User、Data source: Current Userに設定します。

Group_Userを配置しTypeを設定

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

ユーザー情報のアイコンを表示します。画像を表示させるためには Visual elements > Image をGroup_User内部にドラッグします。名称はUser_Imageにしておきます。Data sourceはParent group’s User’s imageにします。なぜCurrent Userではなく、Parent group’s Userにするか疑問を抱くと思いますが、Group_Userを別のページにそのまま再利用する場合、Currentではなく、親グループのユーザー(Parent group’s User)を使うことでGroup_User内部の各エレメントのData sourceを変更せずにGroup_User自体のData sourceのみの変更で済むため、上記のやり方は作業効率や時短に向いています。

User_ImageのLayout設定:
  • Make this element fixed width:checked
  • width:100px
  • Make this element fixed height:checked
  • height:100px
「User_Image」の座標設定

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

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

Roundnessの値指定

このStyleをUser Imageとして保存しておきます。今度画像を入れる際、このスタイルにすると自動的にRoundness 50になります。

User_ImageのConditional設定する

まずビジュアルエディタで、User_Imageのプロパティエディタを開きます。このままだと画像が登録されていないときに表示されないため、Conditionalタブで「Userテーブルのimageカラムに画像が存在しないとき」固定の画像を表示するように設定します。

以下の画像をダウンロードしておいてください。

デフォルトのユーザー画像

Conditionalタブで Whenを「Parent group’s User’s image is empty 」となるように選択します。プロパティは Image Source を選択し、Static imageにダウンロードした画像を設定します。

User_Imageの設定

これで、ユーザー画像が登録されていないときは設定した画像が表示されるようになります。

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

Group User内部に”アイコンの横にユーザー名等を表示するエレメントを内包するグループ”を配置します。グループの名称をGroup UserInfoとしました。Type of content User, Data source Parent group’s Userの設定をします。

Group UserInfoのLayoutの設定(チェックをしない項目は表記を省略):
  • Container layout:Column
  • Apply gap spacing between elements:checked
  • Row gap:8
  • This element is visible on page load:checked
  • Min, Max width:108px, inf
  • Min, Max height:76px, inf

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

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

Group UserInfoの設定

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

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

Group UserInfoのLayout:
  • Min, Max width:108px, inf
  • Min, Max height:20px, inf
  • Fit height to content:checked

Text_Post_CountのData source: Do search for → Type Tweet → +Add a new constraint → Created by = Parent group’s Userに設定し → :count、「投稿」をテキスト入力します。

Text_Post_CountのData source設定
countを適用

Text_Post_CountのStyleは「Small_text_info」として保存します。Appearance設定内容は以下のとおりです。

Small_text_infoの設定:
  • Font:Inter, 400
  • Font size:12px
  • Left alignment/左揃え
  • Color:#000000
  • Word, Line, Letter spacing:0, 1.4, 0
  • Center the text vertically:checked
Text_UserNameの設定

Text_UserNameのData sourceをParent group’s User’s nameに下記のパラメータでスタイルを設定し、「Username」として保存します。

Style UsernameのAppearance設定:
  • Font:Inter, 600
  • Font size:14px
  • Left alignment/左揃え
  • Color:#000000
  • Word, Line, Letter spacing:0, 1.4, 0
  • Center the text vertically:checked

LinkエレメントLink_Mypageのリンク先はまだ設定しません。スタイルは「12px Blue Link」として保存します。設定内容は以下のとおりです。

12px Blue LinkのAppearance設定:
  • Font:Inter, 500
  • Font size:12px
  • Left alignment/左揃え
  • Color:#2D9CDB
  • Word, Line, Letter spacing:0, 1.4, 0
  • Center the text vertically:checked
Group_User内Elementの設定が完了

投稿欄を調整する

投稿欄Tweetから名前をTweet_inputに変更し以下のLayoutに設定します。

Tweet_inputのLayout設定:
  • Make this elements fixed width:checked
  • Width:100%
  • Make this elements fixed height:checked
  • Height:180px
  • Top, Bottom, Left, Right Padding:10px, 10px, 10px, 10px

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

Style Tweet InputのAppearance:
  • Font:Inter, 400
  • Font size:14px
  • Left alignment/左揃え
  • Color:#000000
  • Word, Line, Letter spacing:0, 1, 0.5

投稿するボタンButton_post_tweetの名称をbutton_save_tweetに変更し、以下の通りに設定します。

button_save_tweetのLayout:
  • Make this elements fixed width:checked
  • Width:100%
  • Make this elements fixed height:checked
  • Height:55px

投稿ボタンのスタイルはPost Buttonにします。

ここでTweet_input、PictureUploader_tweet、button_save_tweetをGroup_TweetEditというグループに入れておきます。3つのエレメントを選択した状態で右クリックし、「Group element in」>「Column container」をクリックします。

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

Group_TweetEditの設定

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

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

エレメントの名前がRG_Timeline_tweetとなっている場合には、RepeatingGroup_Tweetと変更してください。また、投稿の表示数は1ページに5件としたいので、AppearanceタブからRowsを5にします。Appearanceタブの「Show partial list on last page if needed」にチェックを入れておきます。このチェックがないと最終ページを表示した際に5件存在しない場合、前のページに表示されていたアイテムも含め5件表示されてしまいます。

「Default Repeating Group」の設定

ツイート内容を作成する

RepeatingGroup_TweetのData sourceはDo search for > Tweet、 sort by Created date descending はい/yesになっているか確認し必要に応じて再設定します。

RepeatingGroup_TweetのLayout設定
  • Container layout:Column
  • Min, Max width:280px, inf
  • Min, Max height:0px, inf

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

既存のTextエレメント「Tweet」を選択しCtrl+Gでグループ化します。Data sourceはCurrent Cell’s Tweetになっているか確認し必要に応じて再設定します。グループ名をTweetにします。

TweetのLayout設定:
  • Container layout:Row
  • Apply gap spacing between elements:checked
  • Row gap:0, Column gap:28
  • Horizontal alignment: Center
  • Min, Max width:0px, inf
  • Min, Max height:100px, inf
  • Fit height to content: checked
  • Padding: Top 12, Bottom 12, Left 20, Right 20

続いて、投稿者の画像(アイコン)を表示するImageエレメントをTweet内に配置し、サイズを調整します。名称は「Creator_Image」としましょう。Creator_imageのDynamic image(=イメージソース)はParent group’s Tweet’s Creator’s imageにします。ちなみに、Tweet’s CreatorのタイプはUserですので、Tweet’s Creator’s imageは本章の5.4でUser Typeで設置したimageカラムを参照し、Tweet Type内では追加でCreator’s imageカラムなど作成する必要がありません。ただし、UserのimageのConditionalを設定しなければなりません。When Parent group’s Tweet’s Creator’s image is emptyの条件に対してImage Sourceは本章の5.5で保存したアバター画像をアップしておいてください。

StyleをUser Imageにすると、自動的にRoundnessが50になります。

Creator_ImageのLayout設定:
  • Vertical alignment: Top (上)
  • Min, Max width:40px, 100px
  • Keep element aspect ratio fixed: checked
  • Aspect ratio: W 1 x H 1

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

先ほど左側Group UserInfo内に作成したエレメント(投稿者名とリンク)を再利用します。投稿者の名前 Text_CreatorName (Style Username、中身:Parent group’s Tweet’s Creator’s name)をTweet内に配置します。同様にLinkエレメントをコピー&ペーストし、名称を「Link_Creator」にします。

ツイート中身を表示するTextエレメントの名前はTweet_text_contentにして、スタイルは「Tweet_text_body」に戻します。(ゼロから作成する方は下記のパラメータを使ってください)

Tweet_text_bodyのAppearance(確認用):
  • Font:Inter, 400
  • Font size:16px
  • Left alignment/左揃え
  • Color:#3B3B3B
  • Word, Line, Letter spacing:0, 1.4, 0.5
  • Background style:None
Tweet_text_contentのLayout:
  • Horizontal alignment: Left / 左揃え
  • Min, Max width:0px, inf
  • Min, Max height:20px, inf
  • Fit height to content: checked

タイムラインに画像(投稿の要素)を表示させる

Group Tweet内にImageエレメントを追加します。

各エレメントの配置

現段階ではエレメントがごちゃごちゃしていますので、グループ化して整理しましょう。Group Tweet内に以下の通りにエレメントを並べてグループ化させます。

Element Treeで構造及び名称確認
Group_TweetDataのLayout設定:
  • Container layout:Column
  • Row gap:8
  • Min, Max width:100px, 500px
  • Fit height to content: unchecked
  • Min, Max height:100px, inf
Group_Tweet_contentのLayout設定:
  • Container layout:Column
  • Row gap:8
  • Make this element fixed-width: checked
  • Width:100%
  • Min, Max height:0px, inf
  • Fit height to content: unchecked

なお、名前のテキストエレメントとリンクエレメントをFit width/height to contentにし、Min/Max width/height 0px, infにします。

Tweet_text_contentをMin/Max width 0px, inf、Fit width to contentチェックなし・Min/Max height 20px, inf、Fit height to contentにチェック入れます。

Tweet_imageのDynamic imageは、投稿の画像になるように設定します。空欄をクリックするとInsert Dynamic Dataが現れるので、クリックしParent group’s Tweet’s imageに設定しましょう。Run-mode renderingは Rescaleのままにしてください。Rescaleにすると正方形でない場合、長い方の辺に合わせてエレメント内に画像が収まるよう、縮尺されます。

Tweet_imageの設定
Tweet_imageのLayout設定:
  • This element is visible on page load:checked
  • Collapse when hidden:checked
  • Horizontal alignment: left (左)
  • Make this element fixed-width:checked
  • Width:100px
  • Keep element aspect ratio fixed:checked
  • Aspect ratio: W 1 x H 1

また、画像が投稿されていないときは表示しないようにConditionalを設定します。

Tweet_imageのConditionalの設定

最終的に以下の形になります。

Repeating Group内のTweet内容の見た目

画像のみでも投稿できるようにする

button_save_tweetにConditionalを追加します。入力がないと投稿できないように必須チェックを追加していましたので、テキストまたは画像があれば投稿できるように追加します。「Tweetの値とPicutureUploaderの値が両方とも空のときクリック不可」にします。投稿入力欄TweetのConditionalタブで、「PicutureUploaderの値が空でない場合は必須にしない」ように設定します。

button_save_tweetのConditional設定
Tweet_inputのConditionalの設定

TweetData欄はあらゆるページで使うため、第3章のReusableのメリットを考えてReusableに変換しておきましょう。Tweetの全体を表すTweetグループを選択した状態で右クリックし「Convert to a reusable element」にします。名前はTweetにして、そのReusableエレメントのページに移動します。

Reusableに変換します

ここはもう特に変更することはありません。TweetのAppearanceのType of contentが「Tweet」に設定されていることを確認しておきましょう。

ここで注意が必要で、homeページからReusable elementにしても、homeページのTimelineのRepeatingGroup_Tweet内のグループTweetはReusableではないので置き換えが必要です。homeページに戻って、一旦RepeatingGroup_Tweet内のTweetを選んで消します。Min height 0の設定により、Repeating Groupへの追加難しいので、Tweetをページ内の適当な場所において、Element Treeを使ってTweetをRepeatingGroup_Tweet内にドラッグアンドドロップしてみてください。

以前と少し変わった形になりますが、preview等で確認すれば、Reusableにする前の状態のままになっています。Reusableエレメントをドロップした時点ではData sourceがない状態になっているため、previewでは実際の値が反映されません。

Data sourceが空の状態

Data sourceをCurrent Cell’s Tweetにしたら、設定完了となり、previewでは内容の確認も可能になります。

Data sourceを設定する

5.6 タイムラインページで投稿処理を実装

投稿処理を実装する

投稿の処理については、第2章は作成したボタンのワークフローが残っていますが、一応間違いがないか確認し、必要に応じて以下のスクリーンショットに合わせください。イメージを追加もします。

ワークフローの状態

Placeholderを「今どうしてる?」に変更してください

プレビューで確認する

それでは投稿して投稿を表示するところまで確認してみましょう。ログインしてhomeページを表示します。投稿するボタンはクリックできないようになっています。

homeのプレビュー

第2章でボタンを押してhelloを送った時のTweetデータが保存されている方は、無名プロフィールの投稿が見えますが、Data→App Data→All Tweetsから削除できます。

不要なデータベースのレコードを削除する

Userデータがない場合、実際にユーザーを試しに登録してみてください。(signupをプレビューして登録を行ってみてください。)

好きな文言を投稿してみましょう。

投稿後の動作例

投稿と、ユーザー名・ユーザーアイコンが表示されていれば成功です。

画像アップロード機能もプレビューで確認する

プレビューを表示し、画像を添付して投稿してみましょう。画像が添付されて投稿されたことが確認できます。

preview画面例
動作後の状態例

\ 高品質×高速開発 /
ノーコード・ローコード開発ならBOLT

「Webアプリケーション開発を高品質かつ高速で依頼したい…」そんな方に弊社のBOLTをご提案します。

  • 企画・提案力を武器にした上流工程支援
  • 高品質と高速を両立する開発支援
  • お客様第一の進行管理
  • 継続的なアップデート体制

システム開発の内製化やDXでお悩みの方はぜひご相談ください!

  • URLをコピーしました!

お役立ち資料



資料請求はこちら

資料請求

お問い合わせはこちら

お問い合わせ
目次