ノーコード情報満載!

  1. ノーコード
  2. 39 view

【Bubble】エディターの使い方|7つのタブの機能をわかりやすく解説

代表的なノーコード開発ツールであるBubble。シンプルなエディターを操作してWebアプリを開発していくことになります。操作は直感的ですが、開発の経験がない方にとっては少し難しく感じるかもしれません。ハードルとなりやすいのが、エディターに搭載されたタブです。こちらでは、Bubbleのエディターの基本的な特徴や、搭載されている7つのタブの機能について簡単にご説明します。

Bubbleのエディターとは

Bubbleのトップページ
画像:bubble.io

Bubbleは簡単な操作性と高い拡張性が評価されているノーコード開発ツールです。シンプルなエディターで Webアプリ を構築していきます。英語のみ対応となっているため英語が苦手な場合は操作に習熟するまで時間がかかりますが、インターネット上では日本語の役立つ資料も豊富です。

Bubbleのエディターには、以下の7つのタブが搭載されています。

  1. Design:デザインタブ
  2. Workflow:ワークフロータブ
  3. Data:データタブ
  4. Style:スタイルタブ
  5. Plugin:プラグインタブ
  6. Setting:セッティングタブ
  7. Logs:ログ

これら7つのタグを駆使してWebアプリを構築していきます。

Bubbleの7つのタブ

Bubbleに搭載された7つのタブの機能・使い方についてご紹介します。

Design:デザインタブ

Design:デザインタブは、アプリのユーザーインターフェース( UI )を作成するためのタブです。ビジュアルエレメント(要素)を配置できるほか、各エレメントはサイズなど外観を変更できます。エレメントはどこにでも配置可能です。

ビジュアルエレメントには以下のような種類があります。

  • Text:文字
  • Button:ボタン
  • Icon:アイコン
  • Link:リンク
  • Image:画像
  • Shape:長方形
  • Alert:アラート
  • Video:動画
  • HTMLHTML
  • Map:地図
  • Built on Bubble:Bubbleで作られるバナー

また、ツリー構造を確認できるElement tree、要素をまとめられるContainers、何度も使う要素をまとめておけるReusable elementsといった便利なタブを内包しています。

Workflow:ワークフロータブ

Worflow:ワークフロータブは、アプリ内の処理を設定するためのタブです。具体的には、画面内のボタン、テキスト、といった各要素をクリックした際の処理や、 データベース に変更が加えられた際の処理を設定します。各処理は、あらかじめ配置したエレメントに ドラッグ&ドロップ で設定していくためとても簡単です。一方で、各処理には条件を設定できるため、複雑な処理も実現できます。

Bubbleのなかでは、とりわけ使用することが多いタブです。Bubbleで開発を行ううえでは、このタブを使いこなす必要があります。

Data:データタブ

Data:データタブは、 データベース を管理するためのタブです。データベースとは、データを格納する場所を意味します。アプリ上で入力された情報を格納したり、あらかじめ格納しておいたデータをアプリで表示させたり、といった使い方ができます。

Style:スタイルタブ

Style:スタイルタブは、各要素の外観を変更できるタブです。文字色、フォント、サイズや背景色なども設定できます。

Plugin:プラグインタブ

Plugin:プラグインタブは、提供されている プラグイン をアプリに組み込めるタブです。無料のものから有料のものまで、Bubbleでは多くのプラグインが提供されています。Bubbleの無料プランでは、有料のプラグインを利用できません。

Setting:セッティングタブ

Setting:セッティングタブは、アプリの細かな設定を行うタブです。セキュリティ設定、ドメイン名の指定、言語の設定、などができます。

Logs:ログタブ

Logs:ログタブは、Bubbleでの活動状況を監視しているタブです。使用の履歴やプランの制限などが確認できます。

Bubbleのチュートリアル

Bubbleの公式ホームページでは、操作を一通り学べるチュートリアルレッスンが提供されています。今回ご紹介したタグの使い方についても網羅的に学習可能です。

対話形式の「Interactive Learning」は、全12のレッスンで構成されています。すべて英語のため、英語が理解できなければ完了するまでに時間がかかってしまうかもしれません。しかし、公式に提供している有益な教材のため、利用することをおすすめします。

Bubbleのエディターは難しい?

Bubbleは拡張性が高い反面、ノーコード開発ツールのなかでは比較的扱いが難しいといわれています。ツール自体が英語であるという最初のハードルのほか、一般的な Webサイト 作成の知識が必要です。エディターの操作については、今回ご紹介した各タブの機能をしっかりと身に付けることが大切です。本格的に Webアプリ を開発したい場合はチュートリアルレッスンなどを利用し、タブの使い方を覚えましょう。

まとめ

今回はBubbleのエディターや各タブの機能についてお話ししました。「ノーコード開発は簡単」というイメージでBubbleに触れた場合、思った以上に難しく感じる方が多いかもしれません。今回ご紹介した各タブの機能についてしっかりと理解すると、Bubbleの開発の上達が早まります。Webアプリ開発のスキルを身に付けたい場合は、ツールの機能など基本をしっかりと学ぶことが大切です。

ノーコードの最近記事

  1. Autifyの概要からテスト自動化への導入事例までを徹底解説

  2. Platioはノーコードで作成できる便利な業務アプリ!機能や特徴を解説

  3. UNIFINITYで業務効率アップ!使い方とメリットやデメリット

  4. WebアプリとWebシステムの開発に役立つ!FastAPPの概要

  5. STORESの使い方を解説!初心者でも分かる基本や応用のまとめ

関連記事

PAGE TOP