今回の記事ではノーコードツールbubbleでのデータの表示とダイナミックな式を構築する方法について説明します。
データの表示
ユーザーがすでにモノ(things)のカタチになった情報を投稿したら、それを表示するためにページ内のいくつかの要素(エレメント)を持つことができます。
ページ内のいくつかの要素(エレメント)は、あなたがエディタで定義したコンテキスト内のモノ(thing)を持つことができます。言い換えれば、ある要素(エレメント)にモノ(データベースからのオブジェクト) をアタッチして、他の要素(エレメント)がこのモノにアクセスして、このモノに関連する値やフィールドを表示させることができます。
グループ内に単一の要素(エレメント)を表示する
グループ、ポップアップ、フローティンググループなどのコンテナはコンテキスト内に thing(モノ)を持つことができます。
コンテナにthing(モノ)を割り当てるには、要素(エレメント)が関連付けられるコンテンツのタイプを最初に定義つける必要があります。この情報を入力することで、bubbleは2つのことを行うことができます。
①グループのモノを使用しているときにドロップダウンメニューの関連するフィールドとオプションにアクセスすることができます。
②bubbleがデータタイプを検証してミスマッチを回避したり、Issue Checkerで問題にフラグを立てたりすることができます。
コンテンツのタイプが設定されると、コンテナにデータを注入(またはディスプレイ)する方法を2つ発見することができます。
①要素(エレメント)レベルでデータソースフィールドを使用する
②ワークフロー内のアクションでグループ内のモノを変更する
どちらの操作も厳密にいうと同じですが、アクション(後者)の方がデータソースフィールド(前者)に勝ります。
次のセクションでは、Data sourceとData to displayフィールドを埋めるために使用される動的な式の構築について説明します。
一度thing(モノ)を作成すると、内部の要素(エレメント)は「親要素の thing(モノ)」にアクセスできるようになります。
ここで注意しなければならないのは、要素(エレメント)は直接の親要素のthing(モノ)にしかアクセスできないということです。
あるグループが別のグループ内にもある場合、最初のグループ内の要素(エレメント)は、祖父母要素(エレメント)のものではなく、その固有のグループのthing(モノ)にアクセスします。
グループをリセットすると、その中に表示されているモノを消去することができます。
グループのリセットアクションを使用すると、そのモノはデータソースとして定義されていたものに戻ります(フィールドが最初に埋められていなかった場合は空のオブジェクトを含む)。
グループがリセットされているときは、入力も初期状態に戻ります。グループの内容が変更されるたびに、グループは事実上リセットされ、新しいモノが表示されることに注意してください。
ページのthing(モノ)を定義づける
ページレベルでも似たようなことができます。ページはコンテンツのタイプを持ち、そこに送られるデータを取得することができます。例えば、あなたがソーシャルネットワークを構築していて、ユーザーのためのプロフィールページを持ちたい場合、アプリケーション内に1つのメインの「プロフィール」ページをデザインし、コンテンツのタイプは「ユーザー」になります。
ページにデータを送る最も一般的な方法はリンクです。
ページにコンテンツのタイプが定義されている場合は、ページに送るべきものを指定するように促されます。これにより、そのページのURLにそのページのモノを指定するユニークなIDが追加されます。
このリンクには、ページのモノを設定するために必要な情報が含まれ、共有することができます。
ワークフローでページにデータを送信するもう一つの方法は、Go to pageアクションを使用することです。
これはリンクエレメントと同様に機能しますが、送信先のページがコンテンツのタイプを持っている場合は、thing(モノ)を渡す必要があります。
宛先ページが現在のページと同じであれば、ページを更新せずに更新されます(URLは変更されます)。
ページにコンテンツのタイプを設定している場合は、送信するものを指定しなければならず、空欄のままにしておくと問題としてフラグが立てられますので注意してください。
繰り返しグループのモノの一覧を表示する
リピートグループは、モノのリストを受け取る特殊なタイプのコンテナです。
コンテンツのタイプを定義し、データソースを定義するか、アクションを使用してリピートグループ内のリストを表示します。このデータソースは、指定したタイプのコンテンツのリストでなければなりません。
データソースを定義する最も一般的な方法の1つは、データベースからの検索です。
以上、ここまでがデータの表示についての説明でした。ここからはダイナミックな式の構築についての説明です。
ダイナミックな式を構築する
bubbleアプリケーションで使用する情報のほとんどは、データベースや外部API(プラグイン)などの他のデータソースからのダイナミックなものです。
この場合、エクスプレッション・コンポーザーを使用して、編集モードではエクスプレッションとして表示し、実行モードでは評価されるエクスプレッションを定義します。
例えば、エディタに「現在のユーザーの電子メール」が表示されますが、これは誰かがログインしているときは「someone@email.com」とランモードになることがあります。
エクスプレッションコンポーザー
エクスプレッションコンポーザーはbubbleアプリケーションエディタの重要な要素で、何も入力せずにドロップダウンメニューからオプションを選択することで、式を構築することができます。
システムは自動的に次のメニューで、これまでに選択したものが利用可能なオプションを表示します。
例えば、式の最初のメインエントリーが「現在のユーザー」である場合、次のメニューでは「ログインしている」、「ログインしていない」、「電子メール」などのオプションが表示されます。
bubbleの語彙では、メインエントリー(すなわち、ダイナミックな式の最初の選択肢)は「データソース」として知られており、それ以降のすべてのチャンクは「演算子」として知られています(例えば、この場合は「email」、または「:first」、「contains」などの式)。
コンポーザーでは、異なるデータソースを組み合わせて複雑な式を構築することができます。評価は左から右に行われ、括弧の優先順位はありません。
ダイナミックな式が演算/計算を実行している場合、従来の演算順序(“PEMDAS”)に従わず、厳密に左から右に評価されることを再確認する価値があります。
式のタイプは、タイプの整合性を検証するために編集モードで評価されます。
例えば、テキストエレメントに現在のユーザーの電子メールを表示しようとしている場合、「Current User」はテキストではないので有効ではありませんが、「Current user’s email」は有効になります。
式が有効でない場合は、問題チェッカーで問題として報告され、式全体が赤く表示されます。ランモードデバッガは、式がどのように評価されるかを理解するのに非常に便利です。
データソース
データソースは、ダイナミックな式を設計する際にデータを取得する場所です。
これは式の最初のセクションになります。データのソースは、データベースからの検索、現在のユーザー、外部APIからのデータ、ページやブラウザの情報などです。このセクションでは、主要なデータソースをカバーします。
検索とクエリ
このデータソースは、データベースから指定されたタイプのエントリを取ってきて、モノのリストを返すことができます。
これは、グループを繰り返してリストを表示したり、いくつかのエントリの存在をチェックしたりするために使用することができます。
検索は、検索するデータのタイプ(例えば user や car’など)と、オプションとしていくつかの制約やソートオプションによって定義されます。
制限
検索を絞り込むためにいくつかの制約を定義し、これらの制約を満たすアイテムのみを取得することができます。
例えば、価格が2つの値の間にある車を見つけたいとします。制約の定義は、制約を適用したいフィールドを選択し、比較演算子(=、<、>、containsなど)を定義し、比較する値を静的値または動的式のいずれかで定義することで動作します。
制約なしで検索すると、そのタイプのデータベース内のすべてのエントリが返されます。
フィールドごとに検索することも、すべてのフィールドを検索することもできます。この場合、検索エンジンは、制約の値として定義されたテキストを含むすべてのエントリを取得します。
式が空の値で評価される場合、制約は設計上無視されます。
例えば、車のページで検索を行っていて、ユーザーに最大価格を入力させているとします。この入力の値を価格フィールドの検索制約で使用していて、ユーザーが何も入力していない場合、すべての車が検索されます。
外部APIからのデータ
データソースでは、外部サービスまたはサーバーからデータを取得し、そのタイプのオブジェクトのリストを返します。データソースを提供するプラグインをアプリに追加すると、APIプロバイダのドロップダウンにいくつかのオプションが表示されます。
それぞれのAPIには異なるパラメータがあり、ユーザーインターフェイスでは関連する値を入力するように促されます。
例えば、Google Places APIでは、探しているもの(「カフェ」や「レストラン」など)の値と住所を入力する必要があります。ここでも検索と同じように、ダイナミックな式を使用して、これらのAPIパラメータを動的にすることができます。
現在のユーザー
現在のユーザーは、現在ログインしているユーザーを表します。これにより、ユーザータイプ上で定義つけられた異なるフィールドへのアクセスが認められます。
以前のアクションの結果
ワークフローでは、アクションがいくつかのデータを返すとき、後続のアクションで前の操作の結果にアクセスしたいことがよくあります。
例えば、アクションが orderタイプの、モノを作成し、それをメールで送信するためにこのモノのIDを取得する必要があるとします。以前のアクションの結果データソースはこれを可能にします。
親要素(エレメント)のモノと現在のセルのモノ
これは最も一般的なデータソースの一つです。bubbleでは、コンテナ要素(エレメント)は、コンテナ要素(エレメント)にアタッチされたものを持つことができ、内部のすべての要素(エレメント)がこのモノにアクセスすることができます。
データソースフィールドを変更したり、グループ内のデータを表示するアクションを使用することで、グループがコンテキスト内でどのようなモノを持っているかを制御することができます。
繰り返しグループも同様に機能します。各セルは、データソースとしてアクセス可能なコンテキストにあるモノを持つことになります。
リスト上のオペレーション
bubbleにはリストに適用できる操作がいくつかあります。特に、ソートやフィルタリングをリストに適用することができます。
これらは、リストがデータベースから取得された後に評価されるため、検索制約とは異なり、パフォーマンスが低下する可能性があります。
ダイナミックな式を編集する
ダイナミックな式の編集は、後続のドロップダウンメニューで行います。
マウスを使用して適切なオプションを選択することができますが、キーボードを使用することもできます。
矢印キーを押すとオプションを移動することができ、deleteを押すと式の中に戻って後続のエントリを削除します。
bubbleには、長い式を操作するのに役立つツールもいくつかあります。
これらのツールはコンテキストメニューで見つけることができますが、式を右クリックしてください。特に、式をコピー/ペーストしたり、ダイナミックなエントリを持つテキスト式で作業している場合はダイナミックな式を挿入したり、式が参照している要素やアクションを明らかにしたりすることができます。
まとめ
今回の記事ではノーコードツールbubbleのデータの表示とダイナミックな式の構築について解説しました。
なかなかヘビーな内容であったと思いますので、ゆっくりと一つ一つのセクションをお読みいただければ幸いです。ではまた別の記事でお会いしましょう。
