Bubble.io 無料アカウント作成とタスク管理アプリ入門 (2024)

Bubble.ioへのアクセスと無料アカウント作成手順

Bubble の開発環境は Web ブラウザ上で完結します。まずは公式サイトにアクセスし、メール認証だけで利用できる無料プランのアカウントを取得しましょう。以下では、実際に画面を操作しながらアカウント作成までの流れを順を追って解説します。

1. ブラウザで https://bubble.io/ を開く
2. 右上の Sign up ボタンをクリックし、メールアドレスとパスワードを入力
3. 受信した認証メールに記載されたリンクをクリックしてアカウントを有効化
4. 初回ログイン時に表示されるチュートリアル画面で Skip を選択し、空のプロジェクトダッシュボードへ進む

無料プランの概要と注意点（執筆時点の情報）

無料プランは個人や学習目的で十分に利用できるよう設計されていますが、いくつかの制限があります。公式サイトの「Pricing」ページで最新情報を必ず確認してください。

• 作成可能なアプリ数：1 アプリ
• 月間リクエスト上限：約 2,000 回（2024 年 3 月時点）
• データ保存容量：2 GB 程度

※ 上記数値は執筆時点の情報です。プラン内容は予告なく変更されることがあります。

有料プランにアップグレードすると、カスタムドメインや API ワークフローなどの高度な機能が利用可能になります。無料プランでも Preview 機能は制限なく使用できるので、まずはここで基本操作をマスターしましょう。

エディタ画面の基本構成と UI Builder の使い方

Bubble のエディタは左側に要素ツリー・プラグインメニュー・データベースビューが配置され、右側にプロパティパネルがあります。このセクションでは、画面全体の役割とドラッグ＆ドロップで UI を構築するコツを解説します。

エディタ左側パネルの役割

左側パネルは大きく 3 つの領域に分かれています。各領域の概要を把握すると、目的の操作がスムーズになります。

• 要素ツリー：ページ上に配置した UI コンポーネントの階層構造を表示し、選択・レイヤー操作が可能です。
• プラグインメニュー：外部サービスや高度な機能拡張用のプラグインを検索・追加できます（無料プランでも一部利用可）。
• データベースビュー：Data Types と Fields の設定画面へ直接遷移でき、ワークフローとの紐付けが容易です。

ドラッグ＆ドロップで要素を配置するコツ

UI Builder は直感的ですが、効率よくレイアウトを作成するためのポイントがあります。以下の手順は初心者でもすぐに実践できます。

1. グリッドラインを表示：エディタ右上の「Settings」→「Show grid」をオンにすると要素が自動的に整列しやすくなります。
2. コンテナ要素でグルーピング：ボタンや入力欄は「Group」内に入れると、サイズ変更やレスポンシブ設定を一括管理できます。
3. プロパティエディタで即時編集：右側のプロパティパネルにテキスト・色・プレースホルダーなどを入力すると、画面上にリアルタイムで反映されます。

参考動画：note の「【超入門①】ノーコード Bubble の始め方」ではエディタ全体の操作が動画付きで解説されています → https://note.com/ai_dev_lab/n/n7dbdd8a6400e

ページ作成とデザイン要素配置（タスク管理アプリ実装例）

ここからは具体的な TaskList ページを作りながら、タスク管理アプリに必要な UI を組み立てます。各手順は初心者でもすぐに試せるレベルです。

ボタン・入力フォームの配置

まずはタスク追加用のインプットとボタンを画面中央に配置します。以下の流れで要素を配置してください。

1. 左側パネルから Input コンポーネントをドラッグし、ページ中央に置く → プレースホルダーに「タスク名」を設定。
2. 同様に Button をドラッグし、ラベルを「Add Task」に変更。サイズは目安として 120 × 40 px が見やすいです。
3. ボタンのプロパティで Style を「Primary」に設定すると、デフォルトテーマ色が適用され視認性が向上します。

リピーティンググループでタスクリストを表示

保存されたタスクを一覧表示するために Repeating Group を利用します。設定手順は次の通りです。

1. 左側パネルから Repeating Group を選び、ページ下部に配置（列数 1、行数 5 が標準的）。
2. データソースに Search for Tasks（後述の Data Type）を指定し、表示項目として「Current cell's Task's title」をテキスト要素でバインド。
3. 各行に Checkbox を追加し、クリック時にタスクステータス更新用のワークフローへ接続します。

ワークフロー概念と主要トリガー設定方法

Bubble のロジックは視覚的な Workflow で構築されます。この章では、タスクの追加・完了操作を例に、基本的なトリガーとアクションの設定手順を示します。

クリック時にデータ保存するフロー

「Add Task」ボタンがクリックされたときに新しいレコードを作成する流れです。以下のステップでワークフローを組み立てます。

1. ボタンを選択し、右側プロパティの Start/Edit workflow をクリック。
2. 「Create a new thing」アクションを追加し、Type に Task、Fields には title = Input Task's value を設定。
3. 作成後に入力フィールドをクリアするため、同じワークフローに Reset data アクションを追記します。

チェックボックスでステータスを更新するフロー

リピーティンググループ内のチェックボックスが変更されたときにタスクの status フィールドを切り替える設定です。

1. チェックボックス要素の Start/Edit workflow を開く。トリガーは「When this Checkbox is checked」または「unchecked」。
2. 「Make changes to a thing」アクションで対象を Current cell's Task、変更内容は status = "completed"（未完了に戻す場合は "pending"）と設定します。

このように イベント → アクション の組み合わせだけで CRUD が完結するため、コードを書かずにロジックを構築できます。

データベース設計：Data Types と Fields の作り方

データ構造はアプリの土台です。タスク管理アプリに適した Task データタイプと必要なフィールドを定義する手順を解説します。

Task データタイプの定義手順

1. エディタ左側メニューの Data タブ → Data Types を開く。
2. 「Create a new type」ボタンで Task を追加し、以下のフィールドを作成する（各フィールドは必ずデータ型を選択）。

Option Set を使うとステータス値を固定でき、誤入力防止に有効です。

簡易 CRUD 実装例

• Create：先述のワークフローで Create a new thing を使用。
• Read：Repeating Group のデータソースに Search for Tasks、条件付きで status = "pending" などフィルタ可能。
• Update：チェックボックスのワークフローで Make changes to a thing を利用。
• Delete（オプション）：各行に「Delete」ボタンを配置し、Delete a thing アクションで対象タスクを削除。

プレビュー・デプロイ手順と無料プランの制限事項

作成したアプリは Preview で動作確認し、問題がなければ Deploy to Live で本番公開します。無料プランでも基本的なテストフローは同様です。

テスト環境での動作確認手順

1. エディタ右上の Preview ボタンをクリックすると、新しいタブで現在のデザインとワークフローが実行されます。
2. タスク追加・完了操作が期待通りに機能するか、ブラウザのコンソールでエラーメッセージが出ていないか確認します。

本番公開までのステップ

1. エディタ上部メニューの Deploy → Deploy to Live を選択。
2. デプロイ画面で「Current version」→「Live version」に切り替える旨を確認し、実行ボタンを押すだけです。
3. デプロイ完了後は、yourapp.bubbleapps.io 形式のサブドメインが自動的に有効になります。

無料プランの制限事項（再掲）

公式サイトの Pricing ページで最新情報を必ず確認してください。

初心者がハマりやすいポイントと回避策

Bubble はコード不要ですが、ロジック設計やデータ構造変更時に思わぬ壁にぶつかることがあります。ここではよくある落とし穴とその対処法をまとめます。

ロジック設計の落とし穴と改善策

• 条件分岐が多すぎてワークフローが複雑化
• 同一アクションは「Custom State」や「Only when」フィールドで絞り込み、フロー数を削減します。
• 非同期処理の認識不足
• データベース書き込み直後に別ワークフローが走ると未反映状態になることがあります。Do when data changes を利用して変更確定をトリガーにすると安全です。

データ構造変更時の影響範囲と対処法

• フィールド削除による参照エラー
• ワークフローや表示要素が対象フィールドを参照していると、デプロイ後に「Element not found」エラーが発生します。変更前に Search & Replace 機能で全参照箇所を確認し、新しいフィールドへマッピングしてください。

学習に役立つリソースと進め方

実務で Bubble を使いこなすには、公式ドキュメントとコミュニティが重要な情報源です。以下に信頼できるリソースをまとめました。

学習スケジュール例（1 週間プラン）

公式フォーラムや Discord サーバーは質問・成果共有の場として活発です。分からない点が出たら遠慮なく投稿しましょう。