bubble（チョット）やってみた#12〜Lesson12「卒業アプリ〜ToDoアプリ作成」

2022年11月11日 06:04

今回はローコードツールbubbleにチャレンジする13回め（０からカウントしているので）です。遂に最期の時が来てしまいました。11レッスン目の消化不良はさておいて悲しくも嬉しくもある複雑な気持ちで挑むレッスンとなりました。
今回はこの卒業レッスンを楽しみながら進めて見ようと思います。

最後のレッスンに突入

まずはいつものアカデミーのページから始まります。

いつも見ていたこのアカデミーページも見納め（おおげさ）かと思いつつ、キリンのキャラクターの下にある「Interactive lessons」のリンクをクリックします。
各レッスンの右側にあるボタンは１つをのぞいて「Take Again」に変わっています。この「Take again」ボタンもブログにするためやガイドの暴走が起きるたんびに何度も押しました。

のこす「Start Lesson」はあとひとつです。

「えいっ！！」とクリックします。

しばらくして、いつもの開発者コンソール画面が開きます。中央にいつものガイダンスが・・・・

最後に作るものの概要

最後なのでチョットディスります。
このbubbleのレッスンは非常に親切にできていて、まさに「一人の脱落者も出さない」感が溢れた作りになっています。どこかの某大企業に聞かせてあげたいくらいに素晴らしいの一言です。

しかし２つの弱点があります。

ひとつはガイダンスがたまに暴走してしまうこと・・・・まぁこれは好き勝手に動く利用者のことを考えると仕方がないことですね。
bubbleのレッスンは短く設定されているのすぐにリカバリできますし・・・・

次の弱点は作ってみるまで何を作っているのかイマイチわからないこと。完成形がわからないと作っている身のモチベーションがもちません。
これはまず初回にテキトーにデザインもメチャクチャなまま１回作ってしまうことでクリアしてきましたが、ちゃんと作らないと嫌なタイプ・・・学校のノートは綺麗に取らないと気がすまないタイプの人には厳しいと思います。bubbleはそんな真面目な人にこそ届いてほしいツールなので、これは本当になんとかしてほしいです。出来上がったアプリの説明ページ（動かないやつでも充分）をレッスンの外側においておくだけで良いのでお願いしたいです。

・・・・・で今回の課題は珍しく完成形がイメージできそうなものです。

どんな独自のカスタマイズがあるのかは謎ですが、「ちょっと楽しみ」と思いながら進めていきます。

まずは画面づくりから

まずはフォームを作るところから始まります。
最初にフォームに配置するのは「タイトル」です。
そういえばこのシンプルにつくられたレッスンの中で動かないタイトルを付けたことありませんね。

早速、左側にある要素メニューから「Text」を選択して画面に配置していきます。右側に表示されるプロパティウィンドウには「My To-dos」と入力します。

タイトルだから文字を大きくして真ん中に配置します。
ガイダンスは一旦止まるので、他にも色々やってみましょう

次に入力欄を設置します。
左側の要素メニューから「input」を指定して画面に配置します。
placeholderには「To-do」と入力します。

次は「Date/Time Picker」という新しい要素タイプを選択します。

「Date/Time Picker」を入力項目「To-do」の横の画面に配置します。

次にボタンを配置します。
要素メニューから「Button」を選択してさらに右側に配置し「Create」と名付けます。

これでTo-doの登録画面は出来上がりました。

To-doの登録ワークフローを設定

次は「Create」ボタンを押したときに入力したTo-doをBubbleのデータベースに保存する動作（ワークフロー）を設定します。
「Create」ボタンにフォーカスした状態で右のプロパティウィンドウの「Start/Edit Workflow」をクリックします。

ワークフロー画面に切り替わるので下の方にある「Create here to add an action」をクリックしてアクションを追加します。

データベースのフォームを作成し、そこに登録をするので表示されたメニューからは「Data Things」「Create a new Thing」を選択します。

右側に表示されるプロパティウィンドウのType（項目名みたいな意味）で「Create new type」を選択し「To-do」と入力します。

「To-do」項目を作成するため「Set Another field」をクリックし、下に表示される欄で「Click」をクリックして「Create new field」を選択してフィールド設定画面を表示させます。

フィールドの設定画面が表示されるのでfield nameには「Title」を入力し、field typeには「text」を選択し「CREATE」ボタンをクリックします。

次に入力したTo-doフィールドへセットするように設定します。
Title欄に「input To-do」「"s value」（入力項目「To-do」の値）と選択します。

次に「納期日」のデータベース項目を登録して、入力データをセットします。
さきほど入力した「To-do」項目の下にある「Set another field」をクリックします。

表示される「Click」をクリックして表示されるプルダウンメニューから「Create a new field」を選択します。

表示されるフィールドの登録画面が出たらfield name欄に「Due date」を入力し、field type欄で「date」を選択し「CREATE」ボランをクリックします。

次に「Due date」フィールドに入力した値をセットします。
Due date=欄の「Click」をクリックして「Datepicker Due date」「's value」(日付項目の「Due date」項目の値をセット)を選択します。

ふたたび「Set another field」をクリックします。

表示される「Click」をクリックして表示されるプルダウンメニューから「Create a new field」を選択します。

新規フィールド登録画面が表示されるのでfield nameに「Finished」を入力し、field typeに「yes/no」を選択し「CREATE」ボタンをクリックします。

次にFinished =欄で「no」を選択します。

これでデータのセットは完了です。

ワークフローの最後に入力した値のクリアを行います。
左側のフローの末尾にある「Click here to add an action」を選択します。

表示されるメニューから「Element Actions」「Reset inputs」を選択します。

これでワークフローの設定は完了です。

To-doリストの設定

入力フォームとデータ登録のワークフローの設定が完了したので次は入力したTo-doのリスト表示部分を作ります。

まずはデザイン画面に切り替えます。

左側の要素メニューから「Containers」から「Repeating Group」(表)を選択して、入力項目の下に配置します。右側に表示されるプロパティウィンドウでRows(行数)に「10」をType of contentに「To-do」を選択します。

次にData source欄（持ってくるデータベースの値）をセットします。
Clickをクリックして「Do a search for」を選択し表示されるDo a search forのウィンドウのType に「To-do」を選択します。

下に表示される「+ Add a new constraint」をクリックします。

抽出条件を設定します。「Finished」が「no」（終了していない）のものだけを表示します。

次にソート条件を設定します。sort by 欄を「Due date」を選択します。

次に表の中にTo-doの文字列を配置します。
左側の要素メニューから「Text」を表の中に配置します。

次に配置した「Text」の内容を設定します。
Edit me..のところをクリックして表示される水色の「incert dynamic data」をクリックして「current cell's To-do」「's title」を選択します。

次に「納期日」を表にセットします。
To-doと同じように要素メニューから「Text」を選択して、さきほどのTextの右に配置します。

右側に表示されるプロパティウィンドウのEdit me..のところをクリックし表示される水色の「incert dynamic data」をクリックして「current cell's To-do」「's Due date」「formated as 11/07/22」（To-doのDue date項目をmm/dd/yyで表示する）を選択します。