はじめに

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

これまでのチュートリアルをやってみた記事

Saving data
- 位置情報をDBへ登録して、地図にマーカーを表示
- データのInsert
- 地図
Building a sign-up system
- ユーザー登録とログイン、ログオフ
Saving and modifying data
- SNSっぽい、投稿といいね
- Repeat Groupの利用
- データのInsert、Update
Building a slideshow
- スライドショー形式のアプリ
- Pluginの利用
Sending data to pages
- Data（Things、DBのデータ）の共有
Using conditions
- 条件の利用
Defining a field as a list of things ＜＜今回＞＞
- リストの利用

チュートリアルの記録

チュートリアルを選択

ログイン後のトップページ
＞左メニューのAcademy
＞ Learn your way
＞ By watching
＞ Interactive lessons
＞ Defining a field as a list of things

今回のサブタイトルは、「Attach a list of things to the current user」です。
サブタイトルを読んでも、よくわからないですね。DBのテーブル（Type）のある列（filed）で、リスト形式を使うってことなんでしょうね。

Google BigQueryでも、列の定義にJSONを指定できるけど、扱い難しいもんなぁ。

どんなデータを入れられるのか、どう便利なのか、そしてどう扱うのか、今回は楽しみです。

リストを入れたくなる感じもわからないでもないけど、RDBでは第何だか忘れたけど正規化して、別テーブルにするというのが鉄板。それをやらない理由を、終わるときには理解していたいです。（まさかJoinできない！？）

購入するアイテムを入力するフォームを作成

Inputフォームを作って、プレイスホルダー。

保存ボタン。

ボタン押下時のWorkflow編集に入ります。

ボタン押下時の処理を追加

Data(Things)グループの、"Create new thing..."でデータを１件追加。

ここで作るデータは、商品ですね。買いたい商品、１つ。

"Shopping item"というデータを作ると言っていたので、そのように入力し、Confirm。（ここでチュートリアルがちょっとおかしくなるけど）

ここまででとりあえず、"Shopping item"テーブル(Type)にレコード(Entry)が１件できるけど、列(Field)がない（全Type共通の作成日時とかしかない）ので、次に定義していきます。

"Name"だと、あとで登場したときわかりづらいので、"ItemName"という列を作ります。

設定する値は、Input ItemのValueです。これまで何度か通った道です。

あ、私がいつも忘れる入力処理のリセット処理です。

ん？"Shopping Item"にレコードを追加して、それを購入予定リストに入れるんですね。"Shopping Item"はマスタ的な扱いなのかな。

先ほどのリセットの後に、処理が続きます。

ここから、今回の肝（ちょっと長め）です！

そういえばBubbleでは、"User"というテーブル(Type)は、デフォルトで作成されています。それをカスタマイズして、新しい列(Field)を追加するんですね。

"Shopping list"という列名で、型はさっき作った"Shopping item"。

で、それのリスト！

"Shopping item"リストに要素を追加するので、"add"で指定します。ここで出ているメニューは、リストに対する操作ばかり。

ちなみにリストでない場合は、"="とか、"in"とかだったかな。

設定する値は、"Result of step 1"！
step 1というのは、今回のトリガーのWhenから始まるWorkflowの、"step 1"なんですね。それを指定。

カレントユーザーの列"Shopping listに、アイテムを追加するからこれは、カートの中にアイテムを入れる感じですかね。あとで、実際に購入したら空にUpdateする感じで。

Designに戻って、リストを表示するそうです。

購入するアイテムリストを表示

繰り返しの表示といえば、"Repeating Group"ですね！

画面へ配置して、"Type of content"に"Shopping item"。これは繰り返しの１粒の型ですね。どの型を表示するのか。

そして"Data source"は、"Current User's Shopping list"！

なるほど。これまで何度か私は、この２つの違いの意味がピンと来ないと思っていましたが、"Type of content"は型で、"Data source"はそのデータの元でした。DBから直接取り出すときは違いがわからなかったけど、"Type of content"は型の定義文ですね。スッキリした！

この混乱の元はやはり、Bubble用語の揺れというか選択ミスのような気がしてならない。 "Type"、"Data"、"Things"のうちの、"Type"は、今回のことでちょっと区別できるようになりました。

OK。

繰り返す要素（テキスト）を追加

Textを追加して、Dynamic dataで"Current cell's Shopping item's ItemName"！

繰り返しの１つの要素の"ItemName"。

繰り返す要素（削除ボタン）を追加

アイコンで、削除ボタンを追加するようです。

ほしかったけどお母さんから雷が落ちたから消す、ということで雷アイコンにしましょう。

そしてWorkflowです。

繰り返しの削除ボタンを押したときの処理を追加

"Current User"の情報をUpdateします。

さっき、リストに追加したのと同じactionですね。

"Shopping list"から"remove"で～・・・（じらされてる感がある）

"Current cell's Shopping item"というのは、雷の削除アイコンがあるセルのアイテム、ということですね。

プレビューで確認！

もうちょっとやりたかった。購入まで。。これはカートに入れるところまでですね。

とりあえず２件登録しましたが、2.5mのぬいぐるみはさすがにお母さんに叱られたので消しましょう。

消えた。

・・・いやこれ、データ見ないと実際の動き、わからないでしょう！！

なのにこれ。
見せてもらえないんですよね。Read onlyで見せてほしい。。

たぶん、"User"の"Shopping Items"からは消えているけど、"Shopping Item"には、2.5mのぬいぐるみも残っている。もう一度まったく同じ、「クマのぬいぐるみ(2.5m)」を登録すると、"Shopping Item"では重複しているのでしょう。

まぁチュートリアルなので、それはそれでいいですよ。でも、そうだとしても、見ないとわからない！！

改造

というわけで、こんな感じでアレンジして・・・

やっぱそうだった。お母さんの雷が落ちて１度はあきらめた2.5mだけど、欲しさを再確認して登録した場面です。

Shopping Itemは、２回登録されっぱなしになってます。
ヨカッタヨカッタ。

もう少しちゃんとやるなら、まったく同じものがあったら登録しない、みたいな処理を追加すればいいですかね。"Shopping Item"はマスタテーブルとして扱うという意味で。

おわりに

リストの使い方はなんとなくわかりました。リストにすると、専用の"add"とか"remove"が使えるようになるんですね。表示は、"Repeating group"で表示。

でーもー、本来これは別のテーブルで定義してJOINしたいところ。ショッピングカートのような、"User"の属性ではないものならなおさら、別のテーブルにしたい。気持ち悪い～・・・。
別のテーブルにしたとき、PKとかFKはどうなるのか、どうやってJOINするのか。まだわからないけど、先にそういうチュートリアルがあるんでしょうかね。あってほしいな。アプリを作る上では必須だと思うから。

さて。そう言ったって、ないんだからしょうがない。今回はここまでです。

これ、非エンジニアがやるとして、こういうRDBのレコードの感覚とかどう思って扱うのか、疑問ではあります。どういうときに新しいTypeを作って、どういうときに既存のTypeに"List"型の列を作るのか。私はまだJOINの仕方がわからないけどわかったとして、今回のケースはListにはしなくて、その説明は難しいなぁ。

ではよきBubbleリピートライフを！

Next

Bubbleのチュートリアル８：Using external APIs