ノーコーダーのつかさです。
今回は覚えておくととても便利なRepeating Groupの使い方について学んでいきましょう！
簡単に言ってしまうと、Groupの範囲内で同じ要素を繰り返し表示できる機能です。プログラマーの方にはfor文をイメージしてもらうとわかりやすいでしょうか。
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
見た目を作る
まずRepeating Groupを使う上で最低限必要な要素を配置していきましょう！
左側のVisual Elementから「Text」「Button」をそれぞれドラッグ＆ドロップで配置します。
またAppearanceから表示名もそれぞれ①「名前」②「保存」に変えておきましょう。
次にRepeating Groupを配置します。下の画像を見れば分かると思いますが、デフォルトでは1行4列の表示範囲が用意されています。
今回は少し設定をいじって2行3列にしてみましょう。
Rowを3、Columnsを2に変更してください。
白い枠内の表示が2行3列に変わったことを確認できましたか？
Repeating Groupで表示するデータを登録
次に「保存」Buttonを押した時に「名前」のInput欄に入力された値をデータベースに登録する機能を作ります。
これがRepeating Group内で繰り返し表示されるわけですね。
まずは「保存」Buttonの設定画面からStart/Edit workflowをクリックしてください。
ワークフロー画面に移動できたら下記の順番でデータベースを作っていきます。
- Click here to ad an actionをクリック
- Data(Things)
- Create a new thing
「Create a new thing」という設定画面が開くので、下記の通り設定してください。
- New Type：Nameと入力
- Set another fieldからCreate a new fieldを選択
- Field name：name
- Field type：textを選択後Create
- name = Input 名前’s valueと入力
何をしているのかというと、「Nameというデータベースを作り、nameというtext型のデータ項目を追加、Input欄に入力された値をnameに保存できる」ようにしています。nameはとりあえずデータを保存するための箱のようなものと考えて貰えればわかりやすいかもしれません。
bubbleで言う「Type」というのは一般的には縦列と横列があるテーブル、もしくはRDB（リレーショナルデータベース）のことです。
また「Field type」と小文字で書かれたtypeはTypeとはまったく関係なくデータの型のことです。
ややこしいですね泣。
テーブルやデータの型がピンとこない非エンジニアの方は下記の記事を参考にしてみてください！
データベース用語まとめ】テーブル、カラム、フィールド、レコードとは？
データを呼び出し表示させる
ここまで来たら後一歩です！
Designワークスペースに戻ってRepeating Groupの設定を開いてどこからデータを取ってくるのかを記述します。
- Type of content：Nameと入力
- Data Source：「Do a search for」をクリック
- TypeでNameを選択
以上でNameテーブルのデータをRepeating Group内に表示するという設定を行うことができました。
最後に「Text」をRepeating Group内に配置します。
Appearanceの「Insert Dynamic Data」からCurrent User’s Name’s nameを登録してください。
ここで何をしているかというと「現在のユーザーが持っているNameというテーブル(データベース)からnameというデータを呼び出してRepeating Groupで表示させる」という記述を行なっています。
ここまでできたらPreviewから実際の動作を確認してみましょう！
うまく動作しているようです！
まとめ
中々、非エンジニアの方には馴染みづらい用語も出てきたと思いますが、Repeating Groupを使いこなすことができれば、bubbleでできることの幅も広がります。ぜひマスターしてください！
Enjoy NoCode!
コメント