ノーコードツール【Bubble】Reusable Elements(再利用可能な要素)の意味と使用方法を解説

THE SIMPLE

3年前

Contents

Reusable Elements(再利用可能な要素)とは？

Reusable Elements(再利用可能な要素)とは？

再利用可能な要素とは、複数のページで使用できる要素群を作成する方法です。サインイン用のポップアップを多くのページからアクセスしたい場合、一度だけ作成して再利用するのがよいでしょう。同様に、フッターとヘッダーを複数のページで統一したい場合は、一度だけ作成するようにします。できるだけ、再利用可能な要素として構築したほうが、アプリが軽くなり、メンテナンスもしやすくなります。一度作った再利用可能な要素は、ページに追加できる別の種類の要素になります。また、再利用可能な要素は、再利用可能なワークフローを作成するのにも有効な手段です。

再利用可能な要素の作成

再利用可能な要素を構築するには、アプリケーションメニューを開き、「再利用可能な要素の新規作成」をクリックします。すると、要素のページが表示されますので、そこで編集を行います。ページと同じように要素を設計し、関連するワークフローを定義します。

再利用可能な要素での作業

再利用可能な要素はコンテナ要素であり、グループやポップアップと同様の働きをします。データの観点からは、再利用可能な要素は、グループやポップアップに似ています。グループと同じように、コンテンツタイプを変更したり、データを送信したり、隠したり表示したりすることができます。重要な違いは、再利用可能な要素がポップアップである場合、モーダルな動作をすることです。言い換えると、ポップアップが閉じられないと、ユーザーはポップアップの外をクリックすることができません。

なぜなら、そのカスタムステートは、再利用可能な要素が追加されたページ上のワークフローからアクセスし、設定することができるからです。

ページへの再利用可能な要素の追加

再利用可能な要素をページに追加する方法は、他の要素と同様です。新規要素パレットで必要な要素を選び、ページ上に描画するだけです。

寸法を変更する

再利用可能な要素の寸法は、要素自体を編集する際に定義します。しかし、これらの要素はレスポンシブであり（固定幅にした場合を除く）、移動先のページでサイズを変更する必要がある場合、それを行うことができ、コンテンツは内部要素のレスポンシブ設定で定義されたとおりに調整されます。

既存の要素を再利用可能な要素に変換する

要素群を再利用可能な要素に変換することが可能です。複数の場所で使用したい要素グループを作成した場合、このオプションを使用すると、時間を節約し、アプリケーションのページ間で一貫したデザインを確保することができます。そのためには、コンテキストメニューまたはトップメニューのオプションを使用します。

再利用可能なワークフロー

再利用可能な要素の特別な使用例として、複数のページで再利用したいワークフローを収集することが挙げられます。そうすることで、まったく同じアクションの流れが複数の場所で使用されるようになり、ミスの可能性を最小限に抑え、アプリのデバッグと修正をより速く行うことができます。

これは、内部に要素を持たない再利用可能な要素を作成し、ページ間で共有したいワークフローを追加することです。この再利用可能要素をページに追加したら（必要に応じて不可視にする）、「再利用可能要素からカスタムイベントをトリガーする」アクションを使用して、再利用可能要素に追加したワークフローにアクセスすることができます。