Experience Builder で、各ウィジェットのデフォルトのスタイル設定を変更して、サイズ、位置、アニメーション、背景、枠線、およびボックスの影などのプロパティをカスタマイズできます。 ウィジェット構成パネルの [スタイル] タブ オプションは、ウィジェットの追加先ページ タイプや、サイズと位置を自動的に制御する親コンテナー (行、列、グリッドなど) によって課される制約によって異なります。
ウィジェットをキャンバス周辺にドラッグして移動およびサイズ変更するのではなく、サイズと位置の明示的な値を設定できます。 [サイズと位置] の設定は、ウィジェットが幅、高さ、位置によってページ上にどのように配置されるかを定義します。これらの値はピクセル単位 ([px]) またはパーセント ([%]) で指定できます。 全画面ページまたはスクロール ページに追加されるウィジェットに適したサイズと位置の設定については、以下のセクションをご参照ください。
注意:
ウィジェットをコンテナー間で移動すると、ターゲット コンテナーに基づき、サイズと位置がデフォルト値にリセットされます。 これは、構成されたウィジェットを保留中のリストから追加したときにも該当します。
ヒント:
ウィジェットを整列し、正確に配置できるよう、キャンバス上でウィジェットをドラッグするとスナップ ラインと距離値が表示されます。あるいは、固定レイアウト (フルスクリーン ページ、ウィンドウ、サイドバー、リストなど) で手動で移動し、サイズ変更する方法もあります。 距離を計算できる場合、値は、ウィジェットからコンテナーの辺までの距離と、近くのウィジェットまでの距離を示します (位置にパーセンテージ、サイズ設定にピクセルを使用するウィジェットは計算できません)。スナップ ラインが表示されると、対応するウィジェットが公開したときのすべての画面解像度でスナップします。
ほとんどのウィジェットに共通するその他のスタイル設定には、次のものがあります。
- [回転] - 指定した度単位の回転角度でウィジェットを回転します。 正の値を入力するとウィジェットは時計回りに回転し、負の値を入力するとウィジェットは反時計回りに回転します。
- [親コンテナー内に維持] - ネストされたウィジェットが親ウィジェットの境界線の外にドラッグされないようにします。
- [アニメーション] - フライ イン、スピン イン、フェード インなどの効果を使用して、目立つアニメーション スタイルを設定します。 また、セクション ビュー間を移動するトランジション モードを設定することもできます。
- [背景] - 塗りつぶし色または画像を選択して、ウィジェットの背景を設定します。 [クイック スタイル] ボタンを使用して、アプリのテーマに合った設定済みのデザインから選択できます。 画像を選択した場合、[フィット]、[塗りつぶし]、[中央揃え]、[タイル]、または [ストレッチ] を使用してウィジェットの枠線内に配置できます。 [フィット] を選択すると、ウィジェットは画像の周りに背景の塗りつぶし色を表示します。
- [枠線] - 枠線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択して、ウィジェットの枠線を設定します。 半径サイズ (ピクセルまたはパーセント) を変更して、ウィジェットの角を作成します。 すべての角に同じ半径を使用することも、それぞれの角で個別に半径サイズを指定することもできます。 [クイック スタイル] ボタンを使用して、アプリのテーマに合った設定済みのデザインから選択できます。
- [ボックスの影] - ウィジェットの周囲に影の効果を追加します。 [クイック スタイル] ボタンを使用して設定済みのデザインから選択するか、次の設定を使用できます。
- [オフセット X] - 影の水平距離を設定します。 負の値にするとウィジェットの左側に影が配置され、正の値にすると右側に配置されます。
- [オフセット Y] - 影の垂直距離を設定します。 負の値にするとウィジェットの上側に影が配置され、正の値にすると下側に配置されます。
- [ぼかしの半径] - ぼかし効果を影に追加します。
- [拡張の半径] - 影のサイズを調整します。
- [色] - 影の色を選択します。
注意:
選択したテーマは、構成オプションの色の選択肢に影響します。 アプリのテーマに含まれていない色を使用したい場合は、[その他] をクリックしてユーザー設定の色を選択できます。
全画面ページのレイアウト
全画面ページをアプリに追加した場合、自由形状のレイアウト内でウィジェットを整理します。 ウィジェットをキャンバス周辺にドラッグして移動およびサイズ変更すると、それに応じて、[スタイル] パネルの [サイズと位置] の設定が更新されます。
サイズ設定は、コンテナーの幅と高さの組み合わせです。 ウィジェットの [幅] と [高さ] の値は、以下の 3 つのモードで設定できます。
- [カスタム] - 特定の値を設定します。
- [ストレッチ] - ウィジェットのコンテナーのサイズに基づいて、サイズを自動的に設定します。
- [自動] - ウィジェットのコンテンツに基づいてサイズを自動的に設定します。 このモードは、動的コンテンツを表示するウィジェットに使用します (このモードは、デフォルトで幅を自動的に制御する列など、レイアウト コンテナーにネストされたウィジェットでは使用できない可能性があります。 たとえば、列ウィジェットにネストされた画像ウィジェットの [幅] 設定では、[ストレッチ] モードと [カスタム] モードしか使用できません)。
注意:
幅が [ストレッチ] または [カスタム] に設定されている場合、エッジをドラッグしてウィジェットをサイズ変更する際、縦横比を維持するよう選択できます。
ウィジェットの位置は、エッジ (左、右、上、下) からコンテナーまでの距離で定義されます。 たとえば、ウィジェットの左エッジと上エッジを、親コンテナーの左エッジと上エッジに対してオフセットする距離を指定できます。 ウィジェットを追加するときに、対応する位置の入力ボックスに値を入力できます。 反対側のエッジの距離を指定するには、ダイアグラムの反対側で [自動に変更] (または [カスタムに変更]) をクリックします。
サイズ モードが異なると、位置の構成も異なります。 たとえば、[幅] が [カスタム] または [自動] に設定されている場合、左エッジか右エッジの距離値を変更すると位置を設定でき、他方の値は自動的に設定されます。 [幅] が [ストレッチ] に設定されている場合、左エッジと右エッジの距離値を変更すると位置を設定でき、幅はコンテナー幅の残りの長さで自動的に設定されます。 [幅] 設定も同様ですが、上エッジと下エッジに対応しています。
ヒント:
また、[スタイル] パネルの上部にあるツールバーのボタンをクリックして位置を変更することもできます。 たとえば、ウィジェットを親コンテナーの水平中央に配置できます。これにより、左と右の位置の値が自動的に設定されます (ダイアグラムの距離入力ボックスは非表示になります)。
両方の設定には、次の単位オプションがあります。
- [px] - ピクセル単位の絶対値。
- [%] - コンテナーの幅と高さのパーセンテージ。
スクロール ページのブロック
スクロール ページをアプリに追加すると、そのレイアウトはブロック内に整理されます。 ブロックは、行ウィジェットで使用したようなマルチフィールドのグリッド レイアウトを使用します。
ブロックには次の [サイズ] と [位置] の設定があります。
- [幅] - 固定幅をページの割合で設定します。
- [高さ] - 高さをピクセル単位で設定するか、[自動] を選択して、ブロックの高さを自動的に設定します。
- [オフセット X] - 水平方向のオフセットをピクセル単位で設定します。
- [オフセット Y] - 垂直方向のオフセットをピクセル単位で設定します。
ヒント:
スクロール ページでウィジェットを表示したままにするには、ウィジェットのツールバーの [ピン] ボタンをクリックします。
ブロック内でネストされたウィジェット
ブロックに追加するウィジェットの幅は、ブロックのグリッド レイアウト内で 1 ～ 12 行の範囲です。 ブロック内でネストされたウィジェットの高さの値のみを指定できます。その幅はグリッドにより制御されます。
[高さ] モードには、次の 3 種類があります。
- [ストレッチ] - 親コンテナーの高さに基づいて、高さを自動的に設定します。 これがデフォルトです。
- [自動] - ウィジェットのコンテンツに基づいて高さを自動的に設定します。
- [カスタム] - 高さの値をピクセル単位で明確に設定するか、コンテナーの高さのパーセンテージとして設定します。
[自動] または [カスタム] を選択した場合、次の [配置] オプションのいずれかを選択できます。
- [上] - ウィジェットをブロックの上に垂直に揃えます。
- [下] - ウィジェットをブロックの下に垂直に揃えます。
- [中央] - ウィジェットをブロックの中央で垂直に揃えます。
グリッド アイテム
グリッド ウィジェットまたはグリッド ページでネストされたウィジェットは、グリッド アイテムになります。 サイズと配置の設定は、グリッド アイテムでは使用できません。 グリッド内のウィジェットのサイズを変更するには、グリッド ウィジェット自体をサイズ変更したり、グリッド アイテム間の枠線をドラッグしたりします。
グリッド ウィジェットまたはグリッド ページの設定で [拡大を許可] をオンにすると、拡大ボタンが表示されます。このボタンをクリックすると、個々のグリッド アイテムがグリッドのエリア全体に一時的に拡大されます。 デフォルトでは、[拡大を許可] をオンにすると、すべてのアイテムに拡大ボタンが表示されます。 ただし、個々のウィジェットでこの設定をオーバーライドできます。 [拡大を許可] チェックボックスは、すべてのグリッド アイテムの設定の [スタイル] タブにも表示されます。 これは、ユーザーが一部のグリッド アイテムだけを拡大できるようにする場合に便利です。
アニメーション
アニメーションを使用すると、ユーザーがアプリを読み込み、ナビゲートするときに、ウィジェットとウィンドウを表示する方法をカスタマイズできます。フライ イン、スピン イン、拡大、縮小などの効果を使用し、目立つアニメーション スタイルを設定します。 また、セクション ビュー間を移動するトランジション モードを設定することもできます。 指定されたアニメーション設定で、次のようなエクスペリエンスを実現できます。
- アプリを読み込む際にウィンドウをスピン インする。
- ページを下にスクロールするとウィジェットがフライ インする。
- セクション ウィジェットのコンテンツを移動すると、後のビューが前のビューをプッシュする。
- カード ウィジェットの上にポインターを合わせると、説明がフェード インする。
次のレベルのアニメーションがサポートされています (上位レベルから下位レベルのアニメーション順にリストされます)。
注意:
下位レベルのアニメーションは、上位レベルのアニメーションをオーバーライドします。 たとえば、行ウィジェットにウィジェットが追加されると、追加されたウィジェットのアニメーション設定が [なし] に設定されている場合に、行のアニメーションが再生されます。 それ以外の場合は、追加されたウィジェットのアニメーションが再生されます。
- ページおよびウィンドウ レベル - フレームワークでサポートされ、ページとウィンドウ設定で使用できるレベルです。ページまたはウィンドウのアニメーション、およびページまたはウィンドウに直接追加されたすべてのウィジェット (第 1 レベルのウィジェット) のアニメーションを制御します。
注意:
レイアウト ウィジェットにネストされたウィジェットは、第 1 レベルのウィジェットではありません。 ネストされたウィジェットを見分けるには、アウトラインを確認します。
- コンテナー レベル - フレームワークでサポートされ、ブロック、固定パネル、サイドバー、行、列、グリッド、セクション ウィジェットの [スタイル] タブで利用できます。このレベルでは、コンテナーの表示方法に加え、コンテナーに直接追加されたウィジェットが表示される際のアニメーションを制御します (ただし、追加されたウィジェットにネストされたウィジェットは対象外です)。 このレベルでは、セクション ウィジェットのビューを切り替えるためのアニメーションも制御します。
- 単一ウィジェット レベル - フレームワークでサポートされ、ウィジェットの [スタイル] タブで使用できます。このレベルでは、各ウィジェットがどのように表示されるかを制御します。
- 内部ウィジェット レベル - ウィジェットでサポートされ、ウィジェットの [コンテンツ] タブで使用できます。このレベルでは、ウィジェット内のユーザー操作のアニメーションを制御します。 たとえば、ブックマーク ウィジェットでは、ユーザーが別のブックマークに切り替えるとトランジション効果が再生され、カード ウィジェットではポインターを合わせると詳細が表示されるアニメーションが用意されています。
セクション ウィジェットには、2 つのアニメーション設定があります。 [イン] アニメーション設定は、セクション パネルの表示効果を制御します。[トランジション] は、ビューのアニメーションを制御します。 [ビュー] タブの設定は、ビュー パネルのトランジション方法を制御します。 [ウィジェット] タブの設定は、ビュー内のウィジェットの表示方法を制御します。 セクション ウィジェットのコンテンツがページに表示される際 (ページが読み込まれるか、スクロールしたとき)、現在のビューのウィジェット アニメーションが [イン] アニメーションとともに再生されます。 ビューを切り替えると、ウィジェット アニメーションはビュー アニメーションの後に再生されます。
アニメーションの設定
[アニメーション設定] パネルを開くには、サムネイルか [変更] ボタンをクリックします。 [フロート イン] や [ズーム イン] などのアニメーション サムネイルをクリックして選択すると、キャンバス上でアニメーションをプレビューできます。 必要に応じて、次の追加設定を構成します。
- [効果] - 滑らか、不安定、ゆっくりなど、連続的で自然なマイクロ効果オプションを提供します。
- [方向] - フライ インやワイプ インなどの該当する効果に対し、動作方向を定義します (上、下、左、右)。
レイアウト コンテナー (ブロック、固定パネル、サイドバー、行、列、グリッド) のアニメーション設定には、コンテナーに直接追加されたウィジェット用のアニメーションを設定する [含まれるウィジェット] の設定もあります。 [効果] と [方向] に加え、コンテナー内のウィジェットについて次の設定を構成できます。
- [開始] - コンテナー ウィジェットのアニメーションを基準にして、コンテナー内のウィジェットのアニメーションがいつ開始するかを定義します。 コンテナー内のウィジェットのアニメーションをコンテナー ウィジェットのアニメーションと同じタイミングで再生するには、[直前の操作と同時] を選択します。 コンテナー ウィジェットのアニメーションが完了した後で、コンテナー内のウィジェットのアニメーションを再生するには、[直前の操作の後] を選択します。
- [アニメーションを再生] - コンテナー内のウィジェットが複数ある場合にアニメーションをどのように再生するかを定義します。
- [すべて同時] - 含まれるすべてのウィジェットのアニメーションを同時に再生します。
- [1 つずつ] - 含まれるすべてのウィジェットのアニメーションを 1 つずつ再生します。
アニメーションをプレビューするには、[プレビュー] ボタンをクリックします。