Bubbleで作るサービス、アプリ、ホームページの仕様、設計が固まったら実際にBubbleに構築していきましょう。「CREATE A NEW APP」をクリックし、アプリ名を決めます。以下に各タブの機能を簡単にまとめています。
- Design（デザイン）タブ
- Workflow（ワークフロー）タブ
- Date（データ）タブ
- Style（スタイル）タブ
- Plugin（プラグイン）タブ
- Settings（セッティング）タブ
- Logs（ログ）タブ
- まとめ
- 具体的なアプリの作成方法
Design（デザイン）タブ
まずデザインタブで真っ白なキャンバスを開き、そこにビジュアルエレメントをドラッグ・アンド・ドロップしてウェブページを作っていきます。エレメントはどこにでも置くことができて、マップ、テキストボックス、画像などはリサイズできます。プレビューボタンをクリックすれば制作中のページをいつでも見ることができます。
UI Builder / Responsive タブ
UI を作成するのが UI Builder タブで行います。 Responsive タブをクリックすると、Responsive デザインがスマホやタブレット、PC などで表示される画面を確認することができます
Element tree
画面上の Element のツリー構造を確認することができます。
Visual Elements
基本的な要素がこちらにあります。
- Text：文字
- Button：ボタン
- Icon：アイコン
- Link：リンク
- Image：画像
- Shape：長方形
- Alert：アラート
- Video：動画（Youtube または Vimeo）
- HTML：HTML
- Map：地図
- Built on Bubble：バブルで作られているというバナー（基本的には使わない）
Containers
コンテナです。要素をまとめたりするときに使います。
- Group：汎用的に使うグループ
- Repeating Group：繰り返し使うグループ
- Popup：画面上にポップアップさせるグループ
- Floating Group：スクロールせずに一定の位置に止まるグループ
- Group Focus：フォーカスが当たっている時だけ表示されるグループ
【参考記事】 Bubble の Repeating Group の使い分け - ノーコード ラボ
Input forms
入力させるフォームの要素です。
- Input：文字入力
- Multiline Input：複数行に渡る文字入力
- Checkbox：チェックボックス
- Dropdown：ドロップダウンボックス
- Search Box：検索窓
- Radio Buttons：ラジオボタン
- Slider Input：スライダー
- Date/Time Picker：日付や時刻の入力
- Picture Uploader：画像ファイルのアップロード（画像のみ）
- File Uploader：ファイルのアップロード（なんでもOK）
Reusable elements
何度も使う要素をまとめておく場所です。
- Footer：フッター
- Header：ヘッダー
- Signup / Login Popup：サインアップ/ログインのポップアップ
デフォルトで上の３つがありますが、基本的には自分で作った Reusable element をここから選択するようになります。
Element templates
要素のテンプレートです。
- Tab Element：タブを使ったエレメント切り替えができるテンプレート
- Signup Login form：サインアップ/ログインのフォームテンプレート
Workflow（ワークフロー）タブ
Workflow タブではサイトの背景にあるロジックを作ることができます。具体的には、画面を表示した時の処理、ボタンをクリックした時の処理、データベースが更新された時の処理などを設定することができます。 ブロックを加えて時間軸に沿ってアクションを作っていきます。各ブロックには条件を設定できます。
Date（データ）タブ
Data タブでは、データベース操作をすることができます。データベースって何？という方は Excel とかの表データを作れると思ってみてください。 デフォルトでは User テーブルのみが作られています。
Data types タブ
Data types タブではテーブルを作り、各列のデザインをすることができます。
Privacy タブ
Privacy タブではテーブルへのアクセス権を設定できます。
App data タブ
テーブル内のデータを作成・編集・削除することができます。
Bulk でのデータのインポート・エクスポートもできますが、こちらは有料プランに入る必要があります。
File manager タブ
Uploader などでアップされた画像などのファイルは、AWS の S3 上のバケットに保存されるのですが、そのファイルを管理するためのタブです。 不要なファイルなどをアップしてしまった場合はこちらから削除できます。
Style（スタイル）タブ
デザインテーマを選択したり、ボタンや文字などの色や大きさ、動きなどをまとめて設定できるようになっています。
Plugin（プラグイン）タブ
Bubble の豊富なプラグインをここから選択して、自分のアプリに組み込むことができます。 なお、プラグインはユーザーが作って、マーケットプレイスなどで販売することも可能です。 有料のプラグインを組み込む場合は、有料プランに入る必要があります。
Settings（セッティング）タブ
アプリの細かい設定をすることができます。
App plan タブ
Plan を変更することができます。
General タブ
- Privacy & Security：セキュリティの設定ができます。アクセス権やパスワードポリシー、２段階認証などの設定が可能です。
- General appearance：ファビコンやプログレスバーの色などの設定ができます
- General services API Keys：Google Geocode、および Google Map の API key を設定できます。
- iOS appearance：iOS デバイスの場合の設定です。各機種でのアイコンの設定などができます。
- Custom fonts：自分で使いたいフォントを追加することができます。
- Color palette：よく使う色を７つまで登録しておくことができます。
- App file management：使っていないプロパティなどを削除してアプリケーションのパフォーマンスを向上させます。
Domain / email タブ
- Domain setting：有料プランのみですが、独自のドメイン名を指定できます。ここから Google にアクセスしてドメインを購入することも可能です。
- Email settings：独自のドメインを指定した場合のみですが、メールアドレスを設定することができます。
- SSL encryption（HTTPS）：独自のドメインを指定した後、HTTPS に対応させます。
Languages タブ
- General setting：言語を選択します。現在は日本語（japanese(ja_jp)）も選択可能です。
- Application texts & messages：エラーや警告などのメッセージです。日本語でも表示はされているのですが、あまりいい訳ではありません。。。
SEO / metatags タブ
- Facebook & Twitter：タイトルや、サイトの名前、詳細、サムネイルなどを設定できます。
- SEO settings：テキスト要素のタグのタイプを公開したり、robots.txt をカスタマイズしたり、サイトマップファイルを公開することができます。
- Advanced settings：Header や Body に Metaタグを入れたり、Script を入れることができます。
- 301 Redirections：他のプラットフォームから移行するときに使用します。
- Hosting files in the root directory：ドメインの所有権を証明したり、モバイルで特定の機能を有効にしたりするのに利用します。
API タブ
- Public API endpoints：外部のシステムと API 連携をするときに設定します。
- 3rd Party OAuth / SAML Access：OAuth や SAML での認証を利用するときに設定します。
- Discourse SSO：Discourse を使って SSO を利用するときに設定します。
Collaboration タブ
誰かと一緒にアプリを作る場合に設定します。
Sub apps タブ
親子アプリ（親のアプリを更新すると子のアプリも自動的に更新されるような関係）を管理する場合に設定します。
Version タブ
Bubble Engine が更新されると、ここから最新にしてと言われるので、Bubble Engine を更新します。
Logs（ログ）タブ
各種ログを確認できます。
Capacity タブ
サーバの稼働率などを確認できます。
Server logs タブ
ワークフローのログを確認できます。
Scheduler タブ
スケジュールされたワークフローのログを確認できます。
まとめ
よく使うのは、Design、Workflow、Data だと思いますが、まずは一通り、Bubble エディターの説明をしました。
具体的なアプリの作成方法は下のとおりです。
具体的なアプリの作成方法
当サイトでは、具体的なアプリの作成方法を解説しています。
Bubble でご自分でアプリを作る際の参考にしてみてください。
