ノーコードツール【Bubble】Dynamic Expressions(動的な情報のやり取り)の仕様を解説

Bubbleアプリケーションで使用する情報の多くは、データベースや外部API(プラグイン)など、他のデータソースから取得する動的なものでしょう。このような場合、Expression Composerを使用して、編集モードで式として表示され、実行モードで評価される式を定義することになります。例えば、エディタでは「Current user’s email」と表示されますが、ログインしている人によっては、ランモードでは「someone@email.com」になります。

The Expression Composer

Expression ComposerはBubble Application Editorの重要な要素で、何も入力することなく、いくつかのドロップダウンメニューからオプションを選ぶことで式を構築することができるようになっています。システムは自動的に次のメニューで、これまでに選択した内容から利用可能なオプションを表示します。例えば、最初のメイン項目が「Current User」の場合、次のメニューでは「is logged in」「is not logged in」「email」等のオプションが提供されます。Bubbleの語彙では、メイン・エントリ(つまり動的な式の最初の選択肢)は「データ・ソース」と呼ばれ、それ以降のチャンクはすべて「演算子」と呼ばれます(この例では「email」、あるいは「:first」「contains」などの式など)。

コンポーザーは、異なるデータソースを組み合わせて複雑な式を構築することができます。ここで重要なのは、評価は左から右へと行われ、括弧の優先順位はないことである。

動的式が算術/計算を行う場合、従来の演算順序(「PEMDAS」)に従わず、厳密に左から右へと評価されることは、繰り返し述べておく価値がある。

式の型はEdit-modeで評価され、型の整合性が検証されます。例えば、カレントユーザーのメールをtext要素に表示しようとした場合、「Current User」はtextではないので無効ですが、「Current user’s email」は有効です。式が有効でない場合、Issue Checkerで問題として報告され、式全体が赤色で表示されます。実行モードデバッガは、式がどのように評価されるかを理解するのに非常に便利です。

データソース

データソースは、動的な式を設計する際にデータを取得する場所です。式の最初のセクションになります。データソースは、データベースからの検索、現在のユーザー、外部APIからのデータ、いくつかのページやブラウザの情報などです。

主なデータソースを紹介します。

Do a search for

このデータソースは、データベースから指定されたタイプのエントリーを取得し、そのリストを返すことができます。これは、リストを表示したり、(リストの長さをチェックすることによって)いくつかのエントリの存在を確認したりするために、繰り返しグループに使用することができます。検索は、探すデータの型(例えば ‘user’、’car’ など)と、オプションとしていくつかの制約とソートオプションで定義します。

Constraints

検索を絞り込むためにいくつかの制約を定義し、その制約を満たす項目のみを取得することができます。例えば、価格が2つの値の間にある「車」を検索したい場合などです。制約を定義するには、制約を適用するフィールドを選び、比較演算子(=、<、>、containsなど)を定義し、比較する値(静的な値または動的な式)を定義することで動作します。制約のない検索では、そのタイプのデータベース内のすべてのエントリが返されます。

フィールド単位で検索することも、全フィールド検索をすることも可能です。この場合、サーチエンジンは制約の値として定義されたテキストを含むすべてのエントリを取得します。

式が空値に評価された場合、設計上、制約を無視することができます。これを行うには、「空の制約を無視する」のボックスをチェックします。これは、ユーザーのために設計にフィルタを組み込むときに便利です。たとえば、自動車のページで検索を実行し、ユーザーに入力で最高価格を入力させるとします。この入力値を価格フィールドの検索制約で使用している場合、ユーザーが何も入力していなければ、すべての車が検索されます(車がない場合は返されません)。

Data from external APIs

APIからデータを取得する」データソースでは、外部のサービスやサーバーからデータを取得し、そのタイプのオブジェクトのリストを返すことができます。アプリにいくつかのデータソースを提供するプラグインを追加すると、APIプロバイダのドロップダウンにいくつかのオプションが表示されます。

各APIは異なるパラメータを持っており、ユーザーインターフェースは関連する値を入力するように促します。たとえば Google Places API の場合は、探しているもの (‘カフェ’ や ‘レストラン’ など) と住所を入力する必要があります。ここでも検索と同じように、動的な式を使用してこれらの API パラメータを動的に指定することができます。

The Current User

カレントユーザーは、現在ログインしているユーザーを表します。これにより、いくつかの組み込みフィールドに加え、ユーザータイプに定義されたさまざまなフィールドにアクセスできるようになります。

Result of previous action

ワークフローでは、あるアクションが何らかのデータを返すとき、後続のアクションで直前の操作の結果にアクセスしたいことがよくあるはずです。たとえば、あるアクションが ‘order’ 型のものを作成し、それをメールで送信するためにそのIDを取得する必要があるとします。このような場合は、’Result from Previous action’ データソースを使用します。

Parent element’s thing and current cell’s thing

最も一般的なデータソースの1つです。Bubbleでは、コンテナ要素にthingを添付することができ、中のすべての要素がこのthingにアクセスできるようになります。データソースフィールドを変更するか、「Display data in group」アクションを使用することで、グループがそのコンテキストに持つモノを制御することができます。リピーターグループも同じように機能します。各セルは、データソースとしてアクセスできるものをそのコンテキストに持つことになります。

Operations on lists

Bubbleには、リストに適用できる操作がいくつかあります。特に、ソートとフィルタリングをリストに適用することができます。これらは検索制約とは異なり、データベースからリストを取得した後に評価されるため、パフォーマンスが低下する可能性があります。

Dynamic expressionsの編集

動的な式の編集は、後続のドロップダウンメニューで行います。マウスを使って正しいオプションを選ぶことができますが、キーボードを使うこともできます。また、「delete」を押すと、式の中に戻って、それ以降のエントリーを削除します。

Bubbleには、長い式を操作するのに役立つツールもいくつかあります。これらのツールは、式の上で右クリックすると表示されるコンテキストメニューで見つけることができます。特に、式のコピー/貼り付け、動的な項目を含むテキスト式の挿入、式が参照している要素やアクションの表示(ある場合)などが可能になっています。

まれに、入力に動的式を入力するための「クリック」ボタンが消えることがあります。その場合は、右クリックで「式を消去」をクリックしてみてください。

参考英語サイト

https://manual.bubble.io/help-guides/working-with-data/building-dynamic-expressions