Bubble を使ったアプリ開発の基本とTips

Bubble ノーコード

こんにちは！Insight Edge開発チームのkyです。今回は、今話題のノーコードツール「Bubble」を使ったアプリ開発での実装方法についてコツも交えてご紹介します。

Bubble とは？

  • コーディングが不要で、ドラッグ&ドロップでのWebアプリを開発可能とするツールである
  • ノーコードツールの中でトップクラスの人気がある
  • 2015 年にリリースされ、2022 年にはユーザー数 200 万人を超える
  • ノーコード/ローコード市場も今後成長が見込まれる
  • 開発フェーズにかかるコストをカットできる
  • 学習コストが低く、ITエンジニアの人材不足解消へつながる

Bubble でアプリ開発(基本の使い方)

◆ 入力

画面左にある「Design」→「Input forms」の中からInputやCheckboxなどの要素をドラッグ&ドロップで指定の表示位置に配置

◆ 出力

画面左にある「Design」→「Visual elements」の中からTextやLink、Buttonなどの要素をドラッグ&ドロップで指定の表示位置に配置

ポイント１：追加要素に名前をつけておくと要素検索ができるので、DB設定や要素を重ねる時など後の変更がスムーズになる

ポイント２：UIパーツのGroupを小さい単位で使っておくと後で変更が容易になる（詳細は「UIパーツのGroupを使うメリット」参照）

◆ DB

画面左にある「Data」→「Data types」より「New type（テーブルに相当）」「Create a new field（カラムに相当）」を作成

ポイント３：カラム名には日本語も使えるため、英語での命名に時間を使わずに作成ができる

◆ Workflow

Button押下時やページロード時などに実行したい処理を追加

Tips

◆ UI パーツの Group を使うメリット

UIパーツをそのまま使うことも可能だが、アプリ開発では入出力項目に対してラベル表示があったり、複数の要素で1つの単位となるケースが多いので、そういった場合の対応が容易になる。

  • UI管理（Group単位での移動や位置変更・調整、削除）が容易になる
  • レイアウト調整（Margin等をつけるなど）の影響範囲をGroup内のみに限定できる
  • ひとまとまりの単位として扱うことでモーダル表示などが可能になる

◆ ID を使ったログイン方法

Bubbleの仕様として「メールアドレス」と「Password」でしかログインできないが、下記の方法で「メールアドレスでない文字列」をID（ユーザー名）としてログインできる。

（参考）https://forum.bubble.io/t/can-i-use-username-as-text-field-instead-of-email/859/22

  • アカウントのメールアドレスに「ID」＋「@〇〇.△△」を設定
  • Workflow でのログイン処理にて、Email の部分に「入力された ID」＋「@〇〇.△△」と設定

◆ ログイン後の画面制御

Bubble上で新規作成したページは、閲覧制限等の制御が入っていないためURLさえわかれば誰でも閲覧可能なページとなっているが、下記の設定でログイン状態に応じた閲覧制限、遷移ができる。

※ Bubbleは、ログイン後ページに自動で閲覧制限を付けてくれない

  • ログイン状態でない時にログイン画面に遷移させる設定方法
    1. Workflowの「Page is Loaded」に「Go to page」を追加
    2. 「Go to page」の遷移先にログインページを指定
    3. 「Go to page」の「Only when」に「Current User is logged out」を追加

◆ 無駄な空白を作らずに UIパーツを配置する方法

DBに格納した値を表示したい場合など、位置の指定に座標を使用すると要素同士が重ならないように間隔を広く取る必要があるが、そうするとデータ数が少ない時に空白が多く、見た目が悪くなる問題が発生する。

無駄な空白を作らないように表示設定する方法として、「GroupのRow/Column」のいずれかを使用する。

内部のUIパーツの高さや幅に最低値を入れておくことで内容の増減に伴う表示域の変化に対応できる。 ※ 要素間の間隔も指定できる

  • GroupのLayout → Container → Row（内部のUIパーツが横に並ぶ）

  • GroupのLayout → Container → Column（内部のUIパーツが縦に並ぶ）

Bubble を使ってみた感想

初期リリースまで時間や予算が取れなかった方や今までアウトプットする前に挫折した方でもより多くのアウトプットを世に出していけるようになると感じました。

特に低コストでスピーディーにアプリを作りたい方、デザイナー、プログラミングを勉強前の方などに向くと思います。

※ ただし、手軽であり開発が容易な代わりに向かないと感じた点もあります。

◆ スクラッチ開発と比較して向くと感じた点

  • MVP開発で初期リリースまでの期間を短縮できる
    • 開発内容が少ないほどスクラッチ開発との開発スピードに差が出る
    • ユーザー画面等のシンプルな2〜3画面程度（ログインしてデータ閲覧程度）のアプリなら1〜2日くらいで作成可能、1画面なら最短数時間
    • ある程度作りたいものが決まっていたら、細かい要件に悩まず、まず作ってみる！が手軽にできる
  • 開発するアプリの内容（作りたいもの）だけに時間を使ってリリースできる
  • 初期リリースが早い分素早い改善につながる
  • 環境構築やデプロイ等の知識を必要としない
    • 最初に環境構築でつまづくことがない
    • インフラ代やメンテナンス等を気にする必要がない
    • リリース方法につまづくことがない
  • ソースコードを書かない
    • HTMLを知らなくても画面が作れる
    • スタイルの設定もCSSを使わずに設定である程度作成できる
    • 細かい構文ミスでつまづくことがない
    • 使わなくても十分作れるが、HTML, CSS, JavaScriptを使うこともできる
  • ネイティブアプリ(iOS,Androidアプリ)の開発ができる
    • Bubbleアプリをネイティブアプリに変換してくれるサードパーティ製のサービスがある（有償）
  • レスポンシブ対応、PWA開発ができる

◆ Bubble 開発で向かないと感じた点

  • 処理が複雑（条件が多い等）、規模が大きい（20〜30画面以上や大量のデータを扱う、機能要件が多い等）の場合

    • 2つテーブル結合し表示するだけでも表示に時間がかかるため、複雑なテーブル結合や大量のデータを扱う際は注意が必要そう
    • 最上位プランでもデータベース容量が最大50GBである
    • プログラムロジックの条件の分だけ同じような処理を設定することになり、作成時間が増加する

    • 機能が多い分アカウントの種類や処理、扱うデータの利用が複雑になり、ソースコードを書くよりも作成時間が増加する

      （シンプルな機能ほど、ノーコードの良さが発揮されると感じました。）

  • DB登録・更新回数やDB項目が多い場合

    • 登録・更新は別々に処理を設定するため、同じような設定処理を1から設定していくことになり設定数が多いと時間がかかる

      ※ あまり効率の良くない処理を設定している時は、ソースコードを書いたほうが早いと思うときもある