Bubbleのチュートリアル１１：Graduation lesson: a to-do app

はじめに

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

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

1. Saving data
   • 位置情報をDBへ登録して、地図にマーカーを表示
   • データのInsert
   • 地図
2. Building a sign-up system
   • ユーザー登録とログイン、ログオフ
3. Saving and modifying data
   • SNSっぽい、投稿といいね
   • Repeat Groupの利用
   • データのInsert、Update
4. Building a slideshow
   • スライドショー形式のアプリ
   • Pluginの利用
5. Sending data to pages
   • Data（Things、DBのデータ）の共有
6. Using conditions
   • 条件の利用
7. Defining a field as a list of things
   • リストの利用
8. Using external APIs
   • Pluginの利用による、外部APIの呼び出し
9. Using the chart element
   • Pluginの利用による、グラフの描画
10. Login with Facebook
    • Facebookアカウントを使ったログイン
11. Graduation lesson: a to-do app ＜＜今回＞＞
    • 総合的なアプリ作成の練習

チュートリアルの記録

チュートリアルを選択

ログイン後のトップページ
＞ 左メニューのAcademy
＞ Learn your way
＞ By watching
＞ Interactive lessons
＞ Graduation lesson: a to-do app

今回のサブタイトルは、「You've done the basics - now flex your Bubble skills!」です。
すでに基本はできたとのこと。卒業課題として、"簡単にできるシステム構築業界"ではあるあるの、ToDoアプリ作成ですね。やっていきたいと思います。
"flex"は、披露するという意味で使うようです。（英会話勉強）

ちなみにわたくし、チュートリアルを毎日１つか２つずつ続けていましたが、卒業課題前までのチュートリアルをやった後に数日間旅行へ行き、完全に空きました。毎日触っている日々から数日離れた状態での卒業試験なので、どうでしょうかね。このシチュエーションは偶然ですが、現実的と思います。

ではいってみます！

To-Do登録フォームを構築

テキストでページタイトルをつけるところから。"My To-Dos"。どうでもいいですが、自分で作るとしたらTo-Doの複数形、考えちゃいますね。

デザインがしょぼいのはBubbleのせいじゃないですよってことですね。わかっております。

タイトルの入力欄に、日付ピッカー、ボタンを並べます。

ボタンの"Add workflow"から、ボタン押下処理時のworkflowの構築に入ります。

登録ボタン押下時の処理を作成

Thingの作成です。To-Doのレコードを追加ということですね。

Type作成（≒テーブル定義）、field作成（≒列定義）。そしてそこに入れる値は、入力ボックスから拾います。ちなみに "Title" は "text型"、"Due date" は "date型" です。

"Due date"は期日（英会話）

あれ、まだ追加する？

そうでした。登録するだけでなく、終わったら消し込むための、終わったフラグみたいなものも必要でした。

"Finished"という "yes/no型" の列を追加し、初期値は"no"です。booleanと言わないのが、ノーコードっぽいですね。

次の処理で、いつもの、入力を初期化。

この初期化処理では、タイトルと日付ピッカーがリセットされると思いますが、リセットする入力フィールドを指定しないんですよね。<form>の<input type="reset">なんでしょうか。だとしたら<form>にあたるものが複数ある場合、どこまでリセットされるのか不安ではあるけど、そんなことあんまりないですかね。

これで半分きて、次はまだ終わってない"To-Dos"を表示する機能です。

登録されて未完了のToDoを表示

もうおなじみの、Repeating Groupです。これかなーと思うようになってきて、自分のささやかな成長具合を感じます。

Typeは"Todo"で、そのソースはDataからSearch forします。条件として、終わってないもの（"Finished"がno）。そしてソート順は期日。"Descending"（降順）をつけてないので、昇順ですかね。過去ほど上に出て、未来ほど下に出ると思われます。

繰り返しの中にテキストを配置し、Current cell's Todoを使って、そのタイトルと期日を作ります。期日は"date型"なので、toStringするフォーマットを指定します。

デフォルトでは、"MM/DD/YY"でしたが、"YYYY/MM/DD"に変えちゃいます。

Customを選ぶと、Custom formatに→が入る。ddd, m/dd/yy, mmmm (mmm) dS, yyyy, h:MM tt, HH:MM:ss.L
私はなるほどねってなってうれしいけど、非エンジニアは戸惑うかもしれない。

yyyy/m/dにしてみました。dはなかったけど、m（１桁目が０の場合は０を表示しない）があるならあるでしょ！どうかな。

"Done"（済）ボタンを追加して、完了！・・・ってちょっと繰り返しの中が混とんとしすぎてやしませんか

これの原因はわかっていて、繰り返しグループの中で、自由に配置できるFixedでなく、Columnになっているから。Columnは登録されている順に縦に並べるもので、横にしたいときはGroupを作ったりして、手でコーディングするのに近く、コードが綺麗になる書き方。

今はざっくりとやって動作確認したいので、繰り返しグループのLayoutでFixedに変更して、適当に整形しておきます。（チュートリアル外）

実施済ボタンを実装

ボタン押下時の処理を追加します。"Make changes"っていうけど、Updateですね。

処理の構築中に、Updateする対象を"Current cell's"と出てくるのは親切でわかりやすい。

"Finished"を"yes"に更新します。

カスタマイズ？

これで終わり！と思ったら、アイデアへのリンク・・・？

Elementsからリンクを作成したら、URLにアイデアページへのリンクを自動的に入力してくれました。なんかおもしろいチュートリアルの使い方ですね。

試しに飛んでみると、まさかの「Page not found」ｗ
まぁいいけど。

そしてプレビューです！

プレビューで確認

• Createの操作、リセット
• 日付が、古い日付ほど上
• 日付のフォーマットはYYYY/m/d（月と日、それぞれ前ゼロなし）
• Doneボタンを押すと消える（ようにみえる）

改造：表示条件をいじる

Doneボタンを押すと消えちゃうので、
①：今日以降
②：昨日以前 かつ 未のみ
これらのOR条件にしたかったのだけど、ちょっといじってもそのやり方はわかりませんでした。

ググってみると解決。

Search for Todosの中は全部AND条件で、それら（①と②）をmerged withでつなぐとOR条件になります。ここでは、①で今日以降はすべて、②で昨日以前は未のみ、という条件にしてみました。

あっ！表示はできたけど時系列にならない！
これはきっと、SQL的には、ORDER BYした結果をUNIONしてるからですね。

うーん、これ以上はちょっとわからないので、これはここでギブアップしよう。

改造：済のものは色を変える

上の改造によって、今日以降なら済でも出るようになったけど、それがわからないとダメなので、今日以降かつ済のものは、取り消し線がいいなぁ。。ということで条件をいじります。

これは以前、チュートリアル６でやった話です。タイトルのテキストの条件を入れて、CSSで・・・あっ取り消し線が選択肢にない！あんまり使わないのかな。
仕方がないので、半透明30%にして灰色っぽくしてみました。ボタンは灰色。

まぁいいか。自由にすべてのCSSを使えるというわけではないのかもしれません。

というわけで卒業！

おわりに

卒業アプリということで、ログイン画面からやるのかと思ったら、そうでもなく、これまで何度かやったことをもう一度という感じでした。
最初に書いたように、数日間が空いたのですが、まったく問題なくできました。Bubbleは、何かを記憶するというよりも、自転車の乗り方を覚えるみたいな感覚が正しい気がします。見るところを覚える、みたいな。

あとBubbleはやはり言葉・単語ですね。typeとかfiledという言葉をはじめ、慣れないとわからないのがあるのですが、基本的にはチュートリアルをやれば慣れます。その点は、今後そんなに苦労しなさそうなイメージ。

ただ今回の最後の改造で、AND条件OR条件を混ぜて並び替えることや、マイナーなStyleを使うなど、ちょっと凝ったことに初めて出会うと、調べないといけないかもしれない。もしかしたら、そこまで自由度は高くないってできないかもしれない。
その場合の代替方法は、作り手の腕の見せ所ですね。（今回でいうと、取り消し線はできないみたいだから灰色にする、みたいな）

最後に、やはりエンジニア視点がないとちょっと厳しそうではあります。ノーコードではあるけど、やりたいことの言語化からググってやり方を調べるとか（AND条件 OR条件の混在とか）、逆にプルダウンの選択肢の意味の理解とか（SQLでいうWhere句だなとか）。

ということで、個人的にはもう少しお付き合いしたいと思います。

ではよきBubble＆ノーコード・ローコードライフを！