第3章では、ページレイアウトを構築しながら各エレメントについての理解を深めていきます。

エレメントは、3つのカテゴリに分類されます。

1. 視覚的要素：通常ユーザーがクリックして情報を操作したときに、情報を表示し、ワークフローをトリガーするために使用されます。
2. コンテナ：他の要素を含むエレメント。
3. 入力：ユーザーが情報を入力するために使用するエレメント。いわゆる入力フォームです。

さまざまなエレメントが用意されていますので、順番に確認していきましょう。

Visual elements

Visual elementは視覚的要素です。

ビジュアルエディタには以下のエレメントが用意されています。

Text

テキストを表示します。固定テキストやデータベースに登録されているデータを動的に表示することができます。

Button

ボタンを表示します。保存や削除などのボタンを作成します。

Icon

アイコンを表示します。bubbleではFont Awesomeのアイコンが準備されています（2022/4現在 version 4）。

Link

他ページや外部ページへのリンクを作成するエレメントです。

Image

bubble内のストレージや外部ストレージに保存されている画像を表示することができます。

Shape

四角形を表示します。高さや幅を変えることで境界線としても利用できます。

Alert

アラートを作成するエレメントです。

Video

YouTubeまたはVimeoのIDを指定することにより、動画を埋め込むことができます。

HTML

HTMLコードを記述することで、bubbleのエレメントで準備されていないエレメントを作成することができます。HTMLの他にCSSやJavaScriptも記載できます。

Map

Google Mapを埋め込むことができます。

Built on Bubble

bubbleのロゴを表示します。

Input forms

入力フォームとして利用するエレメントです。

Input

テキストや数字を入力するためのテキストボックスを作成します。改行ができません。テキストのみ、整数のみ、日付のみ、と言ったようにフォーマットを設定できます。Address（住所）やUS Phone（電話番号）のフォーマットはアメリカのフォーマットに基づきますので、日本語ではあまり使用しません。

Multiline Input

改行を含む複数行のデータを入力するためのテキストエリアを作成します。Multiline Inputに入力した内容はテキスト形式として扱われます。

Check box

チェックボックスを1つ作成します。

Dropdown

ドロップダウン（択一選択）を作成します。選択肢は固定で入力する方法と、データベースに保存されている値などから動的に取得する方法があります。

Search box

検索ボックスを作成します。検索したいデータベースのタイプを設定することで、入力内容の部分一致検索を行い、候補を表示します。ユーザーは候補を選択することで入力します。

Radio Butttons

ラジオボタンを作成します。選択肢は固定で入力する方法と、データベースに保存されている値などから動的に取得する方法があります。

Slider Input

1〜10点など特定の数値の範囲内で値を選択するときに利用するエレメントです。製品の評価などに利用できます。

Data/Time Picker

日付をカレンダーから選択するエレメントを作成します。日付のみ、日時の2つの形式から設定選択できます。

Picture Uploader

画像のアップロードエレメントを作成します。ユーザーアイコンの表示などに使用します。

File Uploader

ファイルのアップロードエレメントを作成します。

Group

グループは、他の要素を含む要素です。

グループには2つの役割があります。

1. 視覚的な観点から要素を集約し、そのグループ内の全てのエレメントが一緒に移動します。
2. グループにはデータを挿入でき、グループ内の要素は親グループのデータを参照できます。

Repeating Group

Repeating Group（繰り返しグループ）は、データベースなどからデータのリストを表示します。最初のセルを設計すると、残りのセルはその設計に従います。

一覧（ユーザー一覧、投稿一覧など）を表示する際に使用します。

Popup

Popupは、ワークフローで表示するまで、ユーザーに表示されません。Popupが表示されている場合、ウインドウ中央の固定位置に表示されます。Popupがウインドウの高さ/幅より大きい場合、ユーザーはスクロールして全体を表示できます。

Reusable elements

Reusable elementsは再利用可能なエレメントとして定義できます。

これは同じ要素を頻繁に再利用する場合に役立ちます。

例：ヘッダー、フッター

Floating Group

Floating Groupはページ上部に独立して表示させることができるグループです。

ページのスクロール位置やページ内のグループの表示に関係なく、エレメントを画面上の同じ場所に表示するために使用します。

例：ヘッダー、上にスクロールなどのボタン

Group Focus

Group Focusは、ユーザーがグループの外側をクリックすると自動的に非表示になるグループです。

別のエレメントを基準にして配置します。

ドロップダウンメニューで特に利用されます。

bubbleのレスポンシブ機能

スマートフォンでもPCでも綺麗なレイアウトにするため、bubbleのレスポンシブ機能を利用します。

flexbox

Bubbleでは数年前から新レスポンシブエンジンが開始されました。新レスポンシブエンジンはflexboxというデザイン要素（CSS）を利用しており、縦横ともに要素や最小・最大値に応じて自動的にレイアウトされる仕組みです。

flexboxとは

CSSのflex boxをご存じの方は読み飛ばしていただいて問題ありません。

flexboxとは、flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成されています。

以下のようなboxがそれぞれ存在した場合、左詰めにしたり、親boxの中で均等の幅にしたり、子要素の幅に合わせて親要素の幅を狭めたり、といった指定が簡単にできます。

もとの配置

左詰め配置

均等幅の配置

親要素を子要素に合わせる

これらは横位置だけでなく、縦位置に対しても可能です。

上に詰める、上下に配置し要素間に余白を持たせる、縦位置中央に配置する、などの例です。

また、子要素の横幅合計が親要素をはみ出した場合、自動的に折り返すことができます（設定によっては折り返しを禁止することもできますが、bubbleでは基本的に折り返しが適用されます）。

子要素がすべて横幅100pxで固定、親要素の横幅の最大値が300pxだったとします。子要素が4つ存在するので、子要素の横幅合計は400pxとなり、親要素の横幅を超えています。この場合、4つめの子要素は自動的に次の行に折り返されます。

この性質を利用して、PCなど横幅が広いデバイスでは要素を横並びに、スマートフォンなど横幅が狭いデバイスでは要素を縦並びにすることができます。ウェブサイトのグローバルナビゲーション（メニュー）でよく利用されています。

エレメントのレスポンシブの設定

bubbleでは、エレメントそれぞれに対し、最小値と最大値を設定することで自動的に横幅が決定することができます。

下記のShape Aの例で見てみましょう。

Shape AのLayoutタブで「Make this element fixed-width」のチェックを外します。（事前に親のgroupをLayoutを”fixedから””Row”に設定しておく必要があります。”Row”や”column”についてのこの後の章で説明していきます。）

チェックを外すことでエレメントの最大・最小の幅と最大・最小の高さを設定できるようになります。

Minimum width、Maximum widthで、親Groupに対する%もしくはpxで最大・最小幅を指定します。

「Make this element fixed-height」のチェックを外すことで、高さについても同様に設定可能です。

この後の章でこの設定しながらエレメントを配置していくので、実際に触って覚えていきましょう。

＊本章は各セクションが長いため、ページを分割しています。ご覧になりたいセクションをクリックしてください。