このページでは、Bubbleのメニューおよびエレメントの基本操作をサマって記載
①ツールメニュー
1.ツールバー（左）
Design
Appのデザイン変更、編集
Workflow
バックエンド。Appの裏側で機能するロジックを設定
例）ボタンをクリック>Googleの検索ページへ遷移する
Data
Appに登録したユーザー情報の管理、データベースの変更
Styles
テンプレート化、テンプレートの変更
Plug In
外部サービスへの接続
Setting
API設定、言語、ファビコン、など
デザイン～プラグインで設定できないものは、ここで設定する
Log
server稼働率、ワークフローのログ確認
ユーザーからの問い合わせに対し、発生時間と照らし合わせて「何がおこったのか？」を調べる
- ログの確認時間は、Bubbleのプランによって違う
- 無料プランは、過去一時間までしか遡れない
2.ツールバー（上部）
Bubbleロゴ
ホーム画面へ戻る
Page:index
ページ新規作成、ページ選択
Pick en element
ページ内の要素検索、選択
要素の名前は、要素自体のエディットで変更できる
Edit
選択している要素の複製、初期状態に戻す
Help
公式の動画、リンク
プレゼントアイコン
Bubbleバージョンリリース情報などのお知らせ確認ができる
矢印アイコン
カーソルを「要素を選択できる状態」に戻したいときに使用する
Grid&borders
画面にグリッドを表示、画面をZoomさせる
- ここで変更すると、「戻る」（左回りアイコン）で戻らないので注意
Arrange
要素の配置調整。中央配置、左寄せなど
左周りアイコン
戻る
Ctrl+Zと同じようなもの
右回りアイコン
進む
Ctrl+Yと同じようなもの
虫眼鏡アイコン
Bubble内におけるデザイン、ワークフローを探せる
Development
バージョン管理、リリース等を行う
3.エラー等の警告
Issue checker
App内で現在生じている問題を知らせるメニュー
上部ツールバー中央に表示される赤い部分「issues」
- クリックすると、問題の箇所とその詳細がモーダル表示される
- モーダルの見出しをクリック>修正するエディター項目が赤く表示される
4.バージョン管理
CreateSavePoint
どんなに手を加えても、「History」から任意の時点の保存状態にいつでも戻すことができる。Gitの管理に似ている
②エレメント
Bubbleのエレメントは、「HTMLのタグ」に置き換えてイメージをすると、そのエレメントの使いどころも掴みやすい
例）divタグ→Groupエレメント、pタグ→テキストエレメントに相当
ただし、すべてのエレメントがHTMLタグと完全一致した役割を持っているわけではない
あくまで「Bubbleになれるまで、すでに知っている何かに置き換えて理解する」までの一つの習得例としての温度感
1.Visual elements
新規ページ作成
Page:index＞Add&New Page で新規作成
- モーダル内の上段：作成するページ名
- 下段：複製してページを作成する場合に使用する「複製元ページの選択」
- 複製しない場合、下段は空白でOK
- デザインだけでなく、ワークフローも含めて複製される
プロパティエディタ
変更したいオブジェクトをダブルクリック＞エディターウィンドウが開く
- デザイン変更、設定等を行うときに使用する
- Unityのinspectorと役割が似ている
- Appearanceで見た目の設定をする
Text
文字の表示をおこなうエレメント
サイズはプロパティエディタ内またはStyleで調整する
Button
クリックを必要とする部分に使用するエレメント
サイズはプロパティエディタ内またはStyleで調整
Icon
通知メニュー、ハンバーガーアイコン等
この中にないデザインを使用する場合、任意のプラグインを使用する
Link
リンク先URLと表示されるテキストの変更、挿入
リンクが、App内or外部サイトか？をLink destinationで選択する
- このエレメントを使用すると、リンクページが新しいタブで開く
- TextやButtonのエレメントでもリンクは設定可能だが、この特徴はLinkエレメントだけ
Image
画像を扱うエレメント
Search for free imageでBubbleが連携している外部のサイトから無料画像を選択配置できる
Shape
図形を扱うエレメント
例）四角形の縦を3pxにして区切り線として使用する
- Background styleをimageにすると、Imageと同じ設定ができる
- この設定をした時、Imageエレメントから「画像が表示されない場合、色は何色で表示するか？」という設定を行うことができる
Alert
指定した時間だけ表示させることができるエレメント
「パスワードが間違っています」「ログインしました」などの表示したりするときに使用する
Video
「パスワードが間違っています」「ログインしました」などの表示したりするときに使用するエレメント
繰り返し再生動画や、ページをローディングしたら自動的に再生される動画を設定することも可能
HTML
マークアップをそのまま埋め込むときに使用するエレメント
Googleフォームなどの外部サービスなどを使用するときに活用できる
Map
地図を表示させるエレメント
地図の見栄え、スクロールできるか？等の編集も可能
Built on buble
Bubble公式リンクがついているロゴエレメント
公式サイトに遷移誘導させるためのアイコン。使用頻度は少ない
Install more
プラグインを表示させるボタン
Googleアイコンもここからインストール可能
2.Containers
Group
他のGroupのエレメントを設置できる
エレメントの親子関係をつくるときに使用する
- 他のエレメントをGroup内に配置するとどうなるか？
- 赤枠になる
- 親子関係が作成される
- 親エレメントの動き、状態を子エレメントは踏襲される
- 簡単にいうと、親の真似を子がする
- 親子関係の状態確認方法
- UIBuilderメニュー最上部にある、Elements treeで確認する
- VScodeと同じような階層表示になる
- UIBuilderメニュー最上部にある、Elements treeで確認する
Reperting Group
2つ以上のデータをリスト表示する時に使用する。使用頻度が高いGroup
通知の一覧、ツイートの一覧など、複数のデータを表示させたいときに作成する
- 使用にはデータとの連携が必要
Popup
CLKボタンを押したときに、強調して表示される
モーダルウィンドウ表示
BubbleでAppを作成する時にも、Popupが使用されている
- 使用例
- デフォルトで非表示>クリック、ローディングなどのイベント発生時に表示させるという条件設定をして切り替える
- Visual elementsだと、Alertのようにイベントが必要となるGroup
Floating Group
「画面スクロールをしても、固定位置に表示される」という設定ができる
header、Topへ戻るボタン、ツイートボタン等に使用することが多い
Group Focus
「お知らせアイコンをクリック＞アイコン下部にお知らせ内容表示」というように、指定したい表示位置を決定することができる
- お知らせアイコン「ベル」からの相対位置を指定＞ボタンCLKで表示させる
3.Input forms
ユーザーが情報を入力できるエレメント群
このエレメントは、"ワークフローの設定が無い"という状態では、エラーになるので、ワークフロー設定も忘れずに。
※ワークフローについては、「Bubbleのワークフローとデータベース」で展開しています
Input
ユーザー登録のメールアドレス、パスワードの入力フォームなどで使用する
画面にドラッグ>クリック>Inputエディターを開いて以下を最初に設定する
- placeholder:表示するテキストを設定
- Content format:入力する内容の形式を指定
Multiline Input
複数行入力できるフォーム
お問い合わせフォームの質問内容を入力欄など、長文の記述を行うInputに使用する
Chect Box
確認項目のチェックボックスで使用する
同意、規約確認などのチェック欄で使用することが多い
Dropdown
都道府県選択、職種選択などの複数選択肢の入力場面で使用する
あらかじめ作成した選択肢から情報を取得できるため、データの扱いが楽になる
- 画面にドラッグ>Dropdownエディター>Choicesで選択肢を設定する
- 選択肢の内容がデータベースによって変化する場合は以下の手順
- Choices style＞Dynamic choicesを選択
- ただし、この場合はデータベースの知識が必要
- Choices style＞Dynamic choicesを選択
- 都道府県一覧などは、下記のようなコピペで使用できるサイトを利用すると良い
Search Box
Inputと同じく、テキスト入力ができる。加えて、ユーザーが入力した内容と一致する内容がドロップダウンで表示させることができる
InputとDropdownを組み合わせた感じのGroup
- 使用例
- 住所検索の場合
- 画面にドラッグ>Search Boxエディター>Choices style＞Geographic placesを選択する
- 住所検索の場合
Radio Buttons
一つの選択肢のみを選択できるボタン
選択肢の少ない入力で使用する
- 使用例
- 同意する・同意しないの二択
Dropdownで設定すると、一度フォームをクリックする作業が必要であるが、Radio Buttonを使用すれば、選択肢を一目で確認できる。
つまり、ユーザーは余計な動作を一つ減らすことができるため、UX的にも有効
選択肢の内容に応じて、DropdounとRadio Buttonを使い分けることが大切
Slider Input
設定された範囲から数値を選択できるドラックスライダーを配置する時に使用する
- 使用例
- 人数によって、料金が変わる料金プランを確認できるようにしたい時
- 「ユーザーへの説明を目的」を必要とする箇所に適している
- ただし、細かい数値の設定には適していない
- 人数によって、料金が変わる料金プランを確認できるようにしたい時
Date/Time Picker
カレンダーから日付や時刻を選択する箇所で使用する
- 時刻は、デフォルトでは30分刻み
- 画面にドラッグ>Date/Time Pickerエディター
- Time interval:時刻の分刻みを変更できる
Picture Uploader
画像をアップロードする箇所に使用する
- 使用例
- アイコン変更、画像投稿、プロフィール写真
- 注意
- デフォルトでは、「リンクを知っている人」は全員閲覧できる設定になっている
- 閲覧制限の変更方法
- 画面にドラッグ>クリック>Picture uploaderエディター
- Make this file privateにチェックする
- 非公開設定に変更完了
File Uploader
ファイルをアップロードする箇所に使用する
- 使用例
- Word、Excelのファイル共有したいとき
Rich Text Editor
プラグイン。ユーザーが入力時のフォント種類やサイズを変更したりできる
4.Reusable elements
以下の設定ができるエレメントが用意されている
- ヘッダー
- フッター
- ユーザー登録、ログイン
構造は、Groupと同じ。他のエレメントを設置後、親子関係の作成可能
複数ページに設置したヘッダーを一括編集できる
通常のGroupで作成した場合、ページ毎にヘッダーを編集することになるため、作業効率が悪い
- 注意
- 編集画面のままではプレビュー表示はできない
- プレビュー確認したい場合は、プレビュー表示させたいページを選択>遷移してからプレビューさせる
③補足
エレメントの一括削除方法
ページ上で右クリック>メニューからSelect allを選択>全てのエレメント選択される>削除をクリック
