【Bubble】containerの使用方法総まとめ！

こんにちは！

EPICs株式会社です。

Bubble開発では、要素を整理して配置するためにcontainerが重要な役割を果たします。

それぞれの特徴を活かして要素を整理したりレイアウトを整えることで、完成度の高いアプリ開発が可能になります。

本記事では、Bubbleの主要なcontainerについて説明し、それぞれの特徴や使用方法を解説します！

※本記事は、まだBubbleを触ったことがない、始めたばかりで開発に使う要素がわからないといった初級者向けの記事です。

動画解説バージョンはこちら！

containerのそれぞれの役割や使い方

Bubbleのエディタの左側には、さまざまなコンテナ要素が用意されています。それぞれの用途と適切な使い方を理解することで、よりスムーズにアプリ開発を進めることができます。

Group

groupは、複数のエレメントをまとめて表示する基本的なcontainerです。

Textエレメントなどをまとめて表示したり整理すること、レイアウトを整えることなどに使用します。

group layoutで、グループ内のエレメントの配置方法を選択することができます。

選択できる配置方法は以下となります。

• 配置方法：
  • Fixed（自由配置）：エレメントをグループ内の自由な位置に配置できます。画面の大きさによってレイアウトが崩れやすいです。
  • Column（縦並び）：エレメントを縦方向に整列できます
  • Row（横並び）：エレメントを横方向に整列できます
  • Align to Parent（重ね配置）：グループ内で要素を重ねて配置することやグループ内の決まった位置にエレメントを配置できます。

groupの作成は、groupにしたい要素をまとめて選択をし、マウスの右クリック後「Group elements in」を選択することで、選択した要素をグループ化するといった方法も可能です。

Repeating Group

Repeating Groupは、データを繰り返し表示するためのグループです。

Repeating Groupに、データベースのどのデータを表示するのかといった指示を与えることで、データベースに登録されたユーザーの一覧表示や商品データの表示といったリストデータの表示が可能です。

表示する該当のデータが複数ある場合、Repeating Groupを一つ配置するだけで、該当する複数のデータを表示できます。

データを上記画像のように繰り返し表示する場合に使用する、使用頻度の高い要素です。

Popup

Popupは、ボタンなどの要素を押したときにアラートなどを表示させる要素です。

アドレスなどのデータを登録する際やデータを削除しようとしたときに「入力したデータを表示しますか？」「このデータを削除しますか？」といった文言が上記の画像のような形で表示されるアラートを見たことはないでしょうか？

Bubbleでもその機能を実装することができ、その要素をPopupと呼びます。

Popupは通常隠れていますので、必要な時に表示させるワークフローを組みます。

表示させる流れは以下です。

• Popupを表示させるための要素を設置（ボタンなど）
• ワークフロー画面を開く
• Click here~を選択
• element action →Showの順に選択
• 表示するPopupを選択

Popupは非表示にする動作も必要です。
非表示にする流れは下記です。

• 閉じるボタンなどの要素を設置
• ワークフロー画面を開く
• Click here~を選択
• element action →hideの順に選択
• 表示するPopupを選択

Popupを利用した際は、画面の中で浮かせて利用する要素のため、開発画面左側のメニュー一覧となるエレメントツリーの「over lays」に格納されます。

Floating Group

Floating Groupは、常に表示される固定のgroupです。

要素が浮いているような状態のため、上記画像のように要素が重なっても常に表示されています。

ヘッダーやフッター、サイドメニューを実装する際に利用します。

Floating Groupを利用した際は、他のgroup要素とは違い、開発画面左側のメニュー一覧となるエレメントツリーの「over lays」に格納されます。

Group Focus

Group Focusは、特定のエレメントに紐づいてgroupを表示する要素です。

上記画像のように、あるエレメントを指定して実装することで、そのエレメントを選択した際にGroup Focusを表示させることが可能です。

アイコンやエレメントを選択することで、様々なメニューが表示される「ハンバーガーメニュー」といったものに実装されます。

Group FocusもFloating Group同様に、開発画面に配置した際は、開発画面左側のメニュー一覧となるエレメントツリーの「over lays」に格納されます。

Table

Tableは、表形式でデータを表示するcontainerです。

データを表示して使うといった面では、Repeating Groupと使用用途が重なる部分があります。

Repeating Group同様に、データベースに登録されている情報を一覧表示することができ、該当する表示データが複数ある場合は、複数データを表示できます。

Bubble開発において、containerは基礎となる要素です。

実装する画面や内容に合わせて適切なcontainerを利用することで、アプリの完成度の高さにつながります。

開発内容にあわせた適切なcontainerを選択できるよう、それぞれの特徴をしっかりつかんで開発スキルを上げていきましょう！