目次-全章
第3章では、ページレイアウトを構築しながら各エレメントについての理解を深めていきます。
エレメントは、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つの役割があります。
- 視覚的な観点から要素を集約し、そのグループ内の全てのエレメントが一緒に移動します。
- グループにはデータを挿入でき、グループ内の要素は親グループのデータを参照できます。
Repeating Group
Repeating Group（繰り返しグループ）は、データベースなどからデータのリストを表示します。最初のセルを設計すると、残りのセルはその設計に従います。
一覧（ユーザー一覧、投稿一覧など）を表示する際に使用します。
Popup
Popupは、ワークフローで表示するまで、ユーザーに表示されません。Popupが表示されている場合、ウインドウ中央の固定位置に表示されます。Popupがウインドウの高さ/幅より大きい場合、ユーザーはスクロールして全体を表示できます。
Reusable elements
Reusable elementsは再利用可能なエレメントとして定義できます。
これは同じ要素を頻繁に再利用する場合に役立ちます。
例：ヘッダー、フッター
Floating Group
Floating Groupはページ上部に独立して表示させることができるグループです。
ページのスクロール位置やページ内のグループの表示に関係なく、エレメントを画面上の同じ場所に表示するために使用します。
例：ヘッダー、上にスクロールなどのボタン
Group Focus
Group Focusは、ユーザーがグループの外側をクリックすると自動的に非表示になるグループです。
別のエレメントを基準にして配置します。
ドロップダウンメニューで特に利用されます。
＊本章は各セクションが長いため、ページを分割しています。ご覧になりたいセクションをクリックしてください。
コメント