ノーコード ラボ

No Code のツールやアプリについて紹介します

Bubble エディターの使い方まとめ

bubble blank start

Bubbleで作るサービス、アプリ、ホームページの仕様、設計が固まったら実際にBubbleに構築していきましょう。「CREATE A NEW APP」をクリックし、アプリ名を決めます。以下に各タブの機能を簡単にまとめています。


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:フォーカスが当たっている時だけ表示されるグループ

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:サインアップ/ログインのポップアップ

デフォルトで上の3つがありますが、基本的には自分で作った 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:セキュリティの設定ができます。アクセス権やパスワードポリシー、2段階認証などの設定が可能です。
  • General appearance:ファビコンやプログレスバーの色などの設定ができます
  • General services API Keys:Google Geocode、および Google Map の API key を設定できます。
  • iOS appearance:iOS デバイスの場合の設定です。各機種でのアイコンの設定などができます。
  • Custom fonts:自分で使いたいフォントを追加することができます。
  • Color palette:よく使う色を7つまで登録しておくことができます。
  • 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 でご自分でアプリを作る際の参考にしてみてください。


twitter のような簡単な SNS をBubble で作ってみる(入門者向け)


元号ジェネレーター


Bubble で作る「4択クイズアプリ」


Bubble で作る「フラッシュカード」