ノーコード(Bubble)によるWebアプリ開発１(5/18)

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

まず、Bubbleのトップページに来たら,右上にあるSign upからアカウント登録を行う。
その後、ログインできたらWelcome画面に飛ぶので、一番下にあるcreate a new appをクリックすると下記のような画面が出てくる。
一番上の空欄に開発するアプリ名を入力し、その他の空欄は以下の画像のように入力しアプリを作成するをクリックする。

ロードが完了すると、以下のような画面が表示される。
左側の赤字で記されているNew Application Assistantは開発するアプリの簡単な設定を行えるが、今回は無視して進めていく。
そして、下記の画面の左下にある空白のページを始めるをクリックし、アシスタントを閉じるをクリックすることで編集画面が出てくる。

編集ページが表示されたら、表示されているindexページをダブルクリックすると下記のようなプロパティ画面が表示され、画面の大きさを設定する。
今回は、幅960、高さ2000に設定し進めていく。

設定が完了したら、右側に表示されているDesignタブの中のContainersのGroupを選択し、デザインエリアの中でクリックする。
すると、Group Aが表示される。これをアプリのヘッダーとするため名前を下記の画面のようにGroup headerに変更する。
そして、それを画面の上の方にドラックして持っていき、画面いっぱいに広げて配置する。

次に、ヘッダーの色を白く変更する。ヘッダーをダブルクリックし、Styleと書かれた項目の右下にあるRemove styleをクリックする。 すると、項目が増え、Background styleからFlat　colorを選択する。

すると下記の画面ようにカラーを選択する項目が表示されるので、白にする。

次に、コンテンツをいれるボディ部分を作成する。先ほどと同じようにGroupを選択し、Group名をGroup Bodyに変更する
そして、幅を画面いっぱいの960、高さを1000に設定する。それをヘッダーの境目とぴったり重なる部分へドラックし配置する。

そしてこれもヘッダーと同様色を変更する。ヘッダーとの境目をわかりやすくするために灰色に設定する。
これでベースとなる背景の作成は終了！