ノーコードツール【Bubble】インターフェースConditionalityの意味と設定方法を解説

例えば、ユーザーがログインしている場合に「ログアウト」ボタンを表示したり、ユーザーがボタンにカーソルを合わせたときにボタンの色を変更するなど、特定の状況下でのページ要素の動作や表示を制御することができます。これらの条件と、変更するプロパティを定義するには、要素のProperty EditorのConditionalタブで行います。

条件を定義する

要素を編集する(ダブルクリックする)と、プロパティエディタが表示されます。Appearanceタブでは、要素の一般的な動作を定義し、Conditionalタブでは、Runモードでこの要素に適用されるいくつかの条件を定義することができます。

コンディションは、2つの異なるものから構成されています。

・2で定義したプロパティが適用されるタイミングを定義する、条件そのもの。上記の例では、Current user isn’t logged in.

・1で定義した条件を満たした場合に、変更すべきプロパティ。この場合、その要素は表示されない。

条件は、ほぼすべてのデータソースで構成できますが、最終的にyes/no式である必要があることに注意してください。そうでない場合は、課題チェッカーによって課題として報告されます。ある要素に対して複数の条件が真である場合、すべての条件が適用されます。2つ以上の条件が矛盾する性質を持つ場合(つまり、2つ以上の条件で同じ性質が異なる方法で変更される場合)、最後の1つが優先されます。このように、「上に移動」または「下に移動」をクリックすることで順番を制御することができます。

プレビューの条件

エディターで要素の条件を編集する際、ON/OFFをクリックすると、編集のために人為的にその状態にすることができます。Run-modeの要素には効果がありません。

ランモードデバッギング

1つの要素は複数の条件を持つことができるため、同じ要素で複数の条件が「YES」と評価されることがあります。そのため、デバッガを使用して要素を検査し、どの条件がtrueに評価され、それが要素の外観にどのような影響を与えるかを把握することをお勧めします。

トランジションズ

条件の評価がnoからyesに変わったとき、またはその逆の場合のプロパティの変更は即時です。もし、いくつかのプロパティを徐々に変化させたい場合は、Property Editorの3番目のタブでいくつかのトランジションルールを定義することができる。これは、ユーザーインターフェースに流動的な感じを与えたい場合に有効である。

例えば、下図の場合、背景色はイージングカーブに沿って、200ミリ秒で初期値から最終値まで変化します。これらの遷移ルールは、一部のビジュアルプロパティにのみ適用可能です。例えば、ボタンのテキストは徐々に変化させることができませんが、色は変化させることができます。

参考英語サイト

https://manual.bubble.io/help-guides/building-a-user-interface/handling-conditionality

参考英語動画サイト