はじめに
Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、Bubbleのように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。
チュートリアルをやってみた記事
-
Saving data
- 位置情報をDBへ登録して、地図にマーカーを表示
-
Building a sign-up system
- ユーザー登録とログイン、ログオフ
-
Saving and modifying data ＜＜今回＞＞
- Redditっぽい投票システム
チュートリアルの記録
チュートリアルを選択
ログイン後のトップページ
＞左メニューのAcademy
＞Learn your way
＞By watching
＞Interactive lessons
＞Saving and modifying data
Redditのことは、チュートリアルのサブタイトルみたいなところに書いてあったのですが、なじみがなさ過ぎて、raddit-likeなアプリと言われても全然わかりませんでした。ググってみると、日本でいう2chのようなもので、でもネガティブなことが全然ないとのこと。
うーん、それはSNSの特徴というより、使っている人の特徴なのでは？と思ったり。
さて今回は、都市名を登録して投票するとのこと。投票は、Reddit風だとしたら、投稿にいいねとよくないねのボタンがある感じでしょうか。
１段落目の話は、１つ目のチュートリアルで、Locationテーブルにレコードを追加したとたんに、すぐ地図がそれを読んでマーカーを表示する、ということを言っているのだと思います。
さて、Start！
新たな都市を登録するための入力ボックスとボタンを追加
OK.
ElementのInputを追加
（今回も、要素の名前が勝手につけられていることはスルーします。例えばこのInputは、プロパティ画面のタイトルで"Input City"になっている。）
プレイスホルダーに"都市名を入力してね"と入力。文言は違っていても、チュートリアルは進む。
でた。Feel free to drag it around or resize it.自由に位置を調整したりリサイズしてねと。
普通の入力ボックスでいいのでこのままContinue。
次はボタンを追加。入力ボックスの隣に置いてねとのこと。
ラベル（キャプション）を"Submit"にとのことなので、"登録"に。
でこんな具合。
次はWorkflowかな。
ラベルを"登録"にしたら、チュートリアルの中の文面も"登録"に変わる。地味にすごい。
"Add workflow"で、Workflowの世界へGO。
登録ボタンの処理を作成
今回が３つ目のチュートリアルということでだいぶ慣れてきました。Workflowの画面で、登録ボタンが押されたときの処理を作る画面に飛びましたね。
action menuから～
Data(Things)の～
"Create a new thing"を選択。
チュートリアルの１つ目の、"Location"みたいなパターンですね。ここで"new thing"を作るということは、何かのテーブルに、列を追加するということ。テーブルはTypeと呼び、レコードはEntryと呼ぶ。（復習）
そうそう、そうすると、Typeを選ぶのだけど～
まだ何もないので、Typeを作る（定義する）ところからやります。
"City"というテーブル名を作るので、Type Nameは"City"。
ここまでだけで、"City"テーブルにレコードを作るのだけど、今のままだと更新日時とかしかないから、都市名を格納するための、別の列（another field）を定義。
独特な入力ボックスの中にある"Click"を押して、新しい列（field）を作成。
"Name"かー。いけてないので、"CityName"にしておきます。
型はtextで、Create。
City.CityNameに、何を代入するんだい？という設定で、ここでは上で作った入力フィールドのValueを設定しますね。たぶん。
そうそう、Elements＝画面に配置した要素のうちの、"Input City"を選んで～
"'s Value"を選ぶ。
この設定によって、ボタンをクリックしたら、"City"テーブル（Type）にレコード（Entry）を追加。その１つの列（field）である"CityName"には、入力ボックス"Input City"のValueを設定します。
お、次は初のDataタブに移るのかな。
と思ったらまだ列追加するのかーい。ということで、投票数の列を追加するらしいです。
"Votes"という名前の列で、数値型ですね。
そうか。登録時だから、投票数＝固定で１、です。固定値も入れられるよ、ということを教えてくれてます。
あーこれなんか必ずやるな。登録後に入力ボックスをリセットです。忘れがちではあるけど。
できました！内容もよくわかります！
あ、ダイナミックデータエディタは見ないんですね。
Designに戻り、登録した都市のリストを表示する仕組みを作ります。
登録された都市名のリストを作成
Containersの中のRepeating Groupを使うそうです。繰り返し専用のグループなんですね。私がスクラッチで作るとしたら、こういうクラスはちょっと思いつけない気がするから、面白くて勉強になる。
大きくするんですね。facebookにしてもXにしても、コンテンツの繰り返している部分が画面のほとんどですもんね。
どーんと大きく配置しました。
そうか。リピートする、１回１回は何にあたるかというと、"City"テーブルの１件１件だから、その定義が"Type of content"で"City"なんですかね。よく見るとその下の項目は、"Data source"で、違いがよくわからないな。
そうなんですね。よくわかってないけど、進みましょう。
重要そうなところなので、日本語訳を綿密にしてます。
ここの"field"は一般名詞としての"field"ですね。
何度かやってる気がしたのでちょっとスキップ気味に。
なるほど。Where句である"constraint"は使わないけど、OrderBy句の"Sort by"で、投票数の降順（"Descending"）にするんですね。
表示されるために必要なものはそろったみたいですけど、まだリピートの中に表示するものは選んでないから、ピンとこないですね。。
急に、表示上の境界線の話（！？）
見た目をここで変更できますよっていうチュートリアルなのかもしれない。
さらっと流したので、やはり本質的な話ではなく、見た目を変更する方法のお知らせだったような気がします。背景の色だけちょっと変えて次。
リストで繰り返される１つの中身を実装
リピートグループの最初のハコの中で、繰り返される要素の定義をしていくんですね。
ドラッグ中のElementがリピートグループの中に入るときは、赤い枠になるらしいけど、わかりづらい！それをアピールするなら、太線にしてほしいなぁ。
Elements Treeを見ても、入ったみたいなので、進みます。
そうそう、dynamic dataですね。
"City"１件のレコードの列を選択するんでしょう。
リピートの１件のデータのことをCurrent cellと呼ぶんですね。
Current cellの、"City"の、"CityName"を設定。（列名を、"Name"でなく"CityName"にしておいてよかった。固有名詞であることがわかる。）
投票数はまだまったく未着手だけど、We're also adding は、これから追加しようとしていることもbe ～ingで使うんですね。（久々の英会話授業）
と思ったら、自動で入れた。これのことを言ってたのか。（上の英会話の話、撤回）
リストで繰り返される１つの中身に、投票ボタンを追加
投票ボタンを追加するんでした。
リピートグループの中に入れました。
見た目は今はどうでもいいですが、一応「いいね」っぽいアイコンにしておきました。
そしてWorkflowへGO!
投票ボタンの処理を追加
Vote Upアイコンをクリックしたとき、Data(Things)を"Make changes to thing..."すると。なぜDBをUpdateすると言わないで、違う英単語に置き換えるんでしょうね。。
Updateの対象は、"City"テーブルです。
処理のところで、"Current cell"といわれるとちょっと違和感があるけど、たぶんこの処理はフロントエンドなんでしょう。
"City"テーブルの、「いいね」アイコンのあったレコードがUpdate対象。
更新する列は～
"Votes"で～
"Current cell's City"の、（これを１つ選択）
"'s Votes"の、（次にこれを選択）
"+"で～（選択）
え！？まさかのDesktop 1200px！？（矢印がそれを指し示す）
いやいや、どういうミスなのかわからないけど、無視して"1"をキーボードで入力しましたよｗ
おー終わった！今回は長かった気がする。
Previewで動作確認です！
動作確認
スムーズに動きます！（チュートリアル２のログインはなんかぎこちなかった）
まぁ単純といえば単純ですね。
微修正：４レコードしか表示されないし縦スクロールバーも出ない問題の対応
４レコード以上登録すると、画面の外に追加されて、スクロールもできずにどうにもならなかったのですが、リピートグループの"Set fixed number of rows"に"4"って書いてあって固定でした。
"Set fixed～"のチェックを外したら、いい感じになりました。スクロールバーも出るし、高さも"Min height of row"に依存する形なのかな。
おわりに
今回の練習は、Repeating Groupの練習でした。Redditのような、というほどでもないと思いましたが、まぁそういわれればそうかもしれません。このQiitaにもありますね。今どきなんにでもある。
また３回目ともなると前回やった操作がでてきて、チュートリアルのまどろっこしさを感じましたね。Bubbleの操作は簡単なんだけど、チュートリアルが丁寧すぎてしつこいというか。。ある意味、３つやるだけで結構慣れる、いいシステムということなのかもしれません。またいいチュートリアルということかもしれません。
全１１回あるわけですが、早くも自分で自由に手を動かしたくてウズウズし、１１回全部、このQiitaに書こうと思ってたけど続けられるか自信がなくなってきました。
見ていただいている方次第です！この記事に是非いいねして、私のモチベーションを上げてください！
ではよきBubbleライフを！
Next
次はチュートリアル４に挑戦
Bubbleのチュートリアル４：Building a slideshow