第3章では、ページレイアウトを構築しながら各エレメントについての理解を深めていきます。
エレメントは、3つのカテゴリに分類されます。
- 視覚的要素：通常ユーザーがクリックして情報を操作したときに、情報を表示し、ワークフローをトリガーするために使用されます。
- コンテナ：他の要素を含むエレメント。
- 入力：ユーザーが情報を入力するために使用するエレメント。いわゆる入力フォームです。
さまざまなエレメントが用意されていますので、順番に確認していきましょう。
監修者
竹村貴也
株式会社ファンリピートCEO
著書:「ChatGPTによるPythonプログラミング入門. AI駆動開発で実現する社内業務の自動化」
＼ ノーコード/ローコードやAI関連の情報をお届け ／
無料のBOLTメールマガジン
不定期でノーコード/ローコードやAI関連のお役立ち情報をお届けするメルマガです。
- ノーコード/ローコードの基礎・応用情報がわかる
- 個人利用やビジネスで生かせるAI活用方法がわかる
- 限定オファーや資料公開、ウェビナー情報がいち早く届く
ノーコード/ローコードを用いたシステム開発やAI利活用に興味がある方はぜひご登録ください！
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つの役割があります。
- 視覚的な観点から要素を集約し、そのグループ内の全てのエレメントが一緒に移動します。
- グループにはデータを挿入でき、グループ内の要素は親グループのデータを参照できます。
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」のチェックを外すことで、高さについても同様に設定可能です。
この後の章でこの設定しながらエレメントを配置していくので、実際に触って覚えていきましょう。
＊本章は各セクションが長いため、ページを分割しています。ご覧になりたいセクションをクリックしてください。
