Contents
bubble.io アプリ 作り方 初心者向けステップバイステップガイド
bubble.ioを活用したWebアプリの開発は、プログラミング知識がなくても実現可能です。特にTODOアプリのようなシンプルな機能は、UI構築からAPI連携まで、段階的に学ぶのに最適です。本記事では、無料アカウント作成から公開までの6つのステップを解説します。キーワード「bubble.io アプリ 作り方 初心者」で検索している読者の疑問に応え、実践的な手順をわかりやすく提示します。
無料アカウントの作成方法
bubble.ioで開発を始めるには、無料アカウントの登録が最初のステップです。登録は簡単なメールアドレス入力だけで完了しますが、仕組みを理解しておくとスムーズに進められます。
このセクションでは、bubble.ioへのアクセス方法や確認手順をわかりやすく解説します。
メールアドレスで登録する手順
- bubble.io にアクセスし、「Start for free」ボタンをクリック
- メールアドレスとパスワードを入力し「Sign up」を選択
- 登録後、画面下部の「Check your email」リンクから確認メールを受け取る
フリープランでは、アプリ公開時にドメイン設定が必要になりますが、学習目的であれば問題ありません。
確認メールの受け取りと有効化
確認用リンクをクリックし、アカウントを有効化する手順です。
- メールに記載された確認用リンクをクリック
- クリック後、画面遷移してアカウントが有効化される
この時点で、プロジェクト作成やUI構築が可能になります。
ドラッグ＆ドロップでUIを構築する
bubble.ioの強みは「ドラッグ＆ドロップ」による直感的なUI構築です。PC画面のレイアウトからボタンの配置まで、操作が難しいと感じる部分はありません。
このセクションでは、UI作成時の基本操作や調整方法を解説します。
画面上部ツールバーの基本操作
- 左ペイン（要素選択）：テキストや画像などUIコンポーネントをドラッグ
- 中央（プレビュー）：配置したコンポーネントの表示確認
- 右ペイン（プロパティ編集）：色・フォントサイズなどの細かい設定
コンポーネントの配置とサイズ調整
以下のように、基本操作を確認してください。
- クリック＆ドラッグでコンポーネントを画面に置く
- 境界線をドラッグでサイズ変更
- 「Align」ツールで縦横中央寄せなど整列処理
| 項目 | 設定方法 | 補足 |
|---|---|---|
| テキスト追加 | 左ペインの「Text」をクリック | フォントサイズは右ペインで調整可 |
| ボタン配置 | 「Button」コンポーネントをドラッグ | クリック後の処理設定が必要 |
データベース設計とワークフロー設定
アプリの動作には「データベース」と「ワークフロー（自動処理）」が不可欠です。TODOアプリでは、「タスク」テーブルを作成し、入力時の処理を自動化します。
このセクションでは、データベースの設計と仕組みをわかりやすく説明します。
データテーブルの作成手順
- 左ペインの「Database」を選択
- 「+ New data type」から「タスク」という名前のテーブルを作成
-
以下のようなフィールドを追加する（例）：
-
タスク名（テキスト型）
- 完了フラグ（チェックボックス型）
- 期限日（日時型）
条件分岐による自動処理の設定
「ワークフロー」とは、特定の条件を満たしたときに自動で実行される処理のことです。
- 「Workflow」タブを開く
- 「When a task is created」を選択
- 「Send email」アクションに、宛先や本文を設定
ワークフローの条件分岐（例：期限日が過ぎたら警告）は、右ペインの「If」から追加可能です。
外部APIとの接続方法
bubble.ioではSlackやGoogle Calendarなどの外部サービスと連携できます。公式ドキュメントに基づいた安全な設定方法を解説します。
このセクションでは、外部APIとの連携方法をわかりやすくまとめています。
Slack連携の設定例
- 「Integrations」タブを開く
- 「Slack」を選択し、アプリ登録（OAuth認証が必要）
- ワークフローで「Send to Slack」アクションを追加
Slack接続では、チャンネル名や投稿メッセージのテンプレートを事前に設定します。
Google Calendar同期の基本
- 「Google Calendar」を選択し、認証コードを取得
- ワークフローで「Create event in Google Calendar」アクションに登録
-
以下の情報を指定（例）：
-
タイトル：タスク名
- 日時：期限日
外部APIとの連携は、公式ドキュメントの手順に従うことで安全かつ確実です。
モバイル最適化のポイント
bubble.ioで作成したアプリは、PCだけでなくモバイルでも快適に使用できるようにする必要があります。レスポンシブデザインを意識したUI調整がポイントです。
このセクションでは、モバイル対応時の具体的なチェック方法や設定を解説します。
レスポンシブデザインの確認方法
- 「Preview」タブで「Mobile view」を選択
- 画面サイズ変更時にコンポーネントの表示が崩れないか確認
| 状況 | 対応策 |
|---|---|
| テキストが折り返しすぎている | サイズ調整や行送り設定を変更 |
| ボタンが小さすぎる | タッチ領域を大きくする |
タッチ操作向けUI調整
- ボタンは30px以上にサイズを設定
- フォーム入力欄は横長で配置（縦長は指の移動がしにくい）
モバイル最適化は、実際のブラウザテストで確認するのが効果的です。
実際に動くTODOアプリの作成サンプル
これまでの手順を統合して、動作確認と公開方法を解説します。GitHubでの公開も簡単に可能です。
このセクションでは、完成したアプリの公開方法やチェックポイントをまとめています。
基本機能の完成チェックリスト
- [ ] タスクの追加・削除が可能
- [ ] 完了フラグでタスクの状態変更可
- [ ] モバイルでの表示確認済み
GitHubへの公開方法
- 「Deploy」タブを開く
- 「Publish to web」をクリックし、URLを取得
- GitHubにHTMLファイルとしてアップロード（※ bubble.ioのアプリは直接公開不可）
GitHubでは、bubble.ioで作成したURLをリンク形式で記録することで、コード無しでも公開できます。
- bubble.io アプリ 作り方 初心者向けに最適化された手順
- フリープランでも実践可能なUI構築とデータベース設計
- 外部API連携やモバイル最適化のポイントを網羅
無料アカウント登録後、記事で解説した手順に沿ってTODOアプリを作成してみましょう。完成品はGitHubで公開できます。