はじめに
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リピートライフを！