アプリケーションエディタを使用して、アプリの設計、構築、保守、および拡張を行います。エディタは7つのメインタブで構成されており、その概要はこちらで説明します。また、Bubble を構築する際に使用する主要なツールや機能も多数用意されています。それらのツールの一部もここで紹介します。
主要なタブの紹介(Main tabs)
デザインタブ(Design tab)
ここでは、アプリの外観をデザインします。ページ上に要素を描画し、ドラッグしてサイズを変更したり、プロパティや外観を調整したりします。初めて使う方は、ここから始めることをおすすめします。
新しい要素を追加するには、左側のパレットで要素の種類をクリックし、ページ上でクリック＆ドラッグして挿入します。要素をダブルクリックすると、プロパティエディタが表示され、要素の外観や動作をカスタマイズすることができます。要素を右クリックすると、ドロップダウン・メニューが表示され、その他の編集オプションが表示されます。
ワークフロータブ(Workflow tab)
ワークフロータブは、あなたのページをプログラムするワークフローを定義する場所です。異なるワークフローは、イベントを表すボックスとして表示されます。
イベントやアクションをクリックすると、プロパティエディタに似たパネルが表示されます。そこで、アクションに設定する必要のあるさまざまなフィールドを定義することができます。例えば、「Send email」アクションの場合、「To」というフィールドのあるパネルが表示され、ここでメールの送信先アドレスを定義します。この情報が動的な場合は、コードなしで動的な式を構築できるComposerを使って追加できます。
データタブ(Data tab)
データタブでは、データ構造を確認したり、変更したりすることができます。アプリケーションで使用されるさまざまなデータ型と、それぞれのフィールドを確認することができます。アプリデータ」セクションには、実際のデータが表示されます。Excelタイプのビューには、作成されたエントリが表示され、エントリの照会、エクスポート、修正、削除が可能です。プライバシー」セクションは、アプリケーションのデータが適切なユーザーに見られるようにプライバシールールを定義する場所です。これは高度な機能ですが、アプリケーションを実運用で使用する際にはすぐに設定しなければならないものです。
スタイルタブ(Styles tab)
スタイルタブでは、インターフェイスの要素が持つさまざまなスタイルを定義します。スタイルとは、類似したタイプの要素（テキスト要素など）に適用できるプロパティ（背景色、フォントサイズなど）の共有セットです。スタイルを使用することで、より一貫したインターフェイスを持つことができ、テーマを素早く変更することが可能になります。可能な限りスタイルを使用することを強くお勧めします。
プラグインタブ(Plugins tab)
プラグインは、Bubbleのコア機能を拡張するための手段です。例えば、コミュニティによって構築された要素を使用したい場合、Stripeでクレジットカードに課金したい場合、Facebookでサインアップする機能をユーザーに提供したい場合、アプリケーションにプラグインをインストールする必要があります。プラグインは、「プラグイン」タブでインストールすることができます。プラグインをインストールすると、必要に応じて、各プラグインのパラメータを入力できるようになります。例えば、Stripeプラグインを使用する場合、Stripeから取得するAPIキーを入力する必要があります。
プラグインタブは、プラグインのレビューや評価を行う場所でもあります。ほとんどのプラグインはコミュニティによって作られているので、評価やレビューはバブルのエコシステムを健全に保ち、プラグインビルダーがプラグインを改良するために非常に重要です。
セッティングタブ(Settings tab)
このタブでは、アプリケーションのサブスクリプションと有料アドオンをコントロールすることができます。設定]タブでは、アプリケーションを起動する前に定義する必要がある、アプリケーション全体の設定も見つかります。これらの設定は、カラーパレットの定義やカスタムフォントの追加から、パスワードポリシーの設定、アプリのプライベート化など多岐にわたります。
ログタブ(Logs tab)
このタブは、アプリが本稼働した後や、Runモードでテストしているときに便利です。サーバーログを使用して、過去のイベントやワークフローの問題を診断したり、スケジュールされたアクションやワークフローの実行やアップロードストレージの観点からアプリの使用状況を確認したりすることができます。
同じアプリでBubble Application Editorのブラウザタブを多数同時に使用すると、予期せぬ動作が発生することがあります
主要なツールの紹介(Key tools)
プロパティエディタ(Property Editor)
プロパティエディタは、各ページのさまざまな要素をデザインしたり、イベントやアクションをカスタマイズするのに使うメインパネルです。これはドラッグ可能なポップアップで、要素、アクション、イベントに対して入力できる/入力すべきさまざまなフィールドが表示されます。要素をダブルクリックするか、イベントやアクションを1回クリックすると表示されます。上部のバーでは、編集中の要素／アクション／イベントの名前を変更でき、右側のアイコンでは、要素インスペクタ、コメントパネル、コンテクストビデオを表示することができます。
アプリ検索ツール(App Search Tool)
いくつかのページや要素があるとすぐに、例えばカレントユーザーのメールを使用しているすべての要素を見つけたい、あるいは指定されたスタイルを持つすべての要素を見つけたいという状況に陥ります。エディターのトップバーにある拡大鏡のアイコンをクリックすると、検索ツールが表示されます。要素やアクションなどを検索することができます。エントリーをクリックすると、エディター内の適切なページ/タブに移動します。
“テキストを含む”オプションは、表示名ではなく、基礎となるメタデータが、検索対象となるテキストの一部を含んでいる要素に単純にマッチします。例えば、フィールドの名前を変更する場合、そのフィールドのメタデータの出現回数をすべて変更することはありません。
イシューチェッカー(Issue Checker)
Bubbleは非常に自由度が高いので、設計する際にいくつかの間違いを犯す可能性があります（おそらく犯すことになるでしょう）。たとえば、「現在のユーザーに請求する」アクションでテキストフィールドを使用し、価格を数値で指定する必要がある場合、フィールドが欠けていたり、型が一貫していなかったりすることがあります。Issue Checkerは、リアルタイムでアプリをチェックし、修正すべき問題をリストアップします。問題が発生するとすぐにトップバーに赤い警告アイコンが表示され、この警告アイコンをクリックするとリストが表示されます。検索ツールと同様に、各項目をクリックすると適切な場所に移動し、対応する問題がハイライトされます。
問題があるとアプリが実行モードで機能しなくなる可能性があるため、問題リストは常にできるだけ短く（できれば0件に）しておくことが重要です。問題があると、アプリをユーザー向けのライブバージョンにデプロイすることができません。
プレビュー(Preview)
Bubbleで新しいアプリを作成すると、すぐにアプリを実行することができます。いつでもプレビューをクリックすれば、現在編集中のページでアプリケーションを実行できます。
バージョン管理(Version Control)
プランによって異なりますが、アプリを任意の時点に戻すことができます。例えば、削除すべきでないページを削除してしまい、その変更を元に戻せなくなった場合など、何か問題が発生した場合は、アプリを削除が発生する前の時点に戻すことができます。
その他の主な機能(Key features)
リアルタイムセーブ(Real-time saving)
Bubbleは、アプリをリアルタイムで自動保存します。要素、アクション、設定などを変更すると、すぐにその変更が保存されます。トップバーの「保存中」通知が一瞬表示されますが、保存処理が終了するとすぐに「保存済み」に変わります。
インターネット接続が安定していない場合、通知が赤くなることがあります。このような場合は、アプリの作業を少し中断し、接続が正常に戻るかどうかを確認する必要があります。そうでない場合は、エディターをリフレッシュするのが、通常の状態に戻す最も良い方法です。リフレッシュすると、最後に行った変更が失われる可能性があります。通知が赤色に変わった場合は、アプリの作業を続けないでください。色が変わった後にアプリに加えられた変更が失われる可能性があります。
やり直し機能(Undo and redo)
1つのブラウザセッション内で、アプリに対するすべての変更は、取り消し/やり直しが可能です。トップバーの両方のアイコンをクリックすると、変更を元に戻したり、再度適用したりすることができます。ただし、この変更はエディタの一部で行われ、その時点のページでは表示されないので、これらのボタンが何を行っているかわからない場合は注意して使用してください。
マルチユーザー編集(Multi-user editing)
複数のユーザーが同時にアプリを修正することができます（ただし、ユーザーを招待するには有料プランに加入する必要があります）。自分がいるアプリを他の人が修正しているとき、他のユーザーのマウスが動いているのが見えます。これは、2人が同時に同じ要素を修正することを防ぐために便利です。
ショートカット(Shortcuts)
エディタにいくつかのショートカットが追加され、ビルドがより速くできるようになりました。コピー＆ペーストだけでなく、ボタンにワークフローを追加したり、コンポーザーを操作したりすることができます。現在利用可能なショートカットのリストは、HelpメニューのShortcutsパネルで見ることができます。
コア・リファレンスへのアクセス(Access to the Core Reference)
エディタから「参考文献を見る」ツールチップを通して、Bubbleのドキュメントにアクセスできます。アイコンやフィールドの上に数秒間カーソルを置くと、ツールチップが表示されます。ツールチップをクリックすると、新しいタブが開き、ドキュメント内の適切な場所に移動します。すでにドキュメントを開いている場合は、瞬時に適切な場所にリダイレクトされます。
参考英語サイト
https://manual.bubble.io/new-start-here/the-application-editor#main-tabs
