Experience Builderのガイドラインと制限事項
Experience Builderは、ユーザーがダイナミックで魅力的なwebページを簡単に作成できるように設計された強力なツールです。 最適なパフォーマンス、操作性、およびセキュリティを確保するには、ページの設定、ウィジェットの使用、およびレイアウトのカスタマイズを行う際に、特定のガイドラインと推奨事項に従うことが不可欠です。 このドキュメントでは、ユーザーがExperience Builderを使用する際に考慮すべき重要な注意事項および注意事項について詳しく説明します。
ここで説明する情報は、ページとウィジェットの設定、カスタマイズオプション、カスタムコードの処理、セキュリティに関する考慮事項などの重要な側面について説明します。 これらの推奨事項を遵守することで、ユーザーはExperience Builderプロジェクトの効率を最大化し、共通の落とし穴を避け、アップデートと変更にシームレスに適応できます。
ページとウィジェットの設定
最大ページ数
Experience Builderでは、最大1,000ページまで作成できます。 これは上限ですが、不要な複雑さを避けるために戦略的にページを計画することをお勧めします。
ページあたりのウィジェット数
- ハード制限: 1つのページに追加できるウィジェットは最大25個です。
- 推奨される制限:パフォーマンスを向上させるために、使用するウィジェットは1ページあたり10個を超えないようにすることをお勧めします。
- APIベースのウィジェット: ALM API （コースとパス、カテゴリ、学習状況、ソーシャル学習、カレンダー、コンプライアンス、リーダーボードなど）に依存するウィジェットは、1ページあたり10個に制限する必要があります。
- 独立したウィジェット: ALM APIに依存しないHTMLやコンテンツボックスなどのウィジェットは、最大25個のウィジェットまで使用できます。
使い捨てウィジェット
カレンダー、ソーシャルラーニング、コンプライアンス、リーダーボードなどの特定のウィジェットは、1ページに1回のみ使用する必要があります。 特にカレンダーなどのウィジェットでは、セッションを読み込むために大量のリソースを必要とするため、複数回使用するとパフォーマンスの問題が発生する可能性があります。
ウィジェットのサイズ変更のガイドライン
カレンダー、リーダーボード、ソーシャル、コンプライアンスなどのウィジェットは、ページの3分の1以上の幅でレイアウトに配置する必要があります。 最適な表示を実現するには、この幅に最適なシングルカードウィジェットが適しています。 カレンダーやコンプライアンス（展開ビュー）などのウィジェットは、半角レイアウト用に設計されており、優れたユーザーエクスペリエンスを提供します。 他のレイアウトサイズの場合、ウィジェットは利用可能なスペースに合わせてレスポンシブに調整され、使いやすさが維持されます。
推奨サイズのガイドライン内でウィジェットを使用すると、全体的なユーザー操作が向上します。
カスタマイズのガイドライン
初期設定のピクセル距離
垂直方向の距離:ウィジェット間の既定の垂直方向の距離は80ピクセルです。
水平方向の距離:ウィジェット間の既定の水平方向の距離は20ピクセルです。
カスタムCSS
カスタムCSSを使用すると、デフォルトの距離やその他のビジュアルプロパティを上書きできます。
カスタマイズ手順：
- ページエレメントをInspectして、CSSクラスを識別します。
- グローバルレベル、ウィジェットレベルまたはページレベルで変更を適用します。
例えば、ウィジェット間の垂直方向の距離を短縮するには、関連するクラスのCSSプロパティを変更します。
メニューの配置
メニューは、ページの上部または左側に配置できます。 カスタムCSSを使用して、さらに調整できます。
機能固有の推奨事項
ソーシャル学習とゲーミフィケーションウィジェット
- これらの機能が無効になっている場合、管理者は対応するウィジェットをページから手動で削除する必要があります。
- これらの機能を無効にした後もページが機能し、視覚的にも損なわれないように、ページを再設計する必要があります。
カスタムコードの処理
アップデートの影響
- Experience Builderのアップデート後、バックエンドに注入された既存のカスタムコード(HTML、CSS、JS)が正常に機能しない場合がある。
- ユーザーは、更新されたクラス名などの新しいUI変更に合わせてコードを書き換える必要があります。
フロントエンドのサポート
- HTMLウィジェットまたはアカウントレベルのCSS/JSブロックを使用して、管理ポータルに直接カスタムコードを追加します。
免責事項
- カスタムコードは、今後のリリースでは正常に機能しなくなり、調整が必要になる場合があります。 リリースごとにコードを更新する準備をしておいてください。
一般的な推奨事項
パフォーマンスに関する考慮事項
- パフォーマンスの低下を防ぐため、推奨ウィジェットの制限を超えないようにしてください。
- リソースを大量に消費するウィジェット（カレンダーなど）をページに複数回使用すると、ページの読み込み時間に大きな影響を与える可能性があります。
セキュリティに関する考慮事項
- HTMLウィジェット:クロスサイトスクリプティング(XSS)攻撃などのセキュリティの問題はExperience Builderで制御できないため、コードで確実に対処する必要があります。
- カスタムフッター: HTMLまたはCSSを使用してフッターをカスタマイズする場合は、コードがセキュリティのベストプラクティスに準拠していることを確認してください。
変更の解除
Experience Builderの更新により、カスタマイズに関する重大な変更が発生する場合があります。 お客様は、以下を行う必要があります。
- 新しいUI要素に合わせてコードを調整します。
- 更新後にカスタマイズをテストします。
追加情報
カスタムCSSの実装
- ページエレメントを検査し、CSSクラスをコピーし、必要なプロパティを適用して、レイアウトを一括、ウィジェットレベルまたはページレベルでカスタマイズできます。
ウィジェットIDとページID
各ウィジェットとページには、ターゲットとなるCSSの変更に使用できる一意のIDがあります。 これにより、様々なレベルでカスタマイズできます。
- グローバルレベル：すべてのページにCSS変更を適用します。
- ウィジェットレベル：特定のウィジェットにCSS変更を適用します。
- ページレベル：特定のページ内のすべてのウィジェットにCSS変更を適用します。