ノーコード(Bubble)によるWebアプリ開発２(6/10)

TwitterのようなSNSアプリを作ってみよう＜その２＞

前回の続きで今回は画面の表示されるツイートの項目を作成する。
Visual elementsのIconを選択し、ヘッダー上でクリックし、今回はとりあえず車のアイコンを選択、サイズ調整、配置の調整を行う。

次にボタンをヘッダー上に配置する。
Visual elementsのButtonを選択し、ヘッダーの右上に配置する。
表示内容をTweetに変更し、StyleはRemove styleを選択。
Background styleのcolorから本家Twitterに似た色を選択する。
フォントも変更できるため、今回はフォントをArialに設定し、フォントサイズを１８、太字に設定する。

ツイートした内容が表示されるボディの作成をする。
Groupを選択し、名前をGroup Tweet、StyleをGroup Borderに設定する。

次に、Visual elementsの中のTextを選択し、先ほど作成したGroup上に配置する。
表示されたプロパティ内のedit meに自由に文章を書き込む。

ここまで作成できたら、ツイートの内容を格納するためのデータベースを作成する。
左側のタブの中にあるDataを選択し、New typeの中にTweetと入力すると、Userの上に Tweetというtypeが作成される。
次に、ツイートの内容を保存するフィールドを作成する。

Create a new fieldをクリックし、Field nameをMessageに設定する。
Field typeは、textを選択しCreateをクリックする。

App dataを選択した後、All Tweets、New entryの順にクリックする。
すると画面が切り替わり、MessageにはじめてのBubbleデータベースと入力し、Createをクリックする。

ノーコード(Bubble)によるWebアプリ開発３(6/20)

TwitterのようなSNSアプリを作ってみよう＜その３＞

データベースの設定が完了したら、Design画面に戻る。
Containers内のRepeating Groupを選択し、フィールド上に表示させたらサイズ調整を行う。
プロパティ内のType of contentをTweetに設定、 Data sourceはSearch for Tweetsを選択し、下記画像上段のように設置する。
その後、Layout styleをExt. vertical scrolingに設定、Rowsを１、SeparatoをNone、StyleはRemoveに設定する。
Repeating Groupのサイズをヘッダーから下画面いっぱいに設定し、先ほど作成したGroup Tweetを上に配置する。

Group TweetのType of content、Data sourceを下記画面（上）のように設定する。
次に、Textの中に入力されている文字をクリックすると、Insert dynamic dataと表示されるのでそれをクリックする。
クリックすると項目が表示され、Group Tweet→click→'s Tweet→click→'s Messageの順に設定する。

次にツイートの入力画面を設定する。
ContenersのPopupを選択し、名前をPostに変更する。（下記画像上段）
Contenersのinputを選択し、Popup上に配置、名前をPostni変更する。（下記画像中段）
Visual elementsのButtonを選択し、Popup上に配置、名前を投稿に変更、最初に作ったボタンと同じ形に設定する。（下記画像下段）