最新情報

【体験記】ノーコードの代名詞Bubbleは、じっくり作りこめる「本格派」だった!

はじめに

話題のノーコードツールを特集するブログ記事の第4弾をお届けします。今まで「AppSheet」「HoneyCode」そして「Adalo」を取り上げてきましたが、今回触ってみた「Bubble」はそれらよりも有名なツールかもしれません。歴史も比較的長く、ノーコードの老舗といえる存在です。Bubbleのトップページには「FacebookやAirbnbのようなサイトも作れる」と書いてあって、かなり完成度が高いWebアプリを作成できそうな印象です。まずはBubbleの概要と特徴から紹介していくことにしましょう。

Bubbleの概要

Bubbleはノーコードで汎用的なWebアプリ(※1)を開発できるサービスで、2012年ニューヨークで誕生しました。アカウントを登録すればアプリの作成からリリースまでブラウザのみで作業でき、サーバーやデータベースといった開発環境の準備は一切不要です。2019年には約7億円の資金調達を実施、全世界で25万人以上のユーザーがBubbleを利用しているといわれています(※2)。

利用者が多いだけにBubbleを取り巻くコミュニティも巨大で、サードパーティー製も含め様々なテンプレートが約400種、プラグインが1000種以上も用意されています。なお開発ツール、サポートなどの対応言語は2021年3月現在、英語のみとなっています。

料金プラン

Bubbleの料金プランは、下表のように4段階に分かれています。無料プランでもアプリを作成して動作させることは可能ですが、「本番リリース」はできません。あくまでも「テスト環境」でのリリースという扱いで、アプリのURLの後ろに「/version-test」という文字列が付きます。ほかにも「API連携」「独自ドメイン」「SSL」なども有料ではないと使えない機能です。また、上位の有料プランでは複数人での同時開発もサポートする内容となっています。

プラン 料金 主な特徴
Free 無料 アプリの作成~テストリリースが可能
Personal 年会員$25/月
or
月会員$29/月
本番リリース可能、API連携、独自ドメイン、SSL、スケジュールされたワークフローが使用可能、CSVインポート/エクスポート、ログ出力、Emailでのサポートなど
Professional 年会員$115/月
or
月会員$129/月
2人同時開発可能、サーバー容量3倍など
Production 年会員$475/月
or
月会員$529/月
15人同時開発、サーバー容量10倍など

Bubbleを触ってみて分かった特徴

アカウントを登録し、フリープランで早速Bubbleを使い始めてみました。そこで分かったBubbleというツールの特徴を端的にまとめていきます。

・自由度や拡張性が高く、細かい設定が可能

洋服のオーダーメイドで例えると、今まで取り上げてきたノーコードツール(PlatioやAdaloなど)が「セミオーダー」だとするならば、Bubbleは「フルオーダー」です。ノーコードツールはパーツを選んで組み合わせることでアプリを作っていきますが、Bubbleの場合はパーツごとに形状、素材、色などすべて選べるほど細かく自由な設定ができます。

・パソコンからスマホまで対応

Bubbleはモバイルアプリを作るツールではないので、画面が小さいスマホなどでアプリを起動したときに、表示がどうなるのか、ちゃんと動くのかという懸念がありました。しかしレスポンシブ・ウェブ・デザインに対応しているので、意識しなくてもアプリのデザインが画面サイズに合わせて自動で伸縮します。パソコンとモバイル両方のWebブラウザにフィットしたWebアプリを作ることができるというわけです。ただし、センスよく画面を構築するためには細かく配置を工夫することが求められます。

・エコシステムが発達している

まるでちょっとした開発言語のように、様々な業者、開発者によってBubbleを中核としたコミュニティが形成されています。世界中のデベロッパーが作ったテンプレートやAPIがマーケットプレースで取引されているほか、Bubbleでのアプリ開発を依頼・相談できるエージェントやコンサルタントも探すことができます。また、ユーザー同士で情報を交換しあうフォーラムも盛況です。英語が得意であれば、そういったリソースを豊富に活用することができるでしょう。

Bubbleのフォーラム画面

簡単なアプリを作ってみた

実際にBubbleでアプリを作ってみた記録を簡単に紹介していきます。今回はPlatioでもお馴染みの、シンプルな「営業日報登録アプリ」を作ってみることにしました。

画面の構成は以下の通りです。

Bubbleを最初に起動すると自動的にチュートリアルが始まり、それが連続12回も続きます。最後まで見なくても大丈夫だろうと思って2回でキャンセルし新規アプリの作成に取り掛かったのですが、見事に「撃沈」してしまいました。

中途半端に覚えた状態では、何をどうしたらよいか分からず、まるで歯が立ちません。計12コースあるチュートリアルを体験後、ネットの記事でも勉強し、操作の基礎を抑えてから再挑戦となりました。筆者はエンジニアとしてコードを書いていた経験もあり、正直Adaloはじめ他のツールは割と大雑把な予習だけで充分アプリが作れたのですが、Bubbleは少しレベルが違うようです。

Bubbleのアプリ作成手順は、AppSheetやHoneycodeのようにまずスプレッドシートありきではなく、AdaloやPlatioと同様、画面デザインに応じてデータベースができていくタイプとなります。

パーツ(エレメントという)をドラッグ&ドロップして画面をデザインしていく、という操作は直感的で分かりやすいですが、自由度が高いためデザインが自動で揃ってくれません。デザイン画面は横長のPCサイズなので、これをスマホ対応にしたときもフィットさせるように配置するのはピクセル単位での調整になり、難しいです。(結局筆者は未だにキッチリしたパーツ配置ができません)

PCサイズのデザイン画面
スマホサイズのデザイン画面
PCサイズのデザイン画面(左)とスマホサイズのデザイン画面(右)

各エレメントをダブルクリックするとワークフローという機能が設定できます。このワークフローがBubbleの肝で、ここに条件設定やアクションを定義していくことで、画面遷移やデータベースへの値の出し入れが実行され、アプリ全体の動作が生まれていくことになります。ワークフローを設定しないとただの静的なWebページとなります。

ワークフロー設定画面

最初はややとっつきにくかったものの、それでも触っていくとすぐに慣れるのは流石ノーコードといえるでしょう。Bubbleは自由に細かい設定ができますので、エラーメッセージのカスタマイズや、ポップアップのアクションなど、他のノーコードツールでは難しい実装も形にすることが可能です。直感で即座に実現するというわけにはいかず、ヘルプの参照もしくは多少の勉強が必要でしたが、動いたときには結構な達成感がありました。

Webアプリのメイン画面にポップアップを出現させ、チーム全体の当日の営業実績を集計して表示させるようにしたほか、提出の際に実績が0件だとアラートを出すようにしたり、日報を編集する際に確認画面を挟むようにしたりと、色々設定を盛り込んでみました。日本語のWebサイトにヒントが出ていたものは軽く勉強して実装させることができましたが、なかにはどうしてもうまく動かず、英語のフォーラムの過去の投稿を漁って解決に漕ぎつけたものもありました。

作成した日報登録アプリ

トップ画面(PC)

トップ画面(PC)

ポップアップ画面(PC)

ポップアップ画面(PC)

トップ画面(スマホ)

トップ画面(スマホ)

入力画面(スマホ)

入力画面(スマホ)

Platioとの比較

Bubbleの機能、特徴をPlatioと比べてみます。今まで紹介してきただけでもかなり違いがお分かりいただけたと思いますが、改めて3つの視点からまとめました。

1.【作成できるアプリの性質の違い】

Bubble Webアプリ
・パソコンでもモバイルでもアプリが動く
・一画面に情報が沢山表示され、機能を沢山持たせることができる
・WebブラウザでURLをブックマークして使える
Platio モバイルアプリ(ネイティブアプリ)
・通知設定やGPSなどモバイルならではの機能を活かせる
・モバイルで扱いやすいシンプルな画面デザインになる
・オフライン使用可能

BubbleはWebブラウザで動作するWebアプリなのに対してPlatioはストアからインストールして動作するモバイルアプリ(ネイティブアプリ)なので、このような違いがあります。

2.【アプリ作成/メンテナンス難易度の違い】

Bubble やや難だがこだわって作り込みやすい
・自由度が高く設定を細く行える
・アプリ作成に費やす時間は長くなるが、作りこめばkintoneやSalesforceのような多機能のポータルまで作れる
・操作や仕様を学ぶための学習コストが高い
・他人が作りこんだアプリはメンテナンスが大変になることも
Platio 易しいが作り込める範囲には限りがある
・初心者でも簡単かつスピーディーにアプリが仕上がる
・直感的で操作も覚えやすいため、学習コストも低い
・画面レイアウトや複雑な条件設定に限りがある
・他人が作成したアプリでもメンテナンスし易い

参考まで、Platioでテンプレートを利用せずブランクのプレートから日報アプリを作ったところ、2時間弱で完成しました。対してBubbleの場合は2日間を要しました。Platioは現場担当者などアプリを作ったことがない初心者でも独自アプリを「3日で作れる」ことが特長ですが、Bubbleの場合は、そうはいかないでしょう。

3.【拡張性、テンプレートの違い】

Bubble ・テンプレートも多数用意されているが、作りこまれたものが多いため、上級者でないとカスタマイズは難しい
・Googleと連携するAPIなど拡張プラグインが豊富
Platio ・現場業務にすぐに使え、初心者でもカスタマイズが容易なテンプレートが100種以上ある
・IoTセンサー、モバイルプリンター連携などモバイルならではの拡張性があり、WebhookやAPIも用意されている

どちらもテンプレートは充実しています。ただしPlatioのテンプレートと違い、Bubbleのテンプレートはサードパーティーの企業や個人が「完成品」として販売しているものが多いため、設計の解析や仕様変更が難しい印象でした。カスタマイズを念頭に置くよりも、なるべく自社でやりたいことと100%マッチするテンプレートを探して、それをそのまま使ってしまう方がよいと思います。

Templates
Bubbleのテンプレート一覧

まとめ

今回の記事では、ノーコードツールのBubbleを紹介してまいりました。Bubbleは作り込もうとすればどこまでもできる奥深さがありました。Bubbleでの開発を生業としているエンジニアがいるのも頷けます。
Platioのようなノーコードツールは、一つ一つのアプリに軽めでシンプルな機能を持たせ、現場の特定の仕事をサクッと効率化するのが効果的でした。対してBubbleは、もっと複合的で総合的、ポータルサイトのようなWebアプリの構築に向いているでしょう。
ITの専門家ではない現場担当者が扱うとしたら簡単ではないと思うので、学習にじっくりと時間をかけてからチャレンジしてみることをオススメします。

関連キーワード :
   

新着記事

   

あなたの業務を 日でアプリに

まずは触ってみよう。今すぐPlatioを体感!

サービス詳細や効率化課題など
お気軽に相談できます

オンライン相談