【Bubble入門 Part.1】5分で作るTwitter

# [Bubble](https://bubble.io/)とは
ウェブサービスを作るためのノーコードサービスです。
学習コストも低く、直感にしたがってUIやロジックを組み立てれるのが特徴です。

新規事業の仮説検証に使ってみたのですが、非常に高速にプロトタイプを作ることができました。
慣れてしまえば、今回紹介する簡単なTwitter風アプリなら5分程で作ることができます。
この記事では、非エンジニアでも作れるようにスクショ多めで解説してますので、もしこの記事にたどり着いた方は再現してみてください。

# Bubbleを学ぶ方法
最初はBubbleが提供している[チュートリアル](https://bubble.io/lessons)を一通り行うことを強くお勧めします。

チュートリアル後はとにかく手を動かすことだと思っています。その一歩目となれるように基本的な機能のみでTwitter風アプリを作っていく過程を細かめに説明したいと思います。

# この記事で学べるBubble技術
- Input Form
- Work Flow
- Data (モデル)
- Repeating Group
- Popup （モーダル）

# BubbleでTwitterを作る
## アプリケーションを作成する
[Bubble](https://bubble.io/home)にアクセスし、「New application」を押します。

アプリケーションの名前などを入力して、「Create a new app」をクリックします。
アプリケーションの名前が他のアプリケーションと被っていては作成できないので、お好きな名前にしてください。
また、その他の入力項目も今回作るアプリケーションには特に影響しないので、お好きなものを選んでください。
![スクリーンショット 2021-03-26 1.37.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/b51f77bd-affb-bfe3-05ab-0eba9fca6f1d.png)

## 準備
デフォルトでBubbleのLPのような画面が作られていると思いますので、まずはこちらを全て消していきましょう。
「Elements tree」には画面を構成するElementたちが表示されているので、「右クリック→削除」で全て消してください。
![スクリーンショット 2021-03-26 1.42.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/dce349f1-bc98-cc92-ac47-60e914f13097.png)

最終的にスマホで見ることを想定して、画面の横幅と高さを設定しましょう。
画面上にあるグレーの部分をダブルクリックするとそのElementの設定パレットが出てくるので、WidthとHeightを設定してください。今回は「３７５ x 812」で作っていきます。
![スクリーンショット 2021-03-27 14.09.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/b2757076-399a-73d3-d0ec-2fe3936aa02d.png)

## ツイートを投稿 （Input From, Data, Work Flow）
ツイートを投稿できるフォームを作っていきましょう。
と言ってもやることは、「UI Builder」の中にあるElementから「Input」と「Button」を設置するだけです。
![スクリーンショット 2021-03-27 15.00.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/26f79ec2-9f3c-4803-c8ca-32c6cbfdf05f.png)
これだけでツイートを投稿する上で必要な画面は完成です。

次はツイートの内容を保存するデータベースを作っていきましょう。
画面左のDataタブからデータベースの作成ができます。
①「New Type」にTweetと入力し、Createを押すと、これでデータタイプ（モデル）ができます。
②「Create a new field」からツイートの内容を保存するフィールドを作成できます。
これでTweetを保存するデータベースの準備は終わりです。
![スクリーンショット 2021-03-27 18.26.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/02d6b313-9a96-6ed5-3775-5823e9eea86d.png)
![スクリーンショット 2021-03-27 18.24.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/6b167ddc-9d53-6228-f409-2c1836e32b8b.png)
では続いて、ツイートボタンを押した時に、Input Elementに入力されたテキストを保存するロジック（workflow）を作っていきます。
Designタブに戻り、ツイートするボタンを選択し、設定パレットの「Start/Edit workflow」を押すと、workflowタブに移動します。
![スクリーンショット 2021-03-27 19.12.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/e08f7835-5f71-0520-b325-fa32cf77cb86.png)
「ボタンを押された時」に、「Data」に「新たなオブジェクトを作成」するというworkflowを作成します。
「Button ツイートする is clicked」→「Data（Things）」→「Create a new thing...」を選択し、パネルにて保存するデータを設定します。
![スクリーンショット 2021-03-27 19.16.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/9a0d383b-33c3-bd16-f36d-dd4db194bc9a.png)
TypeにはTweetを選択し、「Set another field」から「contents = Input Tweet's value」とすることで、入力欄に入れたテキストがTweetのcontentsフィールドに格納されるようになります。
![スクリーンショット 2021-03-27 19.31.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/ac3b3495-de10-1945-2c36-5b573e37cd70.png)
ついでに、「ツイートボタンを押した時」に、「入力欄の中身をリセットする」というworkflowを作っていきます。
「Click here to add an action...」→「Element Actions」→「Reset inputs」を設定するだけで、リセットされるようになります。
![スクリーンショット 2021-03-27 19.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/a80c162f-8b99-b17e-20ff-13e704884fba.png)
これでツイートを投稿は完成です。
## ツイートを表示 (Repeating Group)
では、投稿されたツイートを表示する部分をRepeating Groupを使って作成していきます。
Designタブで「UI Builder」→「Containers」→「Repeating Group」を選択し、画面の下部に設置します。
Repeating Groupの設定パネルにて、Type of contentとData sourceをそれぞれ以下で設定してください。
・Type of content:「Tweet」
・Data source:「Do a Search for」→「Type： Tweet」
これにより、Repeating Groupの1セルに対して、データベースに格納された１ツイートのデータが割り当てられます。
![スクリーンショット 2021-03-27 19.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/c2049f04-f104-e2ba-3a8a-8450abc74741.png)
しかしまだ、これだけではツイートの内容は表示されません。
Tweetのデータベースに格納されたcontentsフィールドの内容を表示するために、「UI Builder」の「Text」をRepeating Groupの一番上のセルに配置します。
Textの表示内容には「Insert dynamic data」から「Current cell's Tweet」→「contents」を選択します。
これでツイートの中身が随時Repeating Groupに表示されていきます。
![スクリーンショット 2021-03-27 23.58.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/6b697ea7-8807-7190-b4a5-5a52a684744d.png)

ここで一度表示確認のため、Bubble画面の右上にある「Preview」を押して、表示を確認してください。
ツイート内容を入力し、ボタンを押すとその内容が随時表示されていきいます。

## サインアップ機能 (Popup, Sing up)
これだけでは物寂しいので、サインアップ機能とツイートと一緒にユーザー名を表示するように作っていきます。
まず初めにサインアップ画面を作っていきます。
今回はPopup（モーダル）を使って、画面を作っていきます。「UI Builder」→「Containers」→「Popup」を選択し、画面中央に配置します。
またそのPopup上に、「user name」「mail」「password」の入力欄と「Sing up」ボタンを作成します。
ここまでできれば、あとは「Sign up」ボタンにworkflowを作成していくだけです。
先ほどと同じようにWorkflowタブを開きます。
「Sign upボタンが押された時」に「ユーザーSign up」を行う。というWorkflowを作ります。
![スクリーンショット 2021-03-28 0.29.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/c82aff17-cc79-aaf5-f4a5-3a7cc56b44c7.png)
EmailとPasswordには、先ほど作った入力欄の値をそれぞれ入れてください。
「User name」は、現状ではUserモデルにフィールドがないため、保存できませんが、このWorkflow設定パネル上から新たなフィールドを作成することができます。
「Change another field」→「Create a new field」をクリックし、Field nameに「user_name」、Field typeを「text」とすることでユーザー名を格納するフィールドを作成できます。
EmailとPassword同様にuser_nameフィールドにも入力欄のvalueを格納するように設定します。
![スクリーンショット 2021-03-28 0.35.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/79365e13-8c1b-f059-bbe7-8a6caa4efda1.png)
サインアップが成功した際には、モーダルを閉じて欲しいので、「Element Actions」→「Hide」→「ElementにPopup」を設定します。
![スクリーンショット 2021-03-28 0.43.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/4e216d33-9a95-2dd7-4ff7-e427da17968d.png)
最後にページが開かれた時に、モーダルが表示されるように設定しましょう。
「Click here to add an event」→「General」→「Page is loaded」でページが開かれた時のWorkflowを設定できます。
![スクリーンショット 2021-03-28 0.57.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/a2471c64-6d35-b695-cdb4-ce90804371dd.png)
先ほどのモーダルを閉じるのと逆で「Show Popup」をActionに設定します。
![スクリーンショット 2021-03-28 0.59.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/770aa565-7bc9-03d5-228f-de67d3d504bd.png)
これで、サインアップ機能の完成です。

## ツイートにユーザー名を表示する (Repeating Group, Data)
Bubbleでは、「作成されたオブジェクトはどのユーザーによって作られたオブジェクトなのか？」という情報をデフォルトで保存するようになっています。
Dataタブで確認してみると、TweetモデルのフィールドにCreator（TypeはUser）というフィールドがあることが確認できます。
このフィールドにどのユーザーがこのTweetオブジェクトを作ったのかが保存されています。
![スクリーンショット 2021-03-28 18.13.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/3ed26684-e376-8985-356c-6bab450ebc6a.png)
つまり、ツイートにユーザー名を表示するためには、「Tweetオブジェクト」の「Creator」の「user name」を表示させれば良いということになります。
ここまでわかれば、ツイートの内容を表示した時とほとんど同じです。
UI BuilderからTextを選択し、「Repeating Group」の一番上のセルに配置して、「Current cell's Tweet」→「Creator」→「user_name」の順番で入力していきます。これだけでユーザー名を表示することができます。
![スクリーンショット 2021-03-28 18.18.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/77cd46d7-d10f-958f-6ad5-c98e41819f93.png)

最後に「Preview」を押して、表示確認してください。
サインアップした状態で、ツイートしユーザー名が一緒に表示されていればOKです。
![スクリーンショット 2021-03-28 18.25.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265251/9f10bda0-e43a-9975-2750-f710f951752d.png)