関連のツールの紹介、使い方などをやさしく説明しています。ここ数年でよく耳にするようになった業務改善やDXですが、SaaSで取り組みたいと考えているバブラーの方は多いはず。Connector」を使って2つのアプリを連携してデータを複製する方法をご紹介します。App機能は、1つの「メインアプリ」に対してメインアプリのコピーである「サブアプリ」を複数作成できる機能で、SaaSモデルのウェブアプリケーションを構築したいときに便利な機能です。メインアプリで開発を進め、サブアプリをクライアントに割り当てるという使い方が一般的です。作成されたサブアプリに対しては「プッシュ」という更新機能を用いてメインアプリの変更を一括で適用させることができます(一部を除く)。メインアプリとサブアプリの関係は、メインアプリが親、サブアプリが子の親子関係と言えます。サブアプリはそれぞれエディターを持つので個別に設定を加えることは可能ですが、その後のプッシュで個別の設定は上書きされます(詳細は「プッシュ」の項目で説明)。メインアプリとすべてのサブアプリはそれぞれ独自のデータベースを持つので、メインアプリで作成されたデータはメインアプリのデータベースのみに、サブアプリ1で作成されたデータはサブアプリ1のデータベースのみに保存されます。クライアントごとに個別のデータベースが必要な場合に適しています。App機能が使えるのは月額$529のProductionプランです。Productionプランでメインアプリを作り、サブアプリそれぞれで必要なプランに加入するかたちになります。Professionalプランの機能が必要な10個のサブアプリを作成した場合、10個それぞれでProfessionalプランに加入する必要があります。editors」で規定の通り14個までサブアプリを作成できます(1メインアプリ・14サブアプリの合計15アプリが規定内)。14個以上作成する場合は個別での見積もりになります。app機能を使う場合、クライアントがサブアプリをエンドユーザーに提供開始する前にメインアプリでProductionプランに加入する必要があります。プッシュプッシュは、すべてのサブアプリに対してメインアプリのすべての変更を一括で上書きする機能です。以下は上書きできないようになっています。データベースの中身...オプションセットおよびデータベースの構造(Type、Fieldなど)は上書きできますが、データは上書きできません。データはそれぞれのアプリで個別に保存されます。※メインアプリとサブアプリで同じデータを持たせる方法は「データベースのデータを複製する方法」の段落で紹介します。ドメイン...ドメインは通常のアプリと同様、初期設定では「subappname.bubbleapps.io」になります。Personalプラン以上に加入することで個別に独自ドメインを持てるようになります。プラグインキーとプラグインの課金...有料のプラグインを利用している場合、それぞれのアプリで課金が必要です。ファビコン上記以外はプッシュですべて上書きされます。気をつけたいのが、上記以外がすべてのサブアプリに上書きされるということ。一部のサブアプリにのみ上書きしたりだとか、一部の機能やページのみを上書きするといったことはできません。それぞれのサブアプリで個別にworkflowやデザインを追加しても、その後にプッシュをするとメインアプリにないものはすべて失われます。サブアプリの数や上書き内容によって、プッシュの完了には数分かかる場合があります。プッシュの方法は「プッシュの実行」で解説します。app機能を使ってみましょう。サブアプリの作成まずは試しにサブアプリを作ってみましょう。appsタブを表示します。name」という入力ボックスがありますので、そこに作成したいサブアプリの名前を入れて、右の「Create」ボタンをクリックすれば作成完了です。Createクリック前のメインアプリがサブアプリにコピーされています。サブアプリを作成するなお、ここで入力した名前はアプリ名およびBubbleドメインのサブドメイン(https://Subappname.bubbleapps.io/...)になりますのでご注意ください。Personalプラン以上に加入することで独自ドメインも設定可能です。creation」をチェックすることでデータベースの中身をコピーすることが可能です。サブアプリにも持たせたいデータがある場合は、サブアプリを作成する前にデータを作成しておきます。作成したサブアプリは、サブアプリ名入力ボックスの上に一覧で表示されます。ここからサブアプリのエディターに移動したり(edit)、親子関係を解消したり(remove※1つのメインアプリとして独立する)できます。メインアプリの編集メインアプリのエディターで、サブアプリに上書きしたいようにアプリを編集していきます。データベースについては、今回は以下のような構造とテスト用のデータを作成しました。次に、Eventデータを作成するページとworkflowを作ります。「test1」というページを作成し、Inputエレメント2つ(number、title入力用)とButtonエレメント1つを配置します。Inputエレメントはそれぞれ以下のように設定しました。Typeに保存するworkflowを作成します。inputs」でInputボックスの入力をクリアEventデータ作成のworkflowここまで、アプリの作り方は通常の手順と変わりありません。applications」という部分があります。apps」のボタンをクリックすると、すべてのサブアプリへの上書き処理が実行されます。ボタンをクリックしてみましょう。...」という表示に変わります。apps」に戻ったらプッシュの完了です。Apps」のページからサブアプリを選択してエディターページを開き、念のためプッシュが完了しているか確認します。Typeの構造やtest1は上書きされていますが、Eventデータは上書きされていませんね。データベースのデータを複製する方法ここまでの説明通りプッシュではデータベースの中身は上書きされません。app機能ならではの簡単なデータベース複製方法もないようです。「どうしてもメインアプリとサブアプリで共通して持ちたいデータがある!」という場合もあると思います。次の段落では、そんなときに使える2つのアプリに同じデータを持たせる方法をご紹介します。方法の整理まずは使える方法をリストアップしてみます。(1)CSVでExport+Import一番オーソドックスな方法です。dataから「Upload」します。作成済みのデータが対象となるのでリアルタイムで両アプリに同じデータを持たせたいという場合には適しない方法です。データ量が多いと処理に時間がかかる場合があります。(2)iPaaSで連携してデータを複製IntegromatやZapier、ParabolaなどのiPaaSを使ってデータを複製する方法です。この方法では作成済みのデータ複製もリアルタイムでのデータ複製も可能です。利用するiPaaSのプランによる処理件数の制限やデータ作成時に生じる時差を考慮する必要があります。サブアプリでAPIを利用できるプランに加入していることが前提となります。Connector」を使って2つのアプリを連携する方法です。Connectorとは、2つのアプリを連携することで、あるアプリからもう1つのアプリのAPIやデータベースにアクセスできるようにするプラグインです。別のアプリでのworkflowの実行やOAthサインアップが可能になります。manual.bubble.ioこの方法はさらに2つに分けることができます。workflowを使い、アプリAでデータを作成したときにリアルタイムでアプリBでもデータを作成する方法です。workflowの実行タイミングをMonthlyやDailyに設定することで、作成済みデータをまとめてメインアプリに複製することも可能です。workflowはworkflow単位で設定できます。workflowを実行できるプランに加入していることが前提となります。1データベースを接続する...アプリAのみが持つデータをアプリBでも参照できるようにする方法です。1とは違い、アプリBではデータを作成しません。データが保存されているデータベースはアプリAのデータベースだけなので、「データを複製する」方法ではありませんが、アプリAのデータをアプリBで参照したり変数として扱いたいときなどに有効な方法です。接続するデータベースはType単位で設定できますが、プライバシールールの設定には注意が必要です。Connectorでアプリを連携する方法が最も応用が利き活躍するシーンも多そうです。Connectorでアプリを連携する方法」をご紹介していきます。Connectorでアプリを連携する「1連携するアプリにリアルタイムで同じデータを作成する」と「2データベースを接続する」方法をそれぞれご紹介します。以降は「サブアプリの作成方法」で作成したサブアプリをベースにしています。Connectorを使ってサブアプリで作成したデータをメインアプリのデータベースにもリアルタイムで保存する方法を解説します。Typeに作成します。workflowをAPIで呼び出せるように設定します。workflows」をチェックしてオンにします。workflowを編集できるようになりました。API」をチェックし、下に表示された「event」もチェックします。workflowを作成します。workflows」をクリックします。workflow」をクリックして新しいWorkflowを作成します。Workflowの名前や変数は以下のように設定します。thing」を選択して以下のように設定します。workflowの編集は完了です。Connectorでサブアプリからメインアプリの「create_event_by_sub」を呼び出す設定をします。本来この手順は呼び出したいアプリ側(今回のケースではサブアプリ)で行うものですが、プッシュでサブアプリに上書きされるのでメインアプリで行います。Connector」を検索し、インストールします。app」というボタンがあるのでクリックします。すると連携するアプリの設定項目が表示されます。Connectorは、アプリごとにAPIキーや連携するDB・Workflowの設定を行います。今回はこの設定をサブアプリ側で行っているイメージで、「メインアプリのevent_create_by_subを呼び出す」ために以下のような設定をします。calls以下)DB・Workflowの設定をします。call」をクリックすると、連携するDB・Workflowを追加する行が表示されます。一行につき1つのDB・Workflowを設定するかたちです。今回は「create_event_by_sub」を追加したいので以下のように設定します。※ここでは連携するDB・Workflowを選択します。workflowがドロップダウンに表示されます。※今回はWorkflowを呼び出して実行するのでActionになります。keyに基づき付与されます。metadata」をクリックして最新の情報を呼び出してください。Connectorの設定は完了です。データ作成Workflow設定ここからは、サブアプリからデータを作成するWorkflowを作成します。app機能を使ってみる」で作成したtest1を利用しましょう。inputsになっています。workflow「create_event_by_sub」を呼び出すactionを追加します。create_event_sub」を追加します。workflowの呼び出しactionはPluginsの項目から追加できます。workflow名」で表記されます。workflowの編集」で作成したキー(titleとnumber)が表示されるのでそれぞれ値を設定します。今回はStep1の結果を利用して以下のように設定しました。numberそしてStep3をドラッグ&ドロップでStep2の位置に挿入します。workflowを呼び出すプッシュ設定がすべて完了したので、ここまでの変更をプッシュでサブアプリに上書きします。apps」をクリックしてプッシュします。これで、サブアプリからメインアプリにリアルタイムでデータが複製できるようになりました。問題なくデータが作成されるか確認してみましょう。サブアプリのtest1ページをプレビューで開き、データを作成します。テスト用データを作成データベースに保存されているか確認しましょう。サブアプリのデータベースを確認します。以下のように保存されています。サブアプリのデータベースメインアプリのデータベースも確認してみます。app機能を使ってみる」で作ったテスト用データの後にこちらにも保存されていますね。メインアプリのデータベース直後に確認しましたが、大きな時差はなさそうです。ケース2データベースを接続するケース2では、メインアプリとサブアプリのデータベースを接続し、メインアプリが持つデータをサブアプリで表示する方法を解説します。Typeのデータをサブアプリのリピーティンググループで表示することを目標とします。API連携をオンにします。Typeのデータを参照したいので下に表示された「event」もチェックします。Typeを参照できるようにします。workflow呼び出し設定」と重複するので詳細は省きますが、以下のように設定します。※今回はデータベースを参照したいのでDataになります。metadata」をクリックしてください。これでデータベース接続の設定は完了です。リピーティンググループの設定ケース2用にページ「test2」を作成し、リピーティンググループを配置します。このリピーティンググループにメインアプリが持つEventデータを表示するようにしたいので、見出しにするTextエレメントを2つ(title、number表示用)と、データベースの値を表示するためのTextエレメントを2つリピーティンググループ上の適当な位置に配置します。event」を選択します。Typeが表示されるようになりました。API」を選択します。event」を選択し「Close」でポップアップを閉じ、最後に「Results」を選択します。Results」となります。number/title」とそれぞれ設定します。numberとtitleの値を設定これでリピーティンググループの設定も完了です。プッシュ設定がすべて完了したので、ここまでの変更をプッシュでサブアプリに上書きします。apps」をクリックしてプッシュします。動作確認サブアプリでメインアプリのデータベースのデータを表示できるか確認します。サブアプリのtest2ページをプレビューで開いて、リピーティンググループを確認します。Connectorはメインアプリ・サブアプリの関係にない2つ以上のアプリの連携にも利用できます。app機能についてご紹介してきました。SaaSモデルのウェブアプリケーション構築にはとても便利な機能ですが、冒頭に記載の通り月額費用がお高めのProductionプランに加入しなければならなかったりプッシュ対象を自由に選択できないなど、場合によっては少し使いづらいところもあります。SaaSモデルを構築したいならこんな不都合も我慢しなければならないのか...と思ってしまいますが、実はそんなことはありません。1つのメインアプリでも、クライアントに応じてサブドメインや独自ドメインを与えることでSaaSのように運用するという方法があります。app機能でSaaSモデルを構築する方法を比較していきます。app機能で作成したすべてのサブアプリとメインアプリは完全に個別のデータベースを持ちます。そのため、基本的にはサブアプリAのユーザーがサブアプリBのユーザーデータにアクセスできてしまうといったデータ流出の心配はありません。app機能しかありません。1つのメインアプリでもプライバシールールでデータへのアクセス権を制限できますが、設定ミスで上記のような流出が起こる可能性はゼロではありません。app機能での構築が向いているかもしれません。比較ポイント2カスタマイズ性SaaSモデルでは「クライアントやユーザーごとにデザインや機能を変えたい」ということはよくあるケースです。app機能ではプッシュでサブアプリごとの設定が上書きされてしまうので、継続してプッシュでアップデートする場合はサブアプリ個別の設定を追加することはおすすめできません。共通のWorkflowやConditionalをうまく使って制御する必要があります。app機能は避けたほうが良いかもしれません。比較ポイント3費用メインアプリとの親子関係はありつつ、サブアプリは1つのアプリとみなされます。そのため、クライアントごとにサブアプリをつくる場合、クライアントの増加に合わせて開発者がBubbleに支払う費用も増加することになります。app機能を使った方が少なくとも月額$1,290(Professional:月額$129)も多くかかることがわかります。Productionプランで作れるサブアプリの数は14までで、それ以上はEnterpriseプランの適用となり個別見積もりとなることにも注意が必要です。SaaS構築方法比較のまとめ両方法のメリット・デメリットから、SaaSモデルならこの方法で!と一概に言えないことが分かりますね。業界や想定しているクライアント数などを踏まえ、上記の観点を中心にどちらの方法で進めるか検討してみてくださいね。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。