コードを 1 行も書かずにアプリを構築できることを知ったとき、それはあまり深みのないシンプルなアプリを作成することを意味すると思いました。基本的なことはできるだろうと思っていましたが、プロジェクトは難しくなり、それを機能させるにはコーディングを学ばなければならなくなりました。
実のところ、私は技術的なスキルが不足しており、懐疑的であったにもかかわらず、 非常にクールなアプリをいくつか構築し、機能的な結果に到達するまでに数週間しかかかりませんでした。
でも、どうやって？ ノーコードツールは高度なプログラミング概念を簡素化し、理解しやすく使いやすくします。コードを書いたり、コマンドを手動で入力したりする代わりに、ビジュアル インターフェイス、ドラッグ アンド ドロップ要素、ウィザードを使用して、すべてを希望どおりに構成できます。
このガイドでは、Bubbleと呼ばれるノーコードツールを使用してシンプルなアプリを構築する手順をステップごとに説明します。これを完了すると、ノーコード アプリ構築の基本を理解し、 コードを使わずにエキサイティングな新しいものを構築できるようになります。
私のToDoリストアプリの紹介
今日再作成するモデル アプリは Things To Do です。これは、次のことができる ToDo リスト アプリです。
今日やるべきタスクを表示する
リストに新しいタスクを追加および削除する
タスクを完了としてマークする
完了したタスクのリストを表示する
以下に設計例を示します。
アプリのサイトにアクセスして機能を調べることができます。ページに記載されているテスト資格情報を使用してログ インし、試してください。ただし、他の人も同時にテストしている可能性があるため、多くのタスクが行き来する可能性がありますので注意してください。
このガイドを最後まで実行すると約 2 時間かかります。
始める前に
独自の Things To Do バージョンの構築を始める前に、 Bubble で無料アカウントを作成する必要があります。
ご希望の場合は、一連のステップバイステップの手順でコアコンセプトを説明する10レッスンのセットであるクラッシュ コースを受講することもできます。ただし、私たちが何をしているのかを説明しながら説明するので、その部分は今のところスキップしてください。
アカウントを作成したら、[新しいアプリ]ボタンをクリックし、ダイアログ ボックスに情報を入力して、 [空白のページで開始]を選択します。
パート1 : データベースの設定
最近のアプリのほとんどは、動作するためにデータベースに依存しています。データベースを使用すると、データを保存、維持、およびアクセスできるだけでなく、さまざまなデータ要素間の関係を作成することもできます。
Bubbleのデータを扱う部分にアクセスしてみましょう。画面の左側のナビゲーション バーにある[データ]タブをクリックします。
アプリを作成するときは、ユーザーからのデータをデータベースに保存します。アプリの機能を強化するために必要なものに応じて、異なるデータ タイプが必要になります。
現時点では、User データ型のみ存在します。これはデフォルトで設定されており、アプリのユーザー、そのEメールアドレス、パスワード、作成または変更された日付、ユーザーの作成者、スラッグを追跡します。
ToDo リストを作成しているので、各ユーザーがリストを埋めるために作成するタスクを保存する方法が必要になります。新しいタイプの入力フィールドに「タスク」と入力し、 「作成」をクリックします。
タスクのデータ型ができたので、各タスクに関する追加情報を保存する必要があります。タスクの説明が必要です。これにより、ユーザーは犬の散歩をしたり、ベッドを整えたりする必要があることを記録できます。また、タスクがまだ完了する必要があるか、すでに完了しているかに関係なく、タスクのステータスを保存する方法も必要です。
次に、これらのフィールドを作成しましょう。新しいフィールドの作成をクリックします。
表示されるフィールド名ダイアログ ボックスに「description」と入力します。データ フィールドにも型が必要です。 フィールド タイプドロップダウンメニューをクリックし、テキストを選択します。完了したら、 「作成」をクリックします。
タスクのステータスに対してこのプロセスを繰り返してみましょう。[新しいフィールドの作成] をクリックし、 [フィールド名]に「status」と入力して、[フィールドの種類] を[数値]に設定します。
なぜ数字の種類なのか?タスクのステータスを追跡するために数値システムを使用します。番号が0のタスクは未完了として扱われ、番号が5のタスクは完了したものとみなされます。0と5 (たとえば0と1ではない) を選択した理由は、将来的に追加のタスク ステータスを作成するための余地を残すためです。結局のところ、バックログから完了リストまで、「スケジュール済み」または「進行中」ステータスを追加することもできます。
これで、タスクデータ型が役立つために必要な基本情報が揃いました。ちょっとした問題があります。アプリに最初の10のユーザーが登録され、そのユーザー全員がタスクの作成を開始すると、各タスクを正当な所有者に割り当てるのが難しくなります。これは長期的には混乱を招く可能性があるため、各タスクの所有者を登録するための追加のデータ フィールドを追加します。
新しいフィールドの作成をクリックします。ダイアログ ボックスで、フィールド名をownerに設定します。フィールド タイプの場合は、ドロップダウンメニューを開き、一番下の[ユーザー]を選択します。最後に、 「作成」をクリックします。
タスク データ型のデータ フィールドがすべて設定されました。画面は次のようになります。
後でアプリを構築するときに、すべてのタスクをデータベース上の各ユーザーにピン留めしておくと便利です。それでは、設定しましょう。ユーザーデータ タイプをクリックします。
新しいフィールドの作成をクリックします。名前を「tasks」にして、フィールドの種類をタスクに設定し、Createをクリックする前に、This field is a list (multiple entries)をチェックを入れることを忘れないでください。これにより、各ユーザーはこのフィールドに必要な数のタスクを追加できるようになります。
これで転送する準備ができました。(注: アプリにさらに機能を追加する場合は、将来的にデータ タブに再度アクセスする必要があります。)
各ユーザーがプロジェクトを追跡する方法を追加するとします。つまり、プロジェクト データ型を作成し、プロジェクトの所有者、参加者、タスクを識別するためのすべての関連フィールドを提供する必要があります。ユーザーにチームを形成させたい場合も同様です。
アプリ内にさらに多くの種類のデータを保持する必要がある場合は、データベースを拡張する必要があることに注意してください。とりあえず、ユーザー インターフェイスの作成に移りましょう。
パート2 : ユーザーインターフェースの作成
ユーザー インターフェイス (UI) は、ユーザーがデータベースに情報を書き込んだり、データベースから情報を取得したり、アプリ (この場合は ToDo リスト アプリ) を便利にするロジック操作を実行したりするために操作するものです。
まず、新しいページを追加する必要があります。アプリ ページは Web サイト ページとほぼ同じように機能し、さまざまなアクティビティやダッシュボードを分離するために使用できます。画面の左上端にある現在のページを表示するドロップダウンメニューをクリックします。
「新しいページを追加」をクリックします。
ページ名をリストに設定し、ドロップダウンメニューは空白のままにします。[作成]をクリックします。
デザインを始める時が来ました。画面の左側にあるUIビルダーに注目してください。
要素ツリーには、これまでにページに追加したすべての要素のリストが表示されます。このセクションの下にあるものはすべて、ページに追加 できる 要素であり、カテゴリに分かれています。
ToDo リストを保持するグループを追加しましょう。[コンテナー]セクションで、 [グループ]をクリックします。
次に、キャンバス上に幅の広い長方形を描きます。
完了すると、編集ダイアログが表示されます。この種類のダイアログを使用すると、ページに追加する各要素の詳細を編集できます。まず、要素の名前を変更して整理しましょう。このダイアログのヘッダーをクリックして、名前を「グループ リスト」に変更します。
境界線を付けましょう。このグループの個別のスタイル編集のロックを解除するには、 [スタイルの削除]をクリックします。
次に、 [境界線] スタイル - すべての境界線を [ 単色 ] に、[ 丸み ] を 10に 、[幅 ] を 2に設定します。
このグループのサイズと位置を調整して、必要なものをすべて保持できるようにしましょう。編集ウィンドウ内のレイアウトタブをクリックします。
幅 (W)、高さ (H)、X 位置 (X)、および Y 位置 (Y) に次の値を入力します。
W 731
H 393
X 114
Y 134
このグループは視覚的な要素としてのみ機能するため、もういじることはありません。
実行するToDoリストを表示するために、繰り返しグループを追加します。繰り返しグループは、一連の行と列にデータを表示する特別な種類のグループであり、大量のデータを簡単な方法で視覚化できます。
左側のUI ビルダーメニューの[コンテナー]の下で、 [繰り返しグループ]をクリックします。
先ほど構成したグループリスト内に繰り返しグループを描画します。内部領域の大部分を覆っていることを確認してください。
繰り返しグループの編集ダイアログボックスが表示されたら、 レイアウトタブが表示されていることがわかります。幅、高さ、X、および Y の値を入力します。
W 671
H 346
X 28
Y 16
物事を整理しましょう。編集ダイアログのヘッダーをクリックして、この繰り返しグループの名前を「RepeatingGroup ToDoリスト」に変更します。
このグループの外観をもう少し編集してみましょう。「外観」タブをクリックします。
行数を 6に設定します。
行区切り文字も取り除きましょう。この要素のスタイルを個別に編集するには、前と同じように「スタイルの削除」をクリックします。表示される新しい設定で、 「セパレーター」の前のドロップダウンメニューをクリックし、 「なし」に設定します。
いくつかの機能を設定する時が来ました。この繰り返しグループにToDoリストが表示されることをBubbleに知らせる必要があります。コンテンツタイプのドロップダウンメニューをクリックし、タスクを選択します。
しかし、タスクを表示するにはこれだけでは不十分です。表示するタスクをどこから取得するかも指定する必要があります。データ ソース入力には、「クリック」を促す小さな四角形が表示されます。そこをクリックするとドロップダウンメニューが表示されます。
ドロップダウンメニューで、 [検索する]を選択します。
![[検索] を選択します。](https://images.ctfassets.net/lzny33ho1g45/5lQzibgIAHkvkopqtu6MwI/14c8fe44a5bb3e84f6d7a4b2fb83548c/29_-_No-code_image.png?fm=avif)
左側の新しいダイアログボックスの「タイプ」ドロップダウンメニューで、 タスクをクリックします。
しかし、すべてのタスクを表示したいわけではないですよね?まだ完了していないタスクと、現在のユーザーに属するタスクを表示したいだけです。新しい制約の追加をクリックします。
表示される入力フィールド内の小さな四角形をクリックします。
ドロップダウンメニューで、ステータスをクリックします。
もう一度クリックして、 =を選択します。
最後に、もう一度クリックして0 （ゼロ）と入力し、Enter キーを押します。この制約により結果がフィルターされ、ステータスが0 (未完了) のタスクのみが表示されます。
別の制約を追加するには、以下をクリックします。そうしたら：
入力フィールドをクリック
所有者を選択
もう一度クリックして選択する=
最後にもう一度クリックして現在のユーザーを選択します
この式により、結果には現在のユーザーが作成したタスクのみが含まれ、アプリ内の他のユーザーに属するタスクは含まれなくなります。最終結果は次のようになります。
私たちのRepeatingGroup ToDoリストはデータベースから情報を正しく取得していますが、ユーザーがそれを見ることはできません。右上のXアイコンを押すと編集ダイアログを閉じることができます。
ここで、繰り返しグループ内にテキスト要素を追加し、適切なデータが表示されるように設定する必要があります。
始める前に、繰り返しグループが複数の行を持っていることを覚えていますか?この要素の優れた点は、最初の行を構成すると、他のすべての行が同じデザインと機能を持つことです。これにより、ソーシャルメディア フィード、オンラインストアの製品リスト、またはToDoリストのタスクなどの機能を作成できます。
左側の UI ビルダー メニューから、 Visual 要素 から Text 要素をドラッグし、繰り返しグループの最初の行内にドロップします。カーソルの下に赤い線が表示されている場合は、正しく行っています。
他の行にどのように複製されているかわかりますか?これは、最終的にどのように見えるかのプレビューです。テキスト要素を右クリックし、 [編集]をクリックします。
上部の入力フィールドで、「…edit me…」を消去し、青いボタン「動的データを挿入」をクリックします。
ドロップダウン メニューから、現在のセルのタスクの説明を選択します。
これらのテキスト要素はそれぞれ、対応するセルのタスクを引き出し、その説明を表示します。他のデータ フィールドに対してこのプロセスを繰り返すこともできます (たとえば、タスクのステータスや作成日を表示するなど) が、現時点では必要ありません。
ToDo リストには、タスクを完了としてマークする方法も必要です。[ ビジュアル要素] メニューから Icon 要素をドラッグし、右側の繰り返しグループの最初の行内にドロップします。
デフォルトのアイコンはフラグです。説明したいアクションに適したアイコンを選択します。また、小さくする必要があります。アイコンの制限ハンドルをドラッグしてサイズを変更するか、 [レイアウト]タブをクリックして次の値を入力します。
W 30
H 30
X 609
Y 14
物事を整理し続けましょう。アイコンの名前を「アイコン マーク完了」に変更します。
ユーザーがタスクの追加を間違えた場合、タスクを削除するボタンがあると便利です。このプロセスを繰り返して、タスクを削除するアイコンを追加します。同じ方法を使用してアイコンのサイズを変更します。その際、「アイコン削除タスク」という名前を忘れずに付けてください。
リストにタスクを追加するためのボタンを追加します。そのためにアイコンも使用します。これをToDoリストの右上に配置し、「Icon 新タスク」という名前を付けます。
新しいタスクを追加するには、入力フィールドとボタンを含むポップアップを表示します。左側のUI ビルダーメニューの[コンテナー]の下で[ポップアップ]をクリックし、キャンバスの中央をクリックして配置します。
編集ウィンドウのポップアップの名前を「ポップアップ新規タスク」に変更します。次に、ポップアップにテキスト要素を追加し、そこに「新しいタスクを作成」と入力します。
このテキストのスタイルを、よりインパクトのあるものに変更しましょう。スタイルドロップダウンメニューをクリックし、 H2見出し - ダークを選択します。
要素のハンドルを使用してサイズを変更し、ポップアップ上で配置します。中央に配置するには、右クリックして[水平方向に中央揃え] をクリックします。キーボードの矢印キーを使用して要素を移動することもできます。
テキスト要素の下に入力フィールドを追加します ( UI ビルダーメニューの[入力フォーム]セクションにあります)。プレースホルダの値を「ここに説明を入力してください..."
最後に、これらの両方の要素の下にボタン (左側のメニューの[ビジュアル要素] の下にあります) を追加し、「タスクの作成」というラベルを付けます。
ポップアップがアプリの残りの部分の邪魔になっています。非表示にするには、その外側をクリックします。後でもう一度表示したい場合は、左側のメニューの [要素] ツリーで表示を切り替えることができます。そこにポップアップがあるか探し、小さな目のアイコンをクリックして表示または非表示にします。
アプリのインターフェースはほぼ完成しました。完了したタスクをユーザーが確認できるようにリストを追加しましょう。最初に作成したものとほぼ同じように、ステータスと所有者に基づいてタスクをフィルターする別の繰り返しグループを使用します。
RepeatingGroup の To Doリストを右クリックし、 編集をクリックします。
レイアウトタブをクリックします。
[ この要素は、ページの読み込み時に表示されます]のチェックを外します。このプロパティを使用して、後でToDoリストまたは完了したタスクを表示するメニューを作成します。
この要素の幅 (W)、高さ (H)、X 位置 (X)、および Y 位置 (Y) に注意してください。この場合はW 675、 H 347、 X 22、 Y 19です。
次に、ダイアログ ボックスを閉じます。RepeatingGroup の To Do リストを右クリックし、 クリックします。
グループ リストの左上領域内を右クリックし、 [貼り付け]を選択します。
繰り返しグループのコピーは、元のグループのコピーから少し離れて貼り付けられました。また、左側のメニューの要素ツリー内に新しい要素が表示されたことにも気付くでしょう。小さな目をクリックすると、RepeatingGroup の ToDoリストが非表示になります。
次に、RepeatingGroup の ToDoリストのコピーをクリックして、ダイアログを開きます。
すべてを整理しておくために、このグループの名前を「RepeatingGroup 完了済みリスト」に変更します (これを行うには、編集ダイアログのヘッダーにある名前をクリックします)。
[レイアウト]タブをクリックし、先ほどコピーした W、H、X、Y の値 (W 675 、H 347 、X 22 、Y 19 ) を入力します。これにより、両方のリストがページ上で同じサイズと位置を持つようになります。
このリストに表示されるタスクの種類を変更します。「外観」タブをクリックします。
データ ソースフィールドで、式「タスクの検索」をクリックします。新しいダイアログが表示されます。ステータス制約で、「 0 」を「 5 」に変更します (これは、タスクを完了としてマークするために決定した番号です)。他のすべてのフィールドはそのままにしておきます。
「完了」リスト内の完了したタスクには削除アイコンは必要ありません。右クリックして削除することができます。
タスクが完了したことを示すアイコンは、タスクを完了としてマークするためのアイコンとは異なる必要があります。より適切なアイコンを選択します。適切なものを見つけたら:
色を緑に変更します (アイコンを右クリックし、 [編集]をクリックし、[スタイル]の下にある[スタイルの削除]をクリックすると、上にカラー ピッカーが表示されます)。
名前を「アイコン完了」に変更します。
これで、2 つの繰り返しグループができました。1 つはToDoリストを表示し、もう 1 つは完了したタスクのリストです。それらを切り替える方法が必要です。そのために、ToDoリストの上に簡単なメニューを追加してみましょう。
左上にメニューの機能を示唆するアイコンを追加します。「アイコンリスト」という名前を付けます。
「ToDoリスト」というラベルの付いたボタンを追加し、その後に「done」というラベルの付いたボタンを追加します。
「カスタム要素の状態」と呼ばれるものを使用して、各リストの可視性を切り替えます。カスタム要素の状態は、Bubble のUIのさまざまな側面を制御するためのアジャイルな方法です。
配置したアイコン リストを右クリックし、 [編集]をクリックします。
編集ダイアログのヘッダー (要素インスペクター) にある小さなiボタンをクリックします。
[カスタム状態]の下で、 [新しいカスタム状態の追加] をクリックします。
[状態名] を "active-list" に設定し、[状態の種類] を "number" に設定します。[ 作成] をクリックして終了します。
この状態は次のように使用します。状態が1に設定されている場合は常に、RepeatingGroup の ToDoリストが表示され、状態が2に設定されている場合は、RepeatingGroup の Done リストが表示されます。ユーザーが初めてページを開くたびに ToDo リストが表示されるようにしたいので、デフォルト値を1に設定できます。
このカスタム状態ができたので、繰り返しグループにいつ表示および消えるかを知らせる必要があります。要素ツリーで、RepeatingGroup の ToDoリストをクリックします。
表示される編集ダイアログで、 「条件」タブをクリックします。
このタブでは、特定の条件が当てはまる場合に、この要素の特性を変更することができます。新しい条件を追加しましょう。「別の条件を定義」をクリックします。
「When」の前の入力フィールドをクリックします。表示されるドロップダウンメニューで次の操作を行います。
下にスクロールして「アイコン リスト」を見つけてクリックします。
の active-list を選択して式を続行します。
次に、 [is] を選択します。
1の数字を入力し、キーボードの Enter キーを押します
結果は次のようになります。
「true の場合、「変更するプロパティを選択してください」」というラベルの付いたドロップダウンメニューをクリックします。
[ この要素が表示されます]を選択します。
![[この要素が表示されます] を選択します。](https://images.ctfassets.net/lzny33ho1g45/H2JNG0KDMTvAUyXydeW34/f107d40f7e2c7d5f2d31996371ff563c/78_-_No-code_image.png?fm=avif)
ボックスにチェックを入れることを忘れないでください。
何が起こっているかは次のとおりです: アイコンリストのカスタム状態が 1になるたびに、この繰り返しグループが表示されます。同様のプロセスを繰り返して、完了リストを表示しましょう。左側のメニューの要素ツリー内で、RepeatingGroup 完了リストをクリックします。
編集ダイアログはすでに「条件」タブに表示されているはずです。クリックして、前と同じように式を設定します。
のアクティブリスト >のアイコン リスト > を選択します 。
今回は、 2という数字を入力し、Enter キーを押します。
ドロップダウンメニューの「true の場合に変更するプロパティを選択」をクリックし、 「この要素は表示されます」を選択して、ボックスにチェックを入れます。
これで、アイコン リストのカスタム状態が 2に設定されている場合は、この繰り返しグループが表示されます。次のセクションでは、これらの状態を変更する (およびこれらの要素の表示を変更する) 手段を構成します。
ユーザー インターフェイスの準備が整いました。データベースから情報を取得し、希望どおりに情報を表示するすべての要素があり、機能に必要なすべてのボタンと状態もあります。すべてをワークフローで結び付けるときが来ました。
パート3 : ロジックとワークフロー
さて、エキサイティングな部分が来ます。ここで、アプリは実際に私たちが望む動作を実行します。ここで、すべてのボタンとアイコンを適切なアクションを実行するように構成します。
アイコンを右クリックして新しいタスクを追加し、 [ワークフローの開始/編集] をクリックします。
このボタンを使用してポップアップを表示します。新しいクリックを追加するには、ここをクリックします...
要素アクションの上にマウスを移動し、 [表示]をクリックします。
新しいダイアログが表示されます。要素ドロップダウンメニューをクリックし、 新しいタスクをポップアップを選択します。
これで、ユーザーがそのボタンをクリックするたびに、ポップアップの新しいタスクが表示されます。[ デザイン ] タブに戻って、次に構成する要素を見つけましょう。
ポップアップ内に配置するタスクを作成するためのボタンを設定しましょう。画面の左側にある要素ツリーメニューの小さな目のアイコンをクリックして、ポップアップを表示します。
[タスクの作成]というラベルの付いたボタンを右クリックし、 [ワークフローの開始/編集] をクリックします。
このワークフローは長くなります。クリックすると新しいアクションが追加されます。「データ (モノ)」にマウスを移動し、 「新しいモノを作成」をクリックします。
作成したいもののタイプはタスクです。ドロップダウンメニューから選択します。
タスクのデータフィールドのいくつかに入力したいと思います。「別のフィールドを設定」をクリックします。
入力フィールドをクリックし、ドロップダウン メニューから説明を選択します。
= 記号の前の領域をクリックします。表示されるドロップダウン メニューで、 [入力] をクリックして説明を入力します。
これにより、Bubble は、ポップアップ要素内に先ほど配置した入力フィールドの内容で「説明」データ フィールドを入力する必要があることを認識します。の値を選択して式を終了します。
タスクが作成されても、完了していない可能性があります。別のフィールドを設定するにはクリックします。ドロップダウンメニューからステータスを選択します。
= 記号の前の領域をクリックします。ドロップダウンメニューから何も選択しません。数字「0」を入力し、キーボードの Enter キーを押すだけです。
最後に、このタスクの所有者を設定する必要があります。このプロセスを繰り返して別のフィールドを設定し、設定するフィールドとして 所有者 を選択します。= 記号の前の領域をクリックします。ドロップダウン メニューから現在のユーザーを選択します。
ステップ1が完了しました。ここで、このタスクを現在のユーザーのアカウントに関連付けます。クリックすると新しいアクションが追加されます。
[アカウント]の下で、 [現在のユーザーに変更を加える]をクリックします。
［別のフィールドを変更］をクリックします。
入力フィールドをクリックし、ドロップダウン メニューからタスクを選択します。
もう一度クリックして、追加を選択します。
もう一度クリックして、ステップ1の結果 (新しいタスクの作成...)を選択します。
ステップ2が完了しました。ユーザーが作成する各タスクは、ユーザー自身のアカウントに関連付けられます。これにより、アプリがデータベースを検索して特定のユーザーのすべてのタスクを表示するときに、時間とリソースを節約できます。そのため、このステップを完了することが重要です。
ステップ3では入力フィールドがリセットされ、説明ボックスがクリアされます。Bubble によってアクションがまだ提案されていない場合は、クリックして新しいアクションを追加し、 [要素アクション]にマウスを移動して、 [入力のリセット] をクリックします。
最後に、タスクが追加された後、ポップアップを非表示にしましょう。クリックして新しいアクションを追加し、 [要素アクション]にマウスを移動して、 [非表示]をクリックします。
ドロップダウンメニューをクリックし、「ポップアップ新規タスク」を選択します。
このワークフローは完了です。カスタム要素の状態を使用してメニューを構成します。「デザイン」タブをクリックして、アプリのインターフェースを再度表示します。
ToDoリストというラベルの付いたボタンを右クリックし、 「ワークフローの開始/編集」をクリックします。
クリックすると新しいアクションが追加されます。要素アクションにマウスを移動し、状態の設定をクリックします。
要素上で、 「アイコン リスト」という名前のアイコンを見つけてクリックします。
カスタム状態ドロップダウンメニューをクリックし、 active-listを選択します。
値入力をクリックし、「 1 」と入力して Enter キーを押します。
ここで行ったことは次のとおりです。ユーザーが「ToDoリスト」ボタンをクリックするたびに、アイコン リスト内に保存されているカスタム状態が1に変わり、RepeatingGroup の ToDoリストが表示され、RepeatingGroup の Done リストが非表示になります。
[ デザイン ] タブに戻ります。[完了]というラベルの付いたボタンを右クリックし、 [ワークフローの開始/編集] をクリックします。
クリックすると新しいアクションが追加されます。[要素アクション]の下で、 [状態の設定]をクリックします。
先ほどと同じプロセスを繰り返します。要素として Icon Lists を選択し、カスタム状態として active-list を選択しますが、今回は値を 2に設定して Enter キーを押します。
ユーザーがこのボタンをクリックすると、Icon Lists 要素内に保存されている状態が2に変わり、RepeatingGroup の ToDoリストが非表示になり、RepeatingGroup の Done リストが表示されます。
[ デザイン ] タブに戻りましょう。少し異なるアプローチを使用して、RepeatingGroup ToDoリスト内のアイコンのワークフローを処理します。左側の要素ツリーメニューで+アイコンをクリックし、RepeatingGroup ToDoリストの内容を展開します。
[タスクの削除]アイコンをクリックします。編集ダイアログボックスが表示されます。[外観]タブが表示されていない場合はクリックし、 [ワークフローの開始/編集] ボタンをクリックします (ワークフロー ページに移動する別の方法です)。
クリックすると新しいアクションが追加されます。[データ (モノ)]の下で、 [モノの削除]をクリックします。
削除する入力フィールドで、現在のセルのタスクを選択します。
各タスクをその所有者に関連付けた方法を覚えていますか?このタスクをオーナーのアカウントからも削除する必要があります。クリックすると新しいアクションが追加されます。[アカウント] にマウスを移動し、 [現在のユーザーに変更を加える]をクリックします。
［別のフィールドを変更］をクリックします。そうしたら：
入力フィールドをクリックして、タスクを選択します。
もう一度クリックして削除を選択します。
3 回目にクリックして、現在のセルのタスクを選択します。
これで、ユーザーはタスクを削除できるようになりました。[ デザイン ] タブに戻りましょう。要素ツリーで、 「完了マーク」アイコンをクリックして編集ウィンドウを開きます。ワークフローの開始/編集をクリックします。
ユーザーがこのアイコンをクリックすると、タスクが未完了から完了に変わります。不完全は 0 で表され、完全は 5と判断しました。クリックすると新しいアクションが追加されます。[データ (モノ)]の下で、 [モノに変更を加える]をクリックします。
変更する項目で、現在のセルのタスクをクリックします。
「別のフィールドを変更」をクリックします。入力フィールドをクリックしてステータスを選択し、数字5を入力します。
ユーザーがこのアイコンをクリックすると、タスクのステータス データ フィールドが0から5に変わり、未完了から完了になります。
パート 4:テスト
すべてがうまく機能しているかどうかをテストして確認しましょう。画面右上のプレビューボタンをクリックします。
ブラウザの新しいタブが開き、最終的なアプリのプレビューが表示されます。このプレビュー ウィンドウを使用してアプリをテストします。メニューはうまく機能している？タスクを追加、削除、完了としてマークできますか?そうであれば、すべての手順は正常に完了しています。おめでとう!
(画面下部のデバッガを探します。アプリ内の問題のトラブルシューティングに使用できます。
次のステップ
これは、小さな生産性向上アプリのベースにすぎません。ここから、必要に応じて外観と操作感をカスタマイズしながら、新しい機能をいくつでも追加できます。
自分用に何かを構築する場合でも、ビジネス用に何かを構築する場合でも、まったく新しい製品やサービスを構築する場合でも、Bubble や市場にあるその他のノーコード アプリ ビルダーは、コードを 1 行も書かずに強力で洗練された Web アプリを構築するために必要なツールを提供します。
もっと知りたいですか?Bubble の「How to Build」シリーズを探索し、人気のアプリを複製しながらアプリ構築スキルを練習しましょう。
関連資料：
