プロパティスコープ

ほとんどのコンポーネントプロパティ（テキストや位置決めなど）は、ウィジェットの現在のスコープに基づいて代替値を使用するように構成できます。スコープは、ウィジェットの現在の言語、ブレークポイント、バリアントに紐付けられています。

使用例

• 多言語ウィジェット — ウィジェットの言語スコープに基づいてテキストやボタンコンポーネントの代替値を定義することで、多言語をサポートするウェブサイトで同じウィジェットを使用できます。
• レスポンシブウィジェット — ウィジェットのブレークポイントスコープに基づいてコンポーネントの位置や寸法を調整することで、異なるブラウザやデバイスの幅に合わせてウィジェットを調整できます。
• 代替デザイン — ウィジェットのバリアントスコープに基づいてアクティブ化される1つ以上の代替デザインを単一のウィジェットで構成できます。

プロパティ値はどのように決定されるか？

プロパティスコープは継承モデルを使用します。コンポーネントプロパティに指定する初期値は、デフォルトスコープに保存されます。デフォルトスコープの値は、他のより具体的なスコープによって継承および上書きされるベースを形成します。

例えば、ボタンコンポーネントは、そのテキストと寸法（幅と高さ）にデフォルト値を持つことができます。テキストは特定のフランス語翻訳を提供するために上書きでき、寸法はモバイルデバイス用にボタンを小さくするために上書きできます。

以下の例では、ウィジェットがフランス語以外の言語で表示される場合、ボタンのテキストは「Hello」と表示されます。

Figure: Example of property inheritance for a component called "Button1"

編集スコープの変更

現在のプロパティ編集スコープは、エディタの上部近くにあるドロップダウンから変更できます。これらのエディタスコープのドロップダウンは、ウィジェット設定を通じて追加のプロパティスコープを定義した場合にのみ表示されます。

Figure: Editing Scope Dropdowns

言語スコープ

ウィジェットの言語は、それに紐付けられている現在のオファーに紐付けられています。Fanplayrポータルで定義されている各オファーには言語属性があり、ウィジェットは実行時にこの値を取ります。

ブレークポイントスコープ

ブレークポイントを使用すると、ウェブサイトの表示に使用されるデバイスに基づいて代替スタイルを使用するレスポンシブウィジェットを作成できます。ブレークポイントは、シンプルとアドバンストの2つの異なるモードで利用できます。

シンプルブレークポイント

シンプルモードでは、ブレークポイントスコープをデスクトップとモバイルの2種類に分割します。これは、ウィジェットのデザインが大小の画面の両方で機能するように、ウィジェットに簡単な変更を加えるために使用できます。実行時に、ウィジェットはそれを表示しているデバイスに基づいて適切なブレークポイントを仮定します。

アドバンストブレークポイント

アドバンストモードでは、ビューコンポーネントの最大幅に基づいて特定のブレークポイントスコープを定義および命名できます。

例えば、これは異なる画面サイズに合わせてレスポンシブに調整される埋め込み可能なバナーを作成するために使用できます。ビューコンポーネントは、そのコンテナの幅を100%占めるようにし、その後、特定の幅で異なるスタイルを設定することで、小さい画面のウィジェットで表示されるコンテンツを段階的に減らすことができます。

バリアントスコープ

バリアントスコープは、ウィジェット内の特定のプロパティを上書きして、翻訳やレスポンシブデザインとは必ずしも関連しない代替デザインを作成するために使用できます。

言語スコープと同様に、ウィジェットのバリアントはそれに紐付けられている現在のオファーに紐付けられています。Fanplayrポータルで定義されている各オファーにはバリアント名属性があり、ウィジェットは実行時にこの値を取ります。

例えば、バリアントを使用して、新しいウィジェットを完全に作成することなく、季節ごとに代替デザインを作成できます。

コンポーネント削除の確認

コンポーネントを削除すると、編集している特定のスコープからだけでなく、ウィジェット全体から完全に削除されることに注意することが重要です。特定のスコープ（例：ブレークポイントスコープを使用して小さいデバイスで非表示にする）でコンポーネントを非表示にしたい場合は、そのスコープに対してコンポーネントのVisibleプロパティを「"hidden"」に設定するだけです。

スコープ付きプロパティを持つウィジェットでコンポーネントを削除しようとすると、以下のような確認ダイアログが表示されます。これは、単に非表示にしたかっただけなのに、誤ってコンポーネントを完全に削除してしまうことを防ぐためです。

Figure: Delete component confirmation dialog

非デフォルトスコープへのコンポーネントの追加

非デフォルトスコープで編集中にウィジェットにコンポーネントを追加すると、コンポーネントのプロパティは、現在のスコープでのみ表示されるように初期設定されます。これにより、定義した他のスコープから非表示にする必要なく、現在の編集スコープでのみ表示されるコンポーネントをウィジェットにすばやく簡単に追加できます。

エディタはこれを自動的に行います。

1. コンポーネントのデフォルトのVisibleプロパティを「"hidden"」に設定します。
2. 現在の編集スコープのコンポーネントのVisibleプロパティを「"visible"」に設定します。

これにより、他のすべてのプロパティスコープは、デフォルトスコープから「"hidden"」プロパティを継承します。