ノーコード bubble 解説_Twitterのようなアプリ制作_1

 

 

Twitter のようなアプリ完成イメージです。

まずは今から作るアプリをざっくりご説明、その後実際に作りながら丁寧に解説します。

 

今から作るアプリの説明

Web上で見た時の説明です。

ユーザー登録画面のURLを友人などに送ってメールアドレスとパスワードを「登録」してもらえば入れます。

 

「つぶやく」ボタンを押すと同じ画面に文字を入力するポップアップ画面が出ます。「投稿」したつぶやきは上から順にタイムラインに乗ります。

 

左上アイコンを押すと「ログアウト」「プロフィール」ポップアップが降りてきます。「ログアウト」を押すと自動で「ログイン」画面に移動します。ログインしている人の名前が左上アイコンの下に表示されます(例:ガール)。「プロフィール」を押すとログインしている人自身の画像や名前、紹介文などがサイト上で編集出来ます。

 

 

BubbleでどのUIを使って作るのか

UI Builder 左側には文字が書けるText やボタンButtonなど色々並んでいます。このどれを使って作ったかです。例えば左上の3人はImage で画像を取り込んで。

 

その下青い枠になっている所はText で、ここをCurrent User’s Name にする事でCurrent= ”現在”ログインしている人の名前が入る設定にしました。

 

ヘッダーのピンク部分はGroup、その上にIcon で吹き出し、Buttonでツイートボタン。
下のタイムライン部分、ログインした人によって変更する(今はガール)アイコンはGroup(Imageを使わなかった理由は後程)、名前とツイート文はText です。

 

上から下に順番に表示されるツイートの大枠はRepeating Group です。その下のグレーと上の線で囲んだ白い四角はGroup です。Repeating Group はデータベースと連携させています。

 

Data データベースを見てみます。今は3人がユーザー登録しています。鉛筆マークをクリックして編集できます。

 

このような内容で今から

  • 1: ユーザー登録ページ(signup)
  • 2: トップページ(index)
  • 3: ログイン(login )
  • 4: プロフィール(profile)

の4ページを作ります。

ファイッ

 

なお、今回レスポンシブ対応まで解説するとボリュームが一杯で横道に逸れるためしていません。スマホや画面を狭くした時はレイアウトが上のように崩れますのでそれは

ノーコード bubble 解説_レスポンシブデザイン

を見るなどして修正してください◎

それではトップページindexから作り始めます。

 

 

トップページ制作

真っ新なページを用意します。ページの横幅は1080のままで高さは(デフォルトは3146)適当に1000としました。

 

ヘッダーheader 制作

ヘッダーを作ります。Group でページと同じ横幅1080、高さ80にしX軸Y軸(配置の時のX軸Y軸の考え方はページの上にぴったり付けたいので0とします。

Style はRemove してBackground style をFlat color にしてからColorを#FFD6C2ピンクにしました。

 

Icon を真ん中辺りに配置、合いそうな物を選びヘッダーの高さ80の中に収まる65にし、アイコンの上で右クリック>Center horizontally (水平方向に中央に配置)で正確に中央にしました。

ノーコード bubble 解説_Elements tree,Icon,等間隔に並べる

 

Image で左上に画像を入れます。Uploadを押して

 

画像を選択。これもヘッダーの中に入る大きさにします。

 

Imageで配置した画像が横に広がる

Make this element fixed-width(この要素を固定幅にします)にチェックを入れます。

 

Buttonで右上にボタンを作ります。”つぶやく”にして色などスタイルを変更したいのでEdit style をクリック、

ノーコード bubble 解説_文字とボタンのデザイン

 

 

好みに変更します。

 

Primary Button のデフォルトだとConditional は(3)になっていましたが不要な項目のバケツマークをクリックして削除、ホバー色は少し濃く設定しました。そしてこのスタイルは今後も使いたいので分かりやすくE button と変更しました。

 

Design の方に戻るとボタンのスタイル名がちゃんと変更されていました。ヘッダーの見た目はひとまず完成です。

 

ここまで作ったヘッダーの構成をElements tree で見るとこうです。(親)Group Aの中に(子)の要素が3つ入っています。このままだと後々分かりにくいので名前を変更しておきます。

 

変更しなくても問題は無いのですが文字を見ただけで何となく予想が付くので便利です。

 

 

ボディーbody 制作

ヘッダーの下を作ります。メインと言ったりボディー(ヘッダーとフッターの間なので)と言ったりしますがここではボディーで行きます◎

 

Group で薄いグレーを引きます。横幅は画面幅と同じ1080で高さ(適当)200、X0で左端にピタッとつけてYは丁度ヘッダーの下に来る80にしました。名前はGroup Body と変更。

 

今のGroup Bodyの中にTweet 内容が表示されるの吹き出しのような物をGroup で作ります。

 

その中にText でログインユーザー名が入るスペースを作ります。仮に「名前入ります」としました。

ここは後でログインしてツイートした人によって名前が変更される設定をします◎

 

名前の下にツイート内容表示スペースをText で作ります。適当に何か書きます。

 

Group で画像を丸く表示する

Groupで仮の画像を入れます。(ここはツイートした人によって表示が変わるように後から設定し直します)Style をRemoveしてBackground style でImage を選ぶと

 

Upload が表示されてそこからファイルをアップロードできます。

どうしてImage を使わないの?

この後正円にしたいんだけどImageだと楕円になってしまうのよ

 

Center the image のチェックを入れると位置が中心になります。四角のままでもいいのですがここは可愛らしく丸く表示したいので画像の大きさの半分をRoundness に記入します。

 

 

実際の表示を見るとこんな感じです。
先程書いた通り今回レスポンシブ設計はしていないので画面を狭めるとレイアウトは崩れます。

 

この後設計するデータベースが反映されるRepeating Group を設置します。デフォルトは4段の枠です。上に赤い注意マークで「1issu(問題)」と出ますがデータベース設計の後でType of content の今赤くなっている中を埋めると消えるのでここでは無視してください◎

 

Repeating Group のレイアウトをExt.vertical scrolling に、Rows を1行に、Separate をNone に、Style をRemoveして空欄にし、Group tweet を中に入れます

 

Elements tree の親子関係がこうなっているようにしてください。

 

Previewで実際の表示を見るとRepeating Group に入れた所が非表示になります。Data データベースタブをクリックします。

 

 

Data データベースの設計

ツイート内容を格納するデータベースを作ります。

データベースはテキストや数値などWebアプリで使う情報を保存しておけるツールです◎

開くと左にUser と言うタイプType(メジャーな言い方だとテーブル)があります。今は1つしか無いので右にこのUser タイプが表示されています。

タイプはExcelで例えるとシートの事なんだって。データベースには複数のタイプが制作出来てタイプごとにデータ(フィールドと言います)を管理しているらしいよ

 

 

ツイートを格納するためのタイプ(テーブル)を作ります。New typeにtweetと入力してCreateします。左のUserの上にTweetのタイプが出来ました◎ 続けてこの中に新しくフィールドを作りたいのでCreate a new fieldをクリック、

 

ツイート投稿内容を保存するのでPost とでもしておきます。Field type は文字列を保存するので text と型が決まっています。CREATEで保存します。

「型」は日付を保存するならdate、画像ならimage と言う感じだよ

 

Postのフィールドがtweetの中に出来ました。

 

続いてサンプルデータ(のツイート)を作成したいので、

Add dateタブをクリック>左下のAll tweetsをクリックすると右側No view 〜部分にデータベースが表示されます。New entryをクリックします。

 

Type of thingはtweetになっていると思いますのでそのままで、Postに自由に書き込みます。CREATE > GOT IT と進みます。

 

先程まで空だった所にデータが入りました。作成日やModified Date変更日は自動で入ります。鉛筆マークで内容の編集も出来ます。

 

こんな感じで”こんにちは”を追加編集してみました。

 

 

データベースの内容を反映させる

実際のサイト表示を見た時に今データベースで入力した内容が反映されるようにします。Designに戻ります。

 

Repeating Group Aを開きます。データベース設計でtweetを作ったことによりType of contentに先程までは無かったtweetの項目が出来ました。これを選びます。

 

(tweetを選んだ事で「Repeating Group tweet」と言う名前になりました)Data source情報源はどこなのかをDo a search for 検索をする、にすると左に小さい黒窓がぴろっと出ます。検索するTypeをtweet にします。

 

するとSort by並び替えを聞かれるのでCreated Date作成日順としました。Descending降順を yesにして最新情報が1番上から並ぶようにし、Closeで閉じます。

 

先程まであった上の”1issu”も消えました

『データベース設計の後でType of contentを埋めると消えるのでここでは無視してください』と言っていたやつだね

 

ここまでの実際の表示を見てみるとまだこうです。Repeating Groupをtweet typeのデータベースに連携させたのでその内容(データベースのPost に記入した「こんにちは。初めてのツイートです」)を「初めてのつぶやき」の所に表示されるよう設定します。

 

Group tweetをクリックします。Type of contentを(Repeating Groupと同じ)tweetにします。Data source情報源をCurrent cell’s tweet 、現在自分が乗っかっている親元(Repeating Group)から情報を持って来る、とします。

 

次にTextを選択します。仮に入力しておいた文字「初めての〜」をクリックすると> Insert dynamic data (動的データを挿入する)が表示されるのでクリックします。

 

ツイート情報源のGroup tweetを選択、

 

‘s tweetの中の、’s Postから取得する、とします。これで設定OKです。Previewで表示を見てみます。

 

データベースのPost に入れた内容が表示されれば成功です。

でも、ツイートはweb上で「投稿」する物なんじゃないの?

今後そう設定するので安心してください◎

 

 

次回「ノーコード bubble 解説_Twitterのようなアプリ制作2」は
「つぶやく」ボタンを押したら出てくる「ポップアップ画面」〜「投稿」の仕組みなど解説します。