昨年にノーコードツールのトレンドレポートを作成した際に少し触ってから、ずっと触り倒してみたかったノーコードツールに「.bubble」というのがあります。これから何回かに分けて社内で利用できるツールを開発しながら、どんなことができるのかについて解説をしていきたいと思います。

第1回は.bubbleのサービス概要や基本的な構造、使い方について解説を行い、2回目以降で実際に開発をしていきその内容をブログで紹介をしていきます。

.bubbleとは

.bubbleとは一言でいうとノーコードでWEBアプリを開発することができるツールです。プログラムコードを直接書かずに、ブラウザの管理画面上でドラッグ＆ドロップをして、パラメータ等の設定値を入力することでアプリケーションを開発することができます。

また、UIのデザイン性、データベース、アプリケーションの動作のフローなどの自由度が非常に高く、複雑なアプリケーションも開発できるため、その分ノーコードツールの中では学習に時間がかかるとされていますが、ゼロからプログラミングして開発するための学習コストと比べると圧倒的に抑えられると言われています。

なお、料金については0円のFreeプランから、月額29ドルのStarterプラン、月額119ドルのGrowthプラン、月額349ドルのTeamプラン、Enterpriseプランの5つがあり、高プランになればなるほど複数人で開発ができたり、ストレージの容量の増加やセキュリティの強化、logの保存期間が長くなるようになっています。

普通に開発をするのであれば0円から始めることができ、いざ公開して利用し始めるにはStarterプラン以上が必要になります。

豊富なテンプレート

.bubbleではアプリのテンプレートが1415種類提供されております。（2023年12月6日時点）

テンプレートを利用すると、WEBアプリケーション上のテキストやデザインを修正するだけでWEBアプリをすぐにリリースすることができます。もちろんテンプレートをもとにカスタマイズ、拡張することでより高度なアプリケーションの開発が短時間で実施できます。

テンプレートには無料のものと有料のものがあり、Blog (ブログ)・CRM (顧客管理)・Dashboard (ダッシュボード)・Game (ゲーム)・Landing Page (ランディングページ)・Marketplace (マーケットプレイス)・Online Store (オンラインストア)・Portfolio (ポートフォリオ)・Social (ソーシャル)・Directory & Listings (ディレクトリー & リスティング)・Professional Services (プロフェッショナルサービス)・On-demand Services (オンデマンドサービス)・Project Management (プロジェクト管理)・Building Blocks (構築要素)・Other (その他)といったカテゴリから探すことができます。

.bubble の プラグイン

.bubbleのプラグインは全部で5289個あります。（2023年12月6日時点）

プラグインのタイプでAction・API・Background Service・Element・Event・Login Service・Storageの７つ、カテゴリがAnalytics・Artificial Intelligence (AI)・Blog・Compliance・Containers・Customer Support・Data (things)・Ecommerce・Email・Health & Fitness・Input Forms・Internationalization・Location・Media・Mobile・News・Payment・Productivity・Small Business・Social Network・Technical・Testing・Video・Visual Elements・Web Scrapingの25つ、Pricingで有料/無料、プラグインの提供が公式かサードパーティかにより絞り込み、簡単に開発中のアプリの環境にインストールができるようになっています。

カテゴリごとにどの様なプラグインがあるのか、プラグインの使い方については別の回で詳しく解説したいと思います。

.Bubbleの機能　～Design

DesignはWEBのUI画面を設計する機能です。    

①WEBデザインパーツ一覧
WEBデザインパーツ一覧には、WEBページ上に配置することができる様々なパーツが一覧されております。 パーツはテキストやボタン、リンク、アイコン、画像などWEB画面に必要な部品が一通りそろっています。

②WEBパーツ配置エリア
左側のWEBデザインWEBパーツの一覧から任意のパーツを選択して、このエリアにそのままドラッグ＆ドロップすることでパーツを好きな場所に配置することができます。

③WEBパーツ詳細設定
選択しているパーツの詳細を設定することができます。例えばテキストやボタンであればフォントやサイズ、またはCSSのStyleの指定、画像であればサイズや画像の装飾の設定が行えます。

.Bubbleの機能　～WorkFlow

WorkFlowはBubbleプラットフォーム上でウェブアプリケーションの挙動や機能を定義し、制御するための機能です。ここで設定することで、ユーザーがアプリケーション内で何を行うのか、データの処理の方法、次のアクションの実行条件などを決めることができます。

①フロー設定エリア
アプリケーションがどのような処理をするのかを定義するエリアです。ここで「何が起きたら：トリガー」「何をする：アクション」を決めます。

②アクション定義
このツールから一つ一つの処理に対して、アクションとトリガーを具体的に定義をすることができます。

.Bubbleの機能　～Data

Dataはアプリケーションの中で利用するデータの構造を定義するための機能です。例えばuserというTableを作成して、その中のFieldとしてE-mailアドレスや名前、性別、年齢などを定義してデータベースの構造を設計します。

①データ定義
新しくテーブルを追加したり、テーブルごとのフィールドを追加／編集することができます。またアプリの利用開始後に蓄積される様々なデータを確認することができます。

.Bubbleの機能　～Styles

Stylesは、Webアプリケーションのデザインなどの外観を編集するための機能です。いわゆるWebサイトのCSSの定義をすることができ、テキストやボタン、フォームなどの要素のStyleを定義することができます。

①CSS要素一覧
Webアプリケーションで定義されているCSSの要素が一覧されています。ここに新しいStyleの要素を追加したり、定義済みの要素を編集したりすることができます。

②CSS要素別定義
選択した要素のStyleの定義を個別に編集することができます。

第一回は、.bubbleのサービス概要や基本的な機能について解説を行いました。次回からはどのようなアプリケーションを開発しようとしているかを説明したあと、具体的にアプリケーションを開発していきたいと思います。