Bubbleのチュートリアル３：Saving and modifying data

# はじめに
Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、`Bubble`のように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。

https://bubble.io/

チュートリアルをやってみた記事

1. [Saving data](https://qiita.com/yo16/items/d77a5cf8df18419b079e)
    - 位置情報をDBへ登録して、地図にマーカーを表示
2. [Building a sign-up system](https://qiita.com/yo16/items/1ac9467ad5bb5ed6ba52)
    - ユーザー登録とログイン、ログオフ
3. **Saving and modifying data** ＜＜今回＞＞
    - [Reddit](https://www.reddit.com/)っぽい投票システム

# チュートリアルの記録
## チュートリアルを選択
ログイン後のトップページ
＞左メニューのAcademy
＞Learn your way
＞By watching
＞Interactive lessons
＞Saving and modifying data

Redditのことは、チュートリアルのサブタイトルみたいなところに書いてあったのですが、なじみがなさ過ぎて、raddit-likeなアプリと言われても全然わかりませんでした。ググってみると、日本でいう2chのようなもので、でもネガティブなことが全然ないとのこと。
うーん、それはSNSの特徴というより、使っている人の特徴なのでは？と思ったり。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/b04d436f-ffc3-010f-3f59-d5e333b7f32e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/64242bd1-9b13-599b-c631-69fe4245cbae.png)
さて今回は、都市名を登録して投票するとのこと。投票は、Reddit風だとしたら、投稿にいいねとよくないねのボタンがある感じでしょうか。

１段落目の話は、１つ目のチュートリアルで、Locationテーブルにレコードを追加したとたんに、すぐ地図がそれを読んでマーカーを表示する、ということを言っているのだと思います。

さて、Start！

## 新たな都市を登録するための入力ボックスとボタンを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/072835f7-88de-9c3f-c56a-d9941fbc78ce.png)
OK.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f67a8af4-7026-628d-2609-49f6e405bffc.png)
`Element`の`Input`を追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5b3a253a-b614-7caf-1cf0-0ffb71df2e9e.png)
（今回も、要素の名前が勝手につけられていることはスルーします。例えばこのInputは、プロパティ画面のタイトルで"Input City"になっている。）
プレイスホルダーに"都市名を入力してね"と入力。文言は違っていても、チュートリアルは進む。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a0b6538d-8ea0-fd46-1ec7-8a9fa235406e.png)
でた。Feel free to drag it around or resize it.自由に位置を調整したりリサイズしてねと。
普通の入力ボックスでいいのでこのままContinue。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/e98dc4ef-0240-650e-83f9-763d4644db26.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/40152f82-470e-bd17-696c-ca701f2ffe59.png)
次はボタンを追加。入力ボックスの隣に置いてねとのこと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c7c89b98-532a-69a0-c71a-8c2adc38ac96.png)
ラベル（キャプション）を"Submit"にとのことなので、"登録"に。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/28377c7e-ea13-ed26-43e1-a4caf3633bc6.png)
でこんな具合。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5ded6fdf-d2b5-c958-0940-2203e49cbcd6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ad1455d3-6cb3-8d8e-03f2-1dc09b9f5dca.png)
次は`Workflow`かな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/714a5504-8397-0a93-b12b-f89ad3f87f95.png)
ラベルを"登録"にしたら、チュートリアルの中の文面も"登録"に変わる。地味にすごい。
"Add workflow"で、`Workflow`の世界へGO。

## 登録ボタンの処理を作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/9da3613c-35f0-7237-a99a-8cc1571f5cb3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/77c07bf8-0f3c-9864-ca8f-d5f63c7ff94c.png)
今回が３つ目のチュートリアルということでだいぶ慣れてきました。`Workflow`の画面で、登録ボタンが押されたときの処理を作る画面に飛びましたね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/07a6535f-8e00-1327-c282-d246340847fc.png)
`action menu`から～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/03cc20ad-a402-9d9c-b7b9-59f3906459f1.png)
`Data(Things)`の～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/977c2d5f-6fbc-b3d7-0f79-62cc8df84df4.png)
"Create a new thing"を選択。
チュートリアルの１つ目の、"Location"みたいなパターンですね。ここで"new thing"を作るということは、何かのテーブルに、列を追加するということ。テーブルは`Type`と呼び、レコードは`Entry`と呼ぶ。（復習）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/10216a62-9641-c954-bae0-9be4b4be9bea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a5f0f682-7735-9466-83f6-6279848574f1.png)
そうそう、そうすると、`Type`を選ぶのだけど～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/19321601-b4ef-fb72-0ba8-0ea815dfb060.png)
まだ何もないので、`Type`を作る（定義する）ところからやります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/4385fbbb-79f2-cb78-9f88-dedc9cecb4d8.png)
"City"というテーブル名を作るので、Type Nameは"City"。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c59799a0-cbd2-38b7-526d-a99cd322ef47.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/8f25ffd5-dd4d-b75c-093c-f21c789261d7.png)
ここまでだけで、"City"テーブルにレコードを作るのだけど、今のままだと更新日時とかしかないから、都市名を格納するための、別の列（another `field`）を定義。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/1eef0698-6e86-5b97-d0ae-3c0433125f29.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/892dc29c-0c9d-aa43-29e4-fa2c010676ee.png)
独特な入力ボックスの中にある"Click"を押して、新しい列（`field`）を作成。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/707e62b8-4ee9-1af7-2c96-feac538913a9.png)
"Name"かー。いけてないので、"CityName"にしておきます。
型はtextで、Create。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ca787c82-170e-6cae-2cd0-6ee08fe94e70.png)
City.CityNameに、何を代入するんだい？という設定で、ここでは上で作った入力フィールドのValueを設定しますね。たぶん。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5aeb50f6-fd3a-b403-f7f9-6a788e36f90e.png)
そうそう、`Elements`＝画面に配置した要素のうちの、"Input City"を選んで～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/256c2718-d48d-611e-77c9-8a8ad0f8275c.png)
"'s Value"を選ぶ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/34e8d4bd-2618-5483-b662-be20e7461728.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c914ca2f-76b0-6350-51d4-d4ab91a9e48d.png)
この設定によって、ボタンをクリックしたら、"City"テーブル（`Type`）にレコード（`Entry`）を追加。その１つの列（`field`）である"CityName"には、入力ボックス"Input City"のValueを設定します。

お、次は初の`Data`タブに移るのかな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/058f14b9-04c0-93a9-35ef-32d740637b99.png)
と思ったらまだ列追加するのかーい。ということで、投票数の列を追加するらしいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/7a8f630a-58e9-19a4-7b8a-efa971a53f1d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/68c8b04e-f5a1-b072-f94b-73f08d60f89d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c0c12541-1e10-90e1-b393-5f9e017b39ff.png)
"Votes"という名前の列で、数値型ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/8e7b2c6d-91fe-6d41-7ea0-83df21e09d8b.png)
そうか。登録時だから、投票数＝固定で１、です。固定値も入れられるよ、ということを教えてくれてます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a3528df2-c8bb-087e-5135-6019016f6997.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/032f50f8-7c7c-a9c9-d573-d734458fdbf6.png)
あーこれなんか必ずやるな。登録後に入力ボックスをリセットです。忘れがちではあるけど。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/787dea2b-e5fa-40f1-5003-fe6b17e04e60.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/7414d172-083b-568c-610b-9583fdb8afa8.png)
できました！内容もよくわかります！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bfcae704-b529-037e-ee00-596a1be88806.png)
あ、ダイナミックデータエディタは見ないんですね。
`Design`に戻り、登録した都市のリストを表示する仕組みを作ります。

## 登録された都市名のリストを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/0f950c2e-3712-b09c-e045-b48a996e6062.png)
`Containers`の中の`Repeating Group`を使うそうです。繰り返し専用のグループなんですね。私がスクラッチで作るとしたら、こういうクラスはちょっと思いつけない気がするから、面白くて勉強になる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/63d441a0-6566-8677-eb5c-42439044ac60.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/dd3be60b-1bc1-7f93-ee70-95408a23fd3b.png)
大きくするんですね。facebookにしてもXにしても、コンテンツの繰り返している部分が画面のほとんどですもんね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/2e6e6b07-6c0a-8146-2e64-9c9d87be018e.png)
どーんと大きく配置しました。
そうか。リピートする、１回１回は何にあたるかというと、"City"テーブルの１件１件だから、その定義が"Type of content"で"City"なんですかね。よく見るとその下の項目は、"Data source"で、違いがよくわからないな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/7b05fb85-4e9d-cab9-23fa-3c21ba7d80ae.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f318699e-b830-5b62-9e82-7e0b9b6b0ef9.png)
そうなんですね。よくわかってないけど、進みましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/075483f7-0ccc-df22-99bf-0034fd5c33c5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/313a3699-1456-df9a-f542-0427808830f7.png)
重要そうなところなので、日本語訳を綿密にしてます。
ここの"field"は一般名詞としての"field"ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a8c409a4-23d9-5ce9-2c29-d306d6025085.png)
何度かやってる気がしたのでちょっとスキップ気味に。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5ee832a4-265c-6e08-0856-1d382fe0a2b5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/02ef5ac1-ab2b-5f86-df10-b58ab90158da.png)
なるほど。Where句である"constraint"は使わないけど、OrderBy句の"Sort by"で、投票数の降順（"Descending"）にするんですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/321a59be-8256-16f8-aa44-5db0cd80f5d0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a8c85985-b3e4-8133-d597-e8fb74cb3dfd.png)
表示されるために必要なものはそろったみたいですけど、まだリピートの中に表示するものは選んでないから、ピンとこないですね。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3aef4728-ee53-2356-ffef-03158b6debff.png)
急に、表示上の境界線の話（！？）
見た目をここで変更できますよっていうチュートリアルなのかもしれない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/10185d8d-9808-e72d-efe7-5ddf9f19e52e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/dc3f5c5f-27d9-f406-253e-9ef4fac4f709.png)
さらっと流したので、やはり本質的な話ではなく、見た目を変更する方法のお知らせだったような気がします。背景の色だけちょっと変えて次。

## リストで繰り返される１つの中身を実装
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bee719ff-43c9-5720-3806-60ce87ebaf2b.png)
リピートグループの最初のハコの中で、繰り返される要素の定義をしていくんですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/8162fc3b-3f42-fc1c-51bc-a72435700f70.png)
ドラッグ中の`Element`がリピートグループの中に入るときは、赤い枠になるらしいけど、わかりづらい！それをアピールするなら、太線にしてほしいなぁ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/4714eef7-ac73-7d04-5072-3be42fdf5fcd.png)
`Elements Tree`を見ても、入ったみたいなので、進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a6b01157-d233-1fbb-4556-7ff454ae358e.png)
そうそう、`dynamic data`ですね。
"City"１件のレコードの列を選択するんでしょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d747c206-14fa-a219-e651-b70500560ce8.png)
リピートの１件のデータのことを`Current cell`と呼ぶんですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/657a80af-3310-7f72-e487-b4f1307da563.png)
`Current cell`の、"City"の、"CityName"を設定。（列名を、"Name"でなく"CityName"にしておいてよかった。固有名詞であることがわかる。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/48c840ed-0411-c025-fa40-a961405e6b78.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a9c38888-ce16-7a42-20fd-6b485bf62591.png)
投票数はまだまったく未着手だけど、We're also adding は、これから追加しようとしていることもbe ～ingで使うんですね。（久々の英会話授業）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5f3e3778-c7d8-22ed-cf21-9522a4f52ac3.png)
と思ったら、自動で入れた。これのことを言ってたのか。（上の英会話の話、撤回）

## リストで繰り返される１つの中身に、投票ボタンを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ea08d167-2d80-e901-be1e-25cff789ccfa.png)
投票ボタンを追加するんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/cf632a6b-1340-8270-3e35-61d5908d2ede.png)
リピートグループの中に入れました。
見た目は今はどうでもいいですが、一応「いいね」っぽいアイコンにしておきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/246da247-f226-e7a6-5ad4-5cf14ccd899a.png)
そして`Workflow`へGO!

## 投票ボタンの処理を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/cf113470-ad58-6b3c-72c5-0934dfd186d3.png)
Vote Upアイコンをクリックしたとき、`Data(Things)`を"Make changes to thing..."すると。なぜDBをUpdateすると言わないで、違う英単語に置き換えるんでしょうね。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/6dcc7141-d663-339a-10a7-52c30252ed3c.png)
Updateの対象は、"City"テーブルです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/9b3d6f14-db30-49a1-5a92-be89ea4970d4.png)
処理のところで、"Current cell"といわれるとちょっと違和感があるけど、たぶんこの処理はフロントエンドなんでしょう。
"City"テーブルの、「いいね」アイコンのあったレコードがUpdate対象。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/301ae75c-defc-216a-3d9a-d2c32b240df4.png)
更新する列は～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/b4ba8d98-87f0-a109-370b-c859c669835e.png)
"Votes"で～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5bb79ffc-0a0e-2135-1e56-3c5aefd89bbd.png)
"Current cell's City"の、（これを１つ選択）
"'s Votes"の、（次にこれを選択）
"+"で～（選択）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/95c03fb4-3037-83e8-2629-4be2bcc73a85.png)
え！？まさかのDesktop 1200px！？（矢印がそれを指し示す）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/7d31a183-3c83-4c4c-e7e4-8a9093196e90.png)
いやいや、どういうミスなのかわからないけど、無視して"1"をキーボードで入力しましたよｗ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/da5a0328-dbc4-9be0-b546-c2b18c06e743.png)
おー終わった！今回は長かった気がする。
`Preview`で動作確認です！

## 動作確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/54ba7113-06dc-f590-9529-0606d94b9ec8.png)
スムーズに動きます！（チュートリアル２のログインはなんかぎこちなかった）
まぁ単純といえば単純ですね。

## 微修正：４レコードしか表示されないし縦スクロールバーも出ない問題の対応
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c40077af-95b4-a8a0-088b-69ee560ca6a5.png)
４レコード以上登録すると、画面の外に追加されて、スクロールもできずにどうにもならなかったのですが、リピートグループの"Set fixed number of rows"に"4"って書いてあって固定でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/15ffcb9b-c5ee-3512-c6c8-84f045cf4c39.png)
"Set fixed～"のチェックを外したら、いい感じになりました。スクロールバーも出るし、高さも"Min height of row"に依存する形なのかな。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/20c302fb-0aec-db99-90c1-466327c84d11.png)



# おわりに
今回の練習は、`Repeating Group`の練習でした。Redditのような、というほどでもないと思いましたが、まぁそういわれればそうかもしれません。このQiitaにもありますね。今どきなんにでもある。

また３回目ともなると前回やった操作がでてきて、チュートリアルのまどろっこしさを感じましたね。Bubbleの操作は簡単なんだけど、チュートリアルが丁寧すぎてしつこいというか。。ある意味、**３つやるだけで結構慣れる、いいシステム**ということなのかもしれません。またいいチュートリアルということかもしれません。

全１１回あるわけですが、早くも自分で自由に手を動かしたくてウズウズし、１１回全部、このQiitaに書こうと思ってたけど続けられるか自信がなくなってきました。
見ていただいている方次第です！**この記事に是非いいね**して、私のモチベーションを上げてください！

ではよきBubbleライフを！

# Next
次はチュートリアル４に挑戦
[Bubbleのチュートリアル４：Building a slideshow](https://qiita.com/yo16/items/c015c2097ae53055bca0)