Bubble

Page content

Bubbleの公式サイトのアドレスはこちらです。

https://bubble.io/

https://bubble.io/pricing

Bubbleの具体的な操作方法は多岐にわたりますが、基本的な流れと主要なパネルについて説明します。

Bubbleの操作の基本的な流れ

  1. アカウント作成とログイン: まずBubbleのウェブサイトでアカウントを作成し、ログインします。
  2. 新しいアプリケーションの作成: ダッシュボードから「Create a new app」を選択し、アプリケーション名などを入力して新しいプロジェクトを開始します。
  3. デザイン（UI）の構築:
    • 左側の「Design」タブで、ページに表示する要素（テキスト、画像、ボタン、入力フォームなど）をドラッグ＆ドロップで配置します。
    • 各要素を選択し、右側のプロパティエディタでサイズ、位置、色、フォント、表示するテキストなどを調整します。
    • レスポンシブデザインを設定し、様々なデバイスでの表示に対応させます。
  4. データ（Database）の構築:
    • 左側の「Data」タブで、アプリケーションが扱うデータの種類（ユーザー、商品、投稿など）を定義します。これを「Data Type（データタイプ）」と呼びます。
    • 各Data Typeに対して、保存したい情報（名前、価格、内容など）を「Field（フィールド）」として追加します。
    • 実際にテストデータを作成して、データベースにデータが入ることを確認します。
  5. ロジック（Workflow）の作成:
    • 左側の「Workflow」タブで、ユーザーのアクションやイベントに応じてアプリケーションがどのような動作をするかを設定します。
    • 例：「ボタンがクリックされたら、入力フォームのデータをデータベースに保存し、次のページに移動する」といった一連の流れを視覚的に構築します。
    • 「Event（イベント）」（例：ボタンクリック）と「Action（アクション）」（例：データ作成、ページ遷移）を組み合わせて設定します。
  6. プレビューとテスト:
    • エディタ上部の「Preview」ボタンをクリックして、作成中のアプリケーションを実際に動かしてテストします。
    • 意図した通りに動作するか、デザインが崩れていないかなどを確認し、必要に応じて修正します。
  7. デプロイ（公開）:
    • テストが完了したら、「Deploy」ボタンからアプリケーションをインターネット上に公開します。これにより、他のユーザーがアクセスできるようになります。

主要なエディタパネルと機能

Bubbleのエディタは主に以下のパネルで構成されています。

  1. Elements Tree (要素ツリー) / Design (デザインタブ):
    • 現在のページに配置されているすべての要素がツリー状に表示されます。要素の階層構造や親子関係を確認できます。
    • 新しい要素（テキスト、画像、ボタン、入力フォーム、グループ、リピートグループなど）をページにドラッグ＆ドロップで配置します。
    • 配置した要素の視覚的なプロパティ（色、サイズ、フォント、背景など）を設定します。
  2. Workflow (ワークフロータブ):
    • アプリケーションのロジックを定義する場所です。
    • イベント（例：ボタンがクリックされた時、ページが読み込まれた時）と、それによって実行されるアクション（例：データを変更する、メールを送信する、ページを移動する）を視覚的に連結します。
    • 条件付きロジック（例：この条件が真の場合にのみ実行）も設定できます。
  3. Data (データタブ):
    • アプリケーションのデータベースを管理します。
    • Data Types: ユーザー、商品、記事など、アプリケーションで扱うデータの種類を定義します。
    • Fields: 各Data Typeに保存する情報（名前、価格、画像など）を定義します。
    • App Data: 実際にデータベースに保存されているデータを表示・編集できます。
    • Option Sets: 静的な選択肢（例：商品のカテゴリ、ユーザーのステータス）を定義できます。
    • Privacy: 各Data Typeへのアクセス権限を設定し、セキュリティを管理します。
  4. Styles (スタイルタブ):
    • アプリケーション全体のスタイルを一元管理します。
    • テキスト、ボタン、入力フォームなどの要素に共通のスタイルを設定し、デザインの一貫性を保ちます。
    • スタイルを変更すると、そのスタイルを使用しているすべての要素に自動的に適用されます。
  5. Plugins (プラグインタブ):
    • Bubbleの機能を拡張するためのプラグインをインストール・管理します。
    • 決済機能（Stripe）、地図表示（Google Maps）、SNS連携、ファイルアップロードなど、様々な機能を追加できます。
    • API Connectorプラグインを使えば、外部のAPIと連携してカスタム機能を実装することも可能です。
  6. Settings (設定タブ):
    • アプリケーションの全体的な設定を行います。
    • 言語設定、ドメイン設定、APIキー、SEO設定、バージョン管理などが含まれます。
  7. Logs (ログタブ):
    • アプリケーションの動作状況やエラーログを確認できます。デバッグ時に役立ちます。

これらのパネルを使いこなすことで、複雑なWebアプリケーションでもノーコードで開発できます。

Bubbleの公式サイトにはチュートリアルや豊富なドキュメントがあり、YouTubeなどにも多くの解説動画がありますので、実際に触りながら学習することをおすすめします。