BubbleはWYSIWYGエディターを採用しており、エディター上での変更がそのまま最終的なアプリに反映されます。開発中にリアルタイムでアプリの動作を確認できるプレビュー機能を活用することで、スムーズな開発が可能になります。本記事では、Bubbleのプレビュー機能について詳しく解説します。
テスト環境とライブ環境
Bubbleでは、アプリはデフォルトで**Development（開発）とLive（本番）**の2つの環境に分かれています。
- 開発環境（Development）：プレビュー機能を使用すると、Bubbleは開発環境（version-test）でアプリを実行します。
- 本番環境（Live）：本番環境で動作を確認するには、まずアプリをデプロイする必要があります。
URLを確認することで、どの環境で実行しているかを判別できます。開発環境のプレビューではURLに「version-test」が含まれます。
特定のユーザーとして実行
プレビュー機能を利用する際に、特定のユーザーとしてアプリを実行することができます。
- プライバシールールやユーザーごとの制限をテストする際に便利です。
- 特定のユーザーとしてログインした状態でアプリを動作確認することで、アクセス制御が正しく機能しているか検証できます。
- 実行方法：
- Data > App Data セクションで、ユーザーデータを表示します。
- ユーザー一覧の左端の「Run as」リンクをクリックすると、そのユーザーとしてプレビューを実行できます。
Run as in Live（本番環境での実行）
本番環境でも特定のユーザーとしてアプリを実行することができます。
- データベースの切り替え：本番環境のデータを使用する場合は、Switch to live database（ライブデータベースに切り替え）ボタンをクリックして、ライブデータにアクセスしてください。
- 開発環境と同様に、「Run as」リンクをクリックすることで、特定のユーザーとして動作をテストできます。
セーフモードの利用
アプリに問題が発生した場合、セーフモードを利用することで、問題の特定が容易になります。
- セーフモードを有効にするには、Previewボタンを長押しして、表示されるメニューから適切なモードを選択します。
- セーフモードは本番環境には影響を与えません。
Safe – no custom HTML（カスタムHTML無効）
このモードでは、追加したカスタムHTMLを無効化してアプリをプレビューできます。
- HTMLによる影響が原因で不具合が発生している場合の診断に役立ちます。
Safe – no community plugin（コミュニティプラグイン無効）
このモードでは、Bubbleが公式に提供していないコミュニティプラグインをすべて無効化した状態でアプリをプレビューできます。
- Bubbleが公式に提供するプラグインは引き続き有効です。
- サードパーティ製プラグインによる問題を特定する際に有効です。
Safe – no community plugin and HTML（コミュニティプラグインとHTML無効）
このモードでは、
- コミュニティプラグイン
- カスタムHTML
の両方を無効化した状態でアプリをプレビューできます。
- プラグインとHTMLのどちらが影響を与えているか判断しやすくなります。
Disabling safe mode（セーフモードの無効化）
セーフモードでプレビューすると、URLに追加のパラメータが付与されます。
- セーフモードを無効化する方法：
- URLのパラメータを削除する。
- Previewボタンを再度クリック（長押ししない）。
デバッガーの利用
プレビュー機能では、デバッガーを使用してアプリの動作を詳細に解析することができます。
- デバッガーの機能
- ワークフローの実行状況をリアルタイムで確認。
- 各要素のプロパティやデータの状態を検査。
- エラーの特定と修正を効率化。
デバッガーを活用することで、問題のあるワークフローや条件分岐を素早く見つけ、修正することが可能になります。
まとめ
Bubbleのプレビュー機能を活用することで、開発中のアプリをリアルタイムでテストし、問題を特定できます。
- 開発環境と本番環境を区別してテストし、誤ったデプロイを防ぐ。
- 特定のユーザーとして実行し、プライバシールールやアクセス制御を検証。
- セーフモードを利用して、カスタムHTMLやコミュニティプラグインが引き起こす問題を特定。
- デバッガーを活用して、アプリの動作を詳細に解析し、エラーを迅速に修正。
このような機能を駆使することで、Bubbleアプリの開発効率を大幅に向上させることができます。