【NoCode】Bubbleのチュートリアルを初心者向けに解説！ ⑦ データのリストをフィールドに定義する

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールBubbleのチュートリアル Lesson 7 を初心者向けに解説していきます！

    この記事で学ぶこと
・データのリストを Field に定義する方法
・リストに異なる Type のデータを紐づける方法
・リストからデータを削除する方法

チュートリアルの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。

1. 実装するサンプル

各ユーザーごとの買い物リストを作成し、フォームに入力されたアイテムをデータベースに保存した後、リストに追加する機能を実装します。削除アイコンをクリックすると、リストから削除することも可能です。

今回は、「Field」に「データのリスト」を定義し、1つの「Field」に対し、複数のデータを保存する方法を学びます。

2. 入力フォーム及び保存ボタン作成

「Input」を配置し、「Placeholder」を「What do you want to buy ?（何を買いたい ?）」に変更します。

後ほど、データベースとの紐づけに使用するため、「Input Item」という名前が設定されていることを確認しておきます。

「Button」を配置し、「Save」に変更します。

次章で「Workflow」を作成するため「Start/Edit workflow」をクリックします。

3. 入力されたアイテムをデータベースに保存

新規データをデータベースに保存する方法については、第1回目のチュートリアルで学習しました。復習のために以下に実装の流れをまとめます。

・「Type」を作成する
・「Field」を作成し、データ型を設定する
・「Field」と入力フォームの値を紐づける

「Type」及び「Field」につきましては、次の記事で詳しく解説しましたので、まずはこちらをご覧ください。

今回のチュートリアルでは、「Shopping item」という「Type」を作成し、「Name」という「Field」を作成していきます。

上記の流れに沿って、まず最初に「Type」を作成していきます。

「Click here to add an action」をクリックし、「Data（Things）」から「Create a new thing」を選択します。

「Type」のドロップダウンリストから「Create a new type」を選択し、「New type」に「Shopping item」と入力します。

続いて「Field」を作成していきます。「Set another field」をクリックし、「Create a new field」を選択します。

「Field name」に「Name」と入力し、「Field type」に「text」を選択した後に「CREATE」ボタンをクリックします。

「Name」= 「Input Item's value」となるように順に選択します。

「Input Item」は入力フォーム作成時に確認した名前で、「's value」は「値」という意味です。

これにより、「Name」と入力フォームの値の紐づけが完了しました。

これまでの実装で、「Shopping item」という「Type」を作成し、「Name」という「Field」を作成することで、フォームに入力された値を保存することができるようになりました。

保存終了後に、入力フォームの値をクリアするために、さらに「Workflow」を追加します。

「Click here to add an action」をクリックし、「Element Actions」から 「Reset inputs」を選択します。

4. Shopping list 作成及びデータの追加

続いて、「User」及び「Shopping Item」という、2種の異なる「Type」の紐づけを行っていきます。

ユーザー情報の保存については、第2回目のチュートリアルで学習し、「User」という「Type」があらかじめ準備されているため、作成する必要が無いということを学びました。

「User」に対して、さらに「Field」を作成します。

「Workflow 」に戻り、「Click here to add an action」をクリックし、「Account」から「Make changes to current user」を選択します。

「現在のユーザーに対して変更を加える」という意味です。

「Change another field」をクリックし、「Create a new field」を選択することで、「User」に新しい「Field」を作成します。

「Field name」に「Shopping list」と入力し、「Field type」に「Shopping item」を選択します。

これまでのチュートリアルで、「Field type」は「データ型」であり、「text」「number」「image」などの型を設定することで、異なるデータの保存を防ぐ役割があるということを学習しました。

今回は、「Field type」に、先程作成した「Shopping item」という「Type」を設定しています。

これにより、「User」の「Shopping list」という「Field」に、「Shopping item に保存されているデータ」だけを保存することができるようになりました。

次に、「This field is a list（multiple entries）」にチェックを入れて、「CREATE」ボタンをクリックします。

これにより、「リストとして複数データを保存する」ことができるようになりました。

左メニューの「Data」から「User」を確認してみると、「Shopping list」という「Field」が作成されており、データ型に「List of Shopping items」と表示されています。

「Workflow 」に戻り、「Shopping list add Result of step1」となるように順に選択します。

「step1の結果を Shopping list に追加する」という意味です。

これにより、フォームに入力されたアイテムを「Shopping Item」の「Name」に保存し、「現在のユーザー」の「Shopping list」に追加することができるようになりました。

ここまでの「Workflow」を再確認します。

①  入力されたアイテムを「Shopping item」の「Name」に保存
②  保存終了後に入力フォームの値をクリア
③  ①のデータを「現在のユーザー」の「Shopping list」に追加

実際にやってみた方が分かりやすいと思いますので、ユーザーを2人用意し、それぞれログインして、以下のようにフォームに入力してみました。

    User1@gmail.com
・テレビ
・洗濯機
・冷蔵庫

    User2@gmail.com
・キャベツ
・人参
・じゃがいも

「Shopping item」を確認すると、先程作成した「Name」の他に、「Created Date」「Modified Date」「Created By」という、3つの「Field」があります。

これらはそれぞれ、「作成日」「更新日」「作成者」を表し、「Type」を作成する際に、自動でセットされる「Field」です。

「Created By（作成者）」に着目すると、どのユーザーが作成したデータなのか分かるようになっています。

「User」を確認すると、「Shopping list」に数値化されたデータが各ユーザーごとに3つずつ格納されています。

これは先程確認した、「Shopping item」のデータで、リストとして保存されています。

少し脱線しましたが、チュートリアルに戻り「Shopping list」のデータを表示していきます。

5. Shopping list のデータを一覧表示

「Repeating Group」を入力フォームの下に配置します。

点線で区切られたブロックの1つずつを「Cell」と呼びます。
この「Repeating Group」を設定することによって、データベースに保存したデータを、「Cell」1つずつに順番に表示していくことが可能になります。

「Type of content」に「Shopping item」を選択します。

「Data source」に「Current User's Shopping list」となるように順に選択します。

これらの設定により、それぞれの「Cell」ごとに、「現在のユーザーの Shopping list」に格納されている「Shopping item」のデータを順番に読み込んでいくことが可能になりました。

「Text」を「Repeating Group」の1番上の「Cell」にドラッグアンドドロップして配置します。その他の「Cell」にも自動的に「Text」が配置されます。

「Insert dynamic data」をクリックし、「Current cell's Shopping item's Name」となるように、順に選択します。

これにより、それぞれの「Cell」ごとに読み込まれている「現在のユーザーの Shopping list」に格納されている「Shopping item」の「Name」のデータを表示できるようになりました。

6. Shopping list のデータをリストから削除

「Icon」を「Repeating Group」の1番上の「Cell」にドラッグアンドドロップして配置します。その他の「Cell」にも自動的に「Icon」が配置されます。

「Icon」に「Delete」を選択します。
「Start/Edit workflow」をクリックし、「Delete Icon」に「Workflow」を作成します。

「Click here to add an action」をクリックし、「Account」から「Make changes to current user」を選択します。

先程作成した「Shopping list」を選択します。

「Shopping list remove Current cell's Shopping item」となるように順に選択します。

これにより、「Delete Button」をクリックした「Cell」で読み込まれている「Shopping item」を「現在のユーザーの Shopping list」から削除することが可能になりました。

以上で、今回の実装は完了です。「Preview」ボタンをクリックし、テストを行ってください。

7. まとめ

最後に、今回のチュートリアルの流れをまとめます。

①  入力フォーム及びボタンを配置する
②「Shopping item」という「Type」を作成する
③「Name」という「Field」を作成する
④「Name」と入力フォームの値を紐づける
⑤「User」に「Shopping list」という「Field」を作成する
⑥「Shopping list」に「Shopping item」を紐づける
⑦「Repeating Group」に「Shopping list」を紐づける
⑧  現在のユーザーの「Shopping list」のデータを一覧表示する
⑨  アイコンクリックで「Shopping list」から削除する

これまでの実装で、「Field」に「データのリスト」を定義し、異なる「Type」のデータを紐づけて保存する方法を学びました。

今回は、少し難易度が高めでしたが、Webアプリ開発において非常に重要な項目なので、しっかり理解する必要があります。

引き続きBubbleの理解を深めていきましょう！
次のチュートリアルはこちらです！