はじめに
本記事では、Bubbleで構築したアプリをBubble以外のノー／ローコードサービスで再構築するための手順をご紹介していきます。
最後まで読んでいただくと移行の大まかな手順を確認できる記事になっていますのでぜひ最後までご一読ください。
前提
本記事は以下を前提に移行手順を紹介していきます。
- Bubbleアプリの移行先はノー／ローコードプラットフォーム × クラウドDBサービスである
- Bubbleでは組み込みのデータベースを利用している
【ノー／ローコードプラットフォーム × クラウドDBサービスの組み合わせの例】
WeWeb × Xano（またはSupabase）、FlutterFlow × Firebaseなど
移行手順
早速新サービスへの移行手順を説明していきます。
手順は以下のStep1～8になります。必要な手順は場合によって異なるので、各ステップの場合分けを確認して必要な手順を実行してください。また、以下の順番は一例なので、必ずしもこの順番で実行しなければならないというわけではありません。
Step1. ロジック・ビジュアルデザインの移行
Step2. ドメイン・URLに関する設定
Step3. データベースの移行
Step4. データベースとロジック・ビジュアルデザインの連携
Step5. 新アプリのテスト
Step6. サービス移行の案内
Step7. 新アプリの稼働開始
Step8. Bubbleアプリの停止
Step1. ロジック・ビジュアルデザインの移行
Bubbleにはアプリやコードのエクスポート機能がありません。そのため、WorkflowやDesignは新プラットフォームで地道に再構築する必要があります。
ただ、一部の方にはデザインの実装面で時間短縮につながるかもしれない方法がありますので、その方法をご紹介します。
1.1.Figmaのデザインデータ取り込み機能を利用する
BubbleではFigmaのデザインデータを取り込むことができますね。BubbleでFigmaからデザインデータを取り込んでデザインを実装していた方は新プラットフォームでもFigmaからデータを取り込む機能がないかを確認してみましょう。Figmaで作成したままのデザインをBubbleで実装しているなど、時間短縮できるようでしたらぜひFigmaデータの取り込みを試してみてください。
ちなみに、WeWebはFigmaのデザインデータ取り込み機能の実装を予定しています。
▼参考
1.2.アプリのJSONファイルを利用する
Bubbleではアプリのロジック・ビジュアルデータをJSON形式のファイルでエクスポートすることができます。コーディングしてアプリを再構築する場合はこのファイルを利用することで多少コーディングの時間を短縮することができるかもしれません。とは言っても大幅にコードを修正する必要があるので結局のところ大きな時間短縮にはなりません。
本記事ではコーディングして再構築するケースは除外していますが、興味のある方は以下の手順でエクスポートを試してみてください。
【アプリのエクスポート手順】
Bubbleのダッシュボードにログインし、Settingsタブ>「General」>「App file management」の「Export Application」を押下します。
Step2. ドメイン・URLに関する設定
新アプリで利用するドメインがカスタムドメインなのかサービスドメインなのかによって実行が必要な手順が異なります。ドメインが確定してから以下の手順を実行してください。
2.1.DNSサーバーなどの設定
カスタムドメインを使用する場合、DNSサーバーなどの設定が必要になります。新プラットフォームのドキュメントを参考に、カスタムドメインを使用するのに必要な設定を行ってください。
2.2.リダイレクト設定
サービスドメインを使用するなど、Bubbleアプリと新アプリで異なるドメインやURLを使用する場合（例えばBubbleではBubbleドメインを、移行後のプラットフォームではそのドメインを使用するなど）は、Bubbleドメインへのアクセスも拾えるよう新アプリへのリダイレクト設定を行っておくと親切です。
なお、リダイレクト設定機能を備えているかはプラットフォームによって異なります。備えていない場合、旧URLにアクセスしたユーザーに不便をかけないような対応策を講じておくのがおすすめです。
2.3.分析ツールの設定
Bubbleアプリと新アプリで異なるドメインやURLを使用する場合、Google Analyticsなどの分析ツールの再設定も必要になります。タグの再埋め込みなどもこのステップで行ってください。
Step3. データベースの移行
データベースの移行手順は、Bubbleアプリを停止して移行する場合とBubbleアプリを運用しながら移行する場合で異なります。2つの場合に分けて手順をご紹介していきます。
※移行作業中の本番データの取り扱いにはご注意ください。本番データのバックアップを取り、まずは開発データで以下の手順を試すのがおすすめです。
3.1.Bubbleアプリを停止後に移行する場合
Bubbleアプリでのサービスを停止してデータ移行後、新アプリでサービスを再開する場合の方法をご紹介します。Bubbleアプリの停止から新アプリでのサービス再開まではデータの作成・削除・変更が発生しない前提なので、現時点のデータを一括移行するだけで完了します。
次の2つの方法が利用できます。
3.1.1.データをCSVでエクスポートして移行する
BubbleではPersonal以上のプランでデータのCSVエクスポート機能が利用できます。この機能を利用してデータをエクスポートし、新データベースにインポートするという方法です。
【Bubbleデータのエクスポート手順】
Bubbleアプリのエディターを開き、Dataタブ>「App data」を開いてエクスポートしたいTypeを表示します。次に、データの上部に表示される「Export」をクリックします。
エクスポート形式を選択するポップアップが表示されます。Typeを確認したら、JSON、CSV、NDJSONからエクスポート形式を選択して「CONFIRM」をクリックします。
成功すると「Success」というポップアップが表示されます。「GOT IT」をクリックしてポップアップを閉じます。
エクスポートファイルは、Bubbleに登録しているメールアドレスあてに送付される「[Bubble] Your file export for xxxxxxxx is ready to download」という件名のメールにダウンロードリンクを表記して共有されます。
メールのダウンロードURLをクリックするとエクスポートしたファイルがパソコンにダウンロードされます。ダウンロードしたファイルを使用して新データベースにデータをインポートしてください。
CSVファイルのインポート方法は各データベースのドキュメントをご確認ください。
▼参考
・CSVファイルのインポート（Xano）
3.1.2.iPaaSを利用してデータを移行する
iPaaSを利用してBubbleデータベースから新データベースにデータをコピーする方法です。
iPaaSは異なるサービスのシステム・データ連携を可能にするサービスです。iPaaSの候補としてMake（旧Integromat）やParabolaが挙げられます。
iPaaSを利用して連携できるサービスに自分が利用したいサービスが含まれていない場合は、WebhookやAPIアクションを利用してBubbleデータベースから新データベースにデータを移行するのがおすすめです。
BubbleのデータはData Type単位で移行できるiPaaSが多いです。
連携後、iPaaS上での実行操作（「実行」ボタンのクリックなど）でデータの移行が完了します。
【iPaaS利用上の注意】
・データ量によっては移行の完了まで時間がかかる可能性があります。
・更新の回数やデータ量、データのファイルサイズによってより上位の有料プランに加入しなければならない場合があります。各iPaaSの料金プランをご確認ください。
▼参考
・MakeでWebhookを利用してBubbleとOne Driveを連携する方法（ノーコードラボブログ）
3.2.Bubbleアプリを運用しながら移行する場合
新アプリでの稼働開始までBubbleのデータベースと新データベースの両方でデータを保管し、新アプリの稼働開始時に新データベースに切り替える場合の方法を紹介します。この場合では、Bubbleデータベースの更新に合わせて新データベースも更新できるようにする必要があります。
方法としては以下が考えられます。
※以下の方法を試す前に、まず現時点のデータを新データベースにコピーしておきましょう。方法は「3.1.Bubbleアプリを停止後に移行する場合」でご紹介した方法をお試しください。
※新アプリの稼働の前にBubbleアプリで利用するデータベースを組み込みのデータベースから外部データベースに変更しておくことで、データを二か所で管理する必要がなくなります。
・【参考】BubbleとXanoの連携方法
3.2.1.Bubbleデータベースの更新の都度新データベースを更新する
この方法は、iPaaSを利用してBubbleデータベースの更新と同時に新データベースを更新する方法です。Bubbleのデータベースで作成・更新・削除が発生するごとに新データベースでも同じように更新します。
具体的には、iPaaSのWebhookやAPIを利用する方法や、iPaaSのトリガー（Bubbleのデータベースで更新があれば次のアクションを行う、というようなフローを構築できる要素）を利用する方法があります。
ただ、稼働中のBubbleアプリと連携するにはいくつもの既存のWorkflowにActionを追加する必要があるため比較的工数のかかる方法になります。
▼参考
・Bubbleでのデータベース更新をトリガーに移行先データベースのデータを更新する（Make）
・Webhookで接続する（Make）
・CRUD操作（Xano）
Step4. データベースとロジック・ビジュアルデザインの連携
移行したデータベースとロジック・ビジュアルデザインを再構築したプラットフォームを連携しましょう。
それぞれが推奨しているサービスなら、Integrationから簡単に連携できたりどこかの段階で連携方法が案内されるはずです。
ちなみに、WeWebはIntegrationのなかでXano、Supabaseとの簡単接続機能を提供しています。
また、FlutterFlowではプロジェクト（アプリ）のセットアップで簡単にFirebaseと連携することができます。
▼参考
・WeWeb
・FlutterFlow
（ここに岸本さんの記事リンク？）
Step5. 新アプリのテスト
アプリが形になってきましたね。ここで、アプリが問題なく稼働するかテストを行います。
Bubbleからプラットフォームが変わるのに伴って調整が必要な部分が出てくる可能性があります。特にユーザーがBubbleで運用されていた時と比べて戸惑ったり不便に感じたりしそうな部分がないかチェックして、あれば対応を取る必要があります。
Step6. サービス移行の案内
新サービスへの移行に伴いURLや機能などに変更点がある場合、ユーザー向けに案内を発信します。
案内は、メールやサービス上の通知機能などを利用して複数の方法で発信するのがおすすめです。ある程度新アプリへの移行完了が見えてきたタイミングで行えば、のちのち移行時期を後ろ倒さなければならなくなる可能性が低くなります。
6.1.案内の内容
以下の内容を中心に、新アプリの案内を作成してみてください。
- 移行の時期
- メンテナンスで利用できない期間（あれば）
- アプリ全体における変更点
- 新しいアプリのURL
- 旧アプリのURLが引き続き利用できる期間
- ログインパスワードリセットの手順
ログインパスワードリセットについては次のセクションで詳しく説明します。
6.2.ログインパスワードリセット
パスワードリセットについての案内はメールアドレスとパスワードでログインする設定をしていたアプリで対応が必須のものになります。
Bubbleではユーザーに紐づくパスワードは独自のロジックで暗号化されて保存されているためエクスポートすることができません。
そのため、移行後のアプリに初めてログインするときにパスワードリセット機能を使ってパスワードを再設定してもらう必要があります。
移行の案内にはパスワードリセットが必要ということはもちろん、リセットの手順を合わせて紹介できると親切ですね。
Step7. 新アプリの稼働開始
移行後の新アプリの稼働を開始しましょう！新アプリの稼働後数日は不具合の発生がないか特に注視できるよう体制を整えておくのがおすすめです。
Step8. Bubbleアプリの停止
Bubbleでは有料プラン非加入状態になると自動的にLiveバージョンが利用できなくなります。Bubbleアプリを停止したいタイミングに合わせて加入中の有料プランを解約しましょう。
移行手順はこれで全てです。Bubbleアプリの新サービスへの移行作業お疲れさまでした。
まとめ
今回は、Bubbleで開発したアプリを他のサービスに移行するときの手順をご紹介しました。移行作業の注意点として、本番データの取り扱いに気を付けること、新アプリの稼働開始はアクセスが多い日時を避けることなどが挙げられます。
あなたのアプリに合った移行先でより良いサービスを提供できると良いですね！
Discussion