ノーコードで30分！Bubbleアプリ作成ガイド

2026年8月8日

Contents

1 はじめに：Bubbleでアプリ制作を始める前に
2 Bubbleアカウントの作成方法
- 2.1 アカウント登録の手順
3 ドラッグ＆ドロップで構築するUI設計
- 3.1 UI構築に関する比較表
- 3.2 要素の配置とスタイル設定
4 データベース構築の基本
- 4.1 データタイプとフィールド選定ガイド
- 4.2 レコード間の関係性設定
5 JavaScriptでカスタム機能を実装する
- 5.1 イベントハンドラの具体例
6 アプリの公開手順と無料プランの制限
- 6.1 テスト用URLの取得方法
- 6.2 本番環境へのデプロイ
7 まとめ

スポンサードリンク

はじめに：Bubbleでアプリ制作を始める前に

ノーコード開発ツールのBubbleは、プログラミング知識がなくてもWebアプリを作れる画期的なプラットフォームです。本記事では、「Bubble アプリ作り方初心者ガイド」として、無料プランの最新情報やカスタムドメイン対応など、今後の開発に役立つ情報を交えて解説します。特にテスト環境と本番環境の違いや、JavaScriptスクリプトの具体的な書き方などを視覚的に理解できるよう、具体例を交えたステップバイステップでまとめました。

Bubbleアカウントの作成方法

Bubbleでアプリを開発するにはまず、公式サイトからアカウントを作成する必要があります。無料プランでも十分な機能が使えるため、初心者向けに最適です。

アカウント登録の手順

以下の3ステップでアカウント作成が完了します：

公式サイト（https://bubble.is）へアクセスし、「Sign up」ボタンをクリック
メールアドレスとパスワードを入力して登録
登録メールを確認し、アカウントを有効化

無料プランの注意点：テスト環境では「bubble.is」ドメインが自動割り当てられますが、現在はカスタムドメインの追加も可能です。本番公開時にはサブドメイン（例：myapp.bubbleapps.io）を使用します。

ドラッグ＆ドロップで構築するUI設計

Bubbleの強みは、ビジュアルエディタによる直感的なUI構築です。画面レイアウトは「コンポーネント」をドラッグして配置するだけで完成しますが、効果的に使うには以下の点に注意が必要です。

UI構築に関する比較表

項目	無料プラン対応状況	有料プラン追加機能
カスタムドメイン	✅ 可能（テスト環境含む）	❌ 詳細なSSL設定など
コンポーネント数制限	⚠️ 1,000個以下	✅ 無制限
CSSカスタマイズ	⚠️ ライブラリ限定	✅ 完全自由な編集

要素の配置とスタイル設定

ドラッグ＆ドロップで要素を配置後、右クリック→「Edit」から編集可能
スタイルの変更は「Style」タブで色やフォントサイズを調整

コツ：画面遷移が必要な場合は、「Page」セクションから新規ページを作成し、リンク設定を行います。

データベース構築の基本

アプリに情報を保存するためには、データベース（データタイプ）を設計する必要があります。ユーザーレジストラーや投稿管理など、実際の用途に応じて構造を決めましょう。

データタイプとフィールド選定ガイド

用途	推奨データタイプ	補足
ユーザー名	テキスト	入力フォームに使用
投稿日時	日時（Date/Time）	自動更新可能
投稿者との関係	関係型フィールド（Relationship）	ユーザーIDと投稿データを結びつける

レコード間の関係性設定

複数のデータタイプが連携する場合は「Relationship（関係）」機能を使います。

「Data Types」画面で、2つのデータタイプを選択
「Create Relationship」をクリックし、参照元と参照先のフィールドを明示的に指定
関係性が設定されれば、投稿の作成者としてユーザー情報を自動取得できます

補足：関係性は「One to Many」「Many to One」など複数モードあり。カスタムIDでの紐付けも可能。

JavaScriptでカスタム機能を実装する

Bubbleでは必要に応じてJavaScriptスクリプトでカスタム処理を追加できますが、イベントハンドラの設定方法が具体的ではありませんでした。以下にクリック時のアラート表示とフォーム入力チェックを含む例を示します。

イベントハンドラの具体例

// ボタン押下時
function handleRegisterClick() {
  // フォーム入力チェック
  const name = document.getElementById('nameField').value;
  if (!name) {
    alert(&quot;名前を入力してください&quot;);
    return;
  }
  alert(&quot;登録が完了しました！&quot;);
}

// Bubbleでの設定手順：
1. 「Code」タブ → 「Functions」セクションへ
2. 上記スクリプトを貼り付け、保存
3. UIのボタン選択 → 「Actions」→ 「On Click」に「handleRegisterClick」を選択

// ボタン押下時

function handleRegisterClick() {

// フォーム入力チェック

const name = document.getElementById('nameField').value;

if (!name) {

alert("名前を入力してください");

return;

}

alert("登録が完了しました！");

}

// Bubbleでの設定手順：

1. 「Code」タブ → 「Functions」セクションへ

2. 上記スクリプトを貼り付け、保存

3. UIのボタン選択 → 「Actions」→ 「On Click」に「handleRegisterClick」を選択

注意：JavaScriptはオプションです。シンプルなアプリでは使わなくてもOKです。

アプリの公開手順と無料プランの制限

完成したアプリをテスト環境から本番環境にデプロイする手順と、無料プランの課題について説明します。

テスト用URLの取得方法

「Publish」タブから「Test your app」をクリック
自動生成されたURL（例：https://test.myapp.bubbleapps.io）で確認可能

無料プランの制限：テスト環境でも本番環境と同様に動作しますが、ドメインは「bubble.is」またはサブドメイン限定です。カスタムドメインを追加するには、アカウント設定 → ドメイン管理から申請が必要。

本番環境へのデプロイ

「Publish」タブから「Deploy to production」を選択
サブドメイン名を入力し、確認してデプロイ

無料プランの対策：

キャッシュ有効化（「Settings → Cache」で設定可能）
静的コンテンツは外部ホスティングに移行（例：CDN利用時）

まとめ

本記事では、Bubbleアプリの作り方を以下の手順で解説しました。

アカウント作成と無料プランの最新情報
ドラッグ＆ドロップによるUI構築とスタイル調整
データベース設計とレコード間の関係性設定
JavaScriptスクリプトでカスタム機能を追加
公開手順と無料プランの制限への対応

プログラミング知識がなくても、30分程度で簡単なアプリを作成可能です。 サンプルプロジェクトとして「投稿管理アプリ」などに挑戦してみてください。

スポンサードリンク