こんにちは！
ここ数年でよく耳にするようになった業務改善やDXですが、SaaSで取り組みたいと考えているバブラーの方は多いはず。実はBubbleにはSaaSにぴったりなSub app機能というものがあるのをご存知ですか？
今回は、BubbleでSaaSを構築するときに便利な「Sub app機能」と、プラグイン「App Connector」を使って2つのアプリを連携してデータを複製する方法をご紹介します。
最後にSaaSを1つのアプリで構築する場合とSub app機能で構築する場合の比較もまとめていますので、どうぞ最後までご覧下さい！
- Sub App機能とは
- Sub app機能を使ってみる
- データベースのデータを複製する方法
- App Connectorでアプリを連携する
- SaaSの作り方比較：Sub app VS 1つのメインアプリ
- 終わりに
Sub App機能とは
概要
BubbleのSub App機能は、1つの「メインアプリ」に対してメインアプリのコピーである「サブアプリ」を複数作成できる機能で、SaaSモデルのウェブアプリケーションを構築したいときに便利な機能です。メインアプリで開発を進め、サブアプリをクライアントに割り当てるという使い方が一般的です。
作成されたサブアプリに対しては「プッシュ」という更新機能を用いてメインアプリの変更を一括で適用させることができます（一部を除く）。メインアプリとサブアプリの関係は、メインアプリが親、サブアプリが子の親子関係と言えます。なお、サブアプリはそれぞれエディターを持つので個別に設定を加えることは可能ですが、その後のプッシュで個別の設定は上書きされます（詳細は「プッシュ」の項目で説明）。
メインアプリとすべてのサブアプリはそれぞれ独自のデータベースを持つので、メインアプリで作成されたデータはメインアプリのデータベースのみに、サブアプリ1で作成されたデータはサブアプリ1のデータベースのみに保存されます。クライアントごとに個別のデータベースが必要な場合に適しています。
サブスクプラン
Sub App機能が使えるのは月額$529のProductionプランです。Productionプランでメインアプリを作り、サブアプリそれぞれで必要なプランに加入するかたちになります。
例えば、Professionalプランの機能が必要な10個のサブアプリを作成した場合、10個それぞれでProfessionalプランに加入する必要があります。
なお、Producitonプランでは、プラン一覧の「Application editors」で規定の通り14個までサブアプリを作成できます（1メインアプリ・14サブアプリの合計15アプリが規定内）。14個以上作成する場合は個別での見積もりになります。
※なお、AgencyプランでSub app機能を使う場合、クライアントがサブアプリをエンドユーザーに提供開始する前にメインアプリでProductionプランに加入する必要があります。
プッシュ
プッシュは、すべてのサブアプリに対してメインアプリのすべての変更を一括で上書きする機能です。なお、以下は上書きできないようになっています。
- データベースの中身
…オプションセットおよびデータベースの構造（Type、Fieldなど）は上書きできますが、データは上書きできません。データはそれぞれのアプリで個別に保存されます。※メインアプリとサブアプリで同じデータを持たせる方法は「データベースのデータを複製する方法」の段落で紹介します。
- ドメイン
…ドメインは通常のアプリと同様、初期設定では「subappname.bubbleapps.io」になります。また、Personalプラン以上に加入することで個別に独自ドメインを持てるようになります。通常のアプリと同様、Settings > Domain/email から設定できます。
- プラグインキーとプラグインの課金
…有料のプラグインを利用している場合、それぞれのアプリで課金が必要です。
- ファビコン
上記以外はプッシュですべて上書きされます。
気をつけたいのが、上記以外がすべてのサブアプリに上書きされるということ。一部のサブアプリにのみ上書きしたりだとか、一部の機能やページのみを上書きするといったことはできません。
また、それぞれのサブアプリで個別にworkflowやデザインを追加しても、その後にプッシュをするとメインアプリにないものはすべて失われます。
サブアプリの数や上書き内容によって、プッシュの完了には数分かかる場合があります。
プッシュの方法は「プッシュの実行」で解説します。
Sub app機能を使ってみる
では、早速Sub app機能を使ってみましょう。
サブアプリの作成
まずは試しにサブアプリを作ってみましょう。
メインアプリでSettings > Sub appsタブを表示します。
「App name」という入力ボックスがありますので、そこに作成したいサブアプリの名前を入れて、右の「Create」ボタンをクリックすれば作成完了です。Createクリック前のメインアプリがサブアプリにコピーされています。
なお、ここで入力した名前はアプリ名およびBubbleドメインのサブドメイン（https://Subappname.bubbleapps.io/…）になりますのでご注意ください。Personalプラン以上に加入することで独自ドメインも設定可能です。
ちなみに、先ほど「データベースの中身はコピーできない」と記載しましたが、サブアプリの作成時のみ、「App name」の入力ボックス横の「Copy DB for creation」をチェックすることでデータベースの中身をコピーすることが可能です。もしサブアプリにも持たせたいデータがある場合は、サブアプリを作成する前にデータを作成しておきます。
作成したサブアプリは、サブアプリ名入力ボックスの上に一覧で表示されます。ここからサブアプリのエディターに移動したり（edit）、親子関係を解消したり（remove※1つのメインアプリとして独立する）できます。
メインアプリの編集
メインアプリのエディターで、サブアプリに上書きしたいようにアプリを編集していきます。
データベースについては、今回は以下のような構造とテスト用のデータを作成しました。
■データベース
・Type：Event
・Field：number（type: number）／title（type: text）
■テスト用データ（number／titleに対応）
①1／Halloween
②2／Christmas
次に、Eventデータを作成するページとworkflowを作ります。
「test1」というページを作成し、Inputエレメント2つ（number、title入力用）とButtonエレメント1つを配置します。
Inputエレメントはそれぞれ以下のように設定しました。
numberとtitleをEvent Typeに保存するworkflowを作成します。
■event「Button create is clicked」
■action①「Create a new thing」でEventデータを作成
・number = Input number's value
・title = Input title's value
■action②「Reset inputs」でInputボックスの入力をクリア
ここまで、アプリの作り方は通常の手順と変わりありません。
プッシュの実行
さて、メインアプリを編集しましたので、サブアプリに上書きしてみましょう！
Settings > Sub appsタブを表示すると、画面の右の方に「Push to sub applications」という部分があります。このなかの「Push to all sub apps」のボタンをクリックすると、すべてのサブアプリへの上書き処理が実行されます。ボタンをクリックしてみましょう。
プッシュ処理中は、「Push to all sub apps」のボタンが以下のように「Copying to sub apps ...」という表示に変わります。
「Push to all sub apps」に戻ったらプッシュの完了です。Settings > Sub appsのサブアプリ名右にある「edit」をクリック、または「My Apps」のページからサブアプリを選択してエディターページを開き、念のためプッシュが完了しているか確認します。
先ほどメインアプリで編集したEvent Typeの構造やtest1は上書きされていますが、Eventデータは上書きされていませんね。
データベースのデータを複製する方法
ここまでの説明通りプッシュではデータベースの中身は上書きされません。また、残念ながら現時点ではSub app機能ならではの簡単なデータベース複製方法もないようです。
ですが「どうしてもメインアプリとサブアプリで共通して持ちたいデータがある！」という場合もあると思います。次の段落では、そんなときに使える2つのアプリに同じデータを持たせる方法をご紹介します。
方法の整理
まずは使える方法をリストアップしてみます。
（1）CSVでExport+Import
一番オーソドックスな方法です。複製させたいデータを持つアプリのData > App dataから「Export」し、複製したいアプリのData > App dataから「Upload」します。 なお、作成済みのデータが対象となるのでリアルタイムで両アプリに同じデータを持たせたいという場合には適しない方法です。また、データ量が多いと処理に時間がかかる場合があります。
（2）iPaaSで連携してデータを複製
IntegromatやZapier、ParabolaなどのiPaaSを使ってデータを複製する方法です。この方法では作成済みのデータ複製もリアルタイムでのデータ複製も可能です。 なお、利用するiPaaSのプランによる処理件数の制限やデータ作成時に生じる時差を考慮する必要があります。また、サブアプリでAPIを利用できるプランに加入していることが前提となります。
（3）App Connectorでアプリを連携する
プラグイン「App Connector」を使って2つのアプリを連携する方法です。
App Connectorとは、2つのアプリを連携することで、あるアプリからもう1つのアプリのAPIやデータベースにアクセスできるようにするプラグインです。別のアプリでのworkflowの実行やOAthサインアップが可能になります。
この方法はさらに2つに分けることができます。
①連携するアプリにリアルタイムで同じデータを作成する
…Backend workflowを使い、アプリAでデータを作成したときにリアルタイムでアプリBでもデータを作成する方法です。Backend workflowの実行タイミングをMonthlyやDailyに設定することで、作成済みデータをまとめてメインアプリに複製することも可能です。なお、連携するBackend workflowはworkflow単位で設定できます。また、サブアプリがBackend workflowを実行できるプランに加入していることが前提となります。
①データベースを接続する
…アプリAのみが持つデータをアプリBでも参照できるようにする方法です。①とは違い、アプリBではデータを作成しません。データが保存されているデータベースはアプリAのデータベースだけなので、「データを複製する」方法ではありませんが、アプリAのデータをアプリBで参照したり変数として扱いたいときなどに有効な方法です。なお、接続するデータベースはType単位で設定できますが、プライバシールールの設定には注意が必要です。
上記を比較すると、（3）App Connectorでアプリを連携する方法が最も応用が利き活躍するシーンも多そうです。というわけで、次の段落では「App Connectorでアプリを連携する方法」をご紹介していきます。
App Connectorでアプリを連携する
「①連携するアプリにリアルタイムで同じデータを作成する」と「②データベースを接続する」方法をそれぞれご紹介します。
以降は「サブアプリの作成方法」で作成したサブアプリをベースにしています。
ケース①リアルタイムで同じデータを作成する
ケース①では、App Connectorを使ってサブアプリで作成したデータをメインアプリのデータベースにもリアルタイムで保存する方法を解説します。データはEvent Typeに作成します。
API連携の設定
まずはメインアプリのBackend workflowをAPIで呼び出せるように設定します。
メインアプリのSettings > APIで、「Enable Workflow API and backend workflows」をチェックしてオンにします。 これでBackend workflowを編集できるようになりました。
また、Event Typeのデータを作成できるようにしたいので、「Enable Data API」をチェックし、下に表示された「event」もチェックします。
Backend workflowの編集
次に、サブアプリから呼び出すBackend workflowを作成します。
メインアプリのエディター左上のページメニュー下部の「Backend workflows」をクリックします。Backend workflowの編集タブが開かれたら「New API workflow」をクリックして新しいWorkflowを作成します。
Workflowの名前や変数は以下のように設定します。
・name: create_event_by_sub
・parameter: ①Key: title/Type: text ②Key: number/Type: number
actionは、データを作成したいのでData > 「Create a thing」を選択して以下のように設定します。
これでBackend workflowの編集は完了です。
Backend workflow呼び出し設定
App Connectorでサブアプリからメインアプリの「create_event_by_sub」を呼び出す設定をします。本来この手順は呼び出したいアプリ側（今回のケースではサブアプリ）で行うものですが、プッシュでサブアプリに上書きされるのでメインアプリで行います。
メインアプリでPluginsタブを開き右上の「＋Add plugins」から「App Connector」を検索し、インストールします。
インストール後、「Installed Plugins」から「Bubble App Connector」を選択すると「Add a new Bubble app」というボタンがあるのでクリックします。 すると連携するアプリの設定項目が表示されます。
App Connectorは、アプリごとにAPIキーや連携するDB・Workflowの設定を行います。
今回はこの設定をサブアプリ側で行っているイメージで、「メインアプリのevent_create_by_subを呼び出す」ために以下のような設定をします。
■連携するアプリの設定
・App domain: メインアプリのドメイン（Bubbleドメインの場合はbubbleapps.ioまで）
・Match versions (Live vs Dev.): チェック
・App name: アプリ名（ドメインを入力すると自動で反映されます）
・Private key: メインアプリのPrivate key（Settings > API > API Tokens から「Generate a new API Tokens」で発行）
■接続するDB・呼び出すWorkflowの設定（installed calls以下）
DB・Workflowの設定をします。枠内下部にある「Refresh app metadata」と「Add an API call」をクリックすると、連携するDB・Workflowを追加する行が表示されます。一行につき1つのDB・Workflowを設定するかたちです。
今回は「create_event_by_sub」を追加したいので以下のように設定します。
・Name: Create_event_by_sub ※ここでは連携するDB・Workflowを選択します。Settingsタブで「Enable Data API」でチェックしたDBとすべてのBackend workflowがドロップダウンに表示されます。
・Use as: Action ※今回はWorkflowを呼び出して実行するのでActionになります。
・Authentication: API key ※実行の権限はAPI keyに基づき付与されます。
Nameのドロップダウンに連携したいDB・Workflowが表示されない場合や、これ以降Backend workflowの変数やactionを変更した場合は忘れずに「Refresh app metadata」をクリックして最新の情報を呼び出してください。
これでApp Connectorの設定は完了です。
データ作成Workflow設定
ここからは、サブアプリからデータを作成するWorkflowを作成します。
「Sub app機能を使ってみる」で作成したtest1を利用しましょう。
現在、test1のEventデータを作成するボタンがクリックされたときのWorkflowは、①Create a new event → ②Reset relevant inputsになっています。この2つの間に、Backend workflow「create_event_by_sub」を呼び出すactionを追加します。
ひとまずStep3にPlugins > 「Run メインアプリ名 create_event_sub」を追加します。このように、App Connectorで連携したBackend workflowの呼び出しactionはPluginsの項目から追加できます。actionの中身は「Run アプリ名 Backend workflow名」で表記されます。
actionを追加したら、詳細設定で「Backend workflowの編集」で作成したキー（titleとnumber）が表示されるのでそれぞれ値を設定します。今回はStep1の結果を利用して以下のように設定しました。
・title: Result of step 1(Create a new even...)'s title
・number: Result of step 1(Create a new even...)'s number
そしてStep3をドラッグ＆ドロップでStep2の位置に挿入します。
プッシュ
設定がすべて完了したので、ここまでの変更をプッシュでサブアプリに上書きします。Settings > Sub appsから「Push to all sub apps」をクリックしてプッシュします。
これで、サブアプリからメインアプリにリアルタイムでデータが複製できるようになりました。
動作確認
問題なくデータが作成されるか確認してみましょう。サブアプリのtest1ページをプレビューで開き、データを作成します。
データベースに保存されているか確認しましょう。まずはサブアプリのデータベースを確認します。以下のように保存されています。
メインアプリのデータベースも確認してみます。「Sub app機能を使ってみる」で作ったテスト用データの後にこちらにも保存されていますね。
直後に確認しましたが、大きな時差はなさそうです。
ケース②データベースを接続する
ケース②では、メインアプリとサブアプリのデータベースを接続し、メインアプリが持つデータをサブアプリで表示する方法を解説します。今回は、メインアプリのEvent Typeのデータをサブアプリのリピーティンググループで表示することを目標とします。
API連携設定
まずはメインアプリのData API連携をオンにします。
メインアプリのSettings > APIで、「Enable Data API」をチェックし、Event Typeのデータを参照したいので下に表示された「event」もチェックします。
データベース接続設定
App ConnectorでサブアプリからメインアプリのEvent Typeを参照できるようにします。
ケース①「Backend workflow呼び出し設定」と重複するので詳細は省きますが、以下のように設定します。
■連携するアプリの設定
・App domain: メインアプリのドメイン
・Match versions (Live vs Dev.): チェック
・App name: アプリ名
・Private key: メインアプリのPrivate key（Settings > API > API Tokens から「Generate a new API Tokens」で発行）
■接続するDBの設定（installed calls以下）
・Name: Event
・Use as: Data ※今回はデータベースを参照したいのでDataになります。
・Authentication: API key
Nameのドロップダウンに連携したいDB・Workflowが表示されない場合や、これ以降データベースの設定等を変更した場合は忘れずに「Refresh app metadata」をクリックしてください。
これでデータベース接続の設定は完了です。
リピーティンググループの設定
ケース②用にページ「test2」を作成し、リピーティンググループを配置します。
このリピーティンググループにメインアプリが持つEventデータを表示するようにしたいので、見出しにするTextエレメントを2つ（title、number表示用）と、データベースの値を表示するためのTextエレメントを2つリピーティンググループ上の適当な位置に配置します。
リピーティンググループのType of contentは「メインアプリ名 event」を選択します。先ほどデータベースを接続したので、ドロップダウンにメインアプリのEvent Typeが表示されるようになりました。
Data sourceは、まずドロップダウンから「Get data from an external API」を選択します。新しいポップアップが表示されたらAPI providerは「Get メインアプリ名 event」を選択し「Close」でポップアップを閉じ、最後に「Results」を選択します。Data sourceは最終的に「Get メインアプリ event's Results」となります。
numberとtitleの値は、Inesrt dynamic dataから「Current cell's メインアプリ名 event's number／title」とそれぞれ設定します。
これでリピーティンググループの設定も完了です。
プッシュ
設定がすべて完了したので、ここまでの変更をプッシュでサブアプリに上書きします。Settings > Sub appsから「Push to all sub apps」をクリックしてプッシュします。
動作確認
サブアプリでメインアプリのデータベースのデータを表示できるか確認します。
サブアプリのtest2ページをプレビューで開いて、リピーティンググループを確認します。
「Sub app機能を使ってみる」で作ったテスト用データと、ケース①でサブアプリから保存したデータが無事表示されましたね！
App Connectorでアプリを連携するまとめ
App Connectorはメインアプリ・サブアプリの関係にない2つ以上のアプリの連携にも利用できます。ぜひ色々なケースで応用してご活用ください！
SaaSの作り方比較：Sub app VS 1つのメインアプリ
ここまで、Sub app機能についてご紹介してきました。SaaSモデルのウェブアプリケーション構築にはとても便利な機能ですが、冒頭に記載の通り月額費用がお高めのProductionプランに加入しなければならなかったりプッシュ対象を自由に選択できないなど、場合によっては少し使いづらいところもあります。
SaaSモデルを構築したいならこんな不都合も我慢しなければならないのか…と思ってしまいますが、実はそんなことはありません。1つのメインアプリでも、クライアントに応じてサブドメインや独自ドメインを与えることでSaaSのように運用するという方法があります。
本段落では、1つのメインアプリでSaaSモデルを構築する方法と、Sub app機能でSaaSモデルを構築する方法を比較していきます。
比較ポイント①セキュリティ性
プッシュの項目でもご紹介した通り、Sub app機能で作成したすべてのサブアプリとメインアプリは完全に個別のデータベースを持ちます。そのため、基本的にはサブアプリAのユーザーがサブアプリBのユーザーデータにアクセスできてしまうといったデータ流出の心配はありません。
また、Bubbleでクライアントやユーザー単位で個別のデータベースを持たせる方法は現時点ではSub app機能しかありません。1つのメインアプリでもプライバシールールでデータへのアクセス権を制限できますが、設定ミスで上記のような流出が起こる可能性はゼロではありません。教育や金融など特にセキュリティを求める業界のSaaSはSub app機能での構築が向いているかもしれません。
比較ポイント②カスタマイズ性
SaaSモデルでは「クライアントやユーザーごとにデザインや機能を変えたい」ということはよくあるケースです。ですがSub app機能ではプッシュでサブアプリごとの設定が上書きされてしまうので、継続してプッシュでアップデートする場合はサブアプリ個別の設定を追加することはおすすめできません。共通のWorkflowやConditionalをうまく使って制御する必要があります。
クライアントごとのカスタマイズが重要になる場合はSub app機能は避けたほうが良いかもしれません。
比較ポイント③費用
メインアプリとの親子関係はありつつ、サブアプリは1つのアプリとみなされます。そのため、クライアントごとにサブアプリをつくる場合、クライアントの増加に合わせて開発者がBubbleに支払う費用も増加することになります。
例えば、10のクライアントに独自ドメインでProfessionalプランのサービスを提供する場合で比較すると
■1つのメインアプリ
・独自ドメイン費×10
・Professionalプラン費×1
■Sub app機能
・独自ドメイン費×10
・Professionalプラン費×10
と、Sub app機能を使った方が少なくとも月額$1,290（Professional：月額$129）も多くかかることがわかります。
また、Productionプランで作れるサブアプリの数は14までで、それ以上はEnterpriseプランの適用となり個別見積もりとなることにも注意が必要です。
SaaS構築方法比較のまとめ
両方法のメリット・デメリットから、SaaSモデルならこの方法で！と一概に言えないことが分かりますね。
業界や想定しているクライアント数などを踏まえ、上記の観点を中心にどちらの方法で進めるか検討してみてくださいね。
終わりに
BubbleでSaaSモデルアプリケーションを構築するイメージが見えてきたでしょうか？ケースに応じた方法でぜひ試してみてくださいね！
