1. その他の開発タスク

スプライトを使用してエクスペリエンス エディターのパフォーマンスを向上させる

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

エクスペリエンス エディターでのページの読み込み時間を短縮するために、スプライトを使用して画像リクエストの数を減らすことができます。既存のリボン コントロールでスプライトを使用できるようにするか、新しいリボン コントロールを作成して、スプライトと互換性のあるテンプレートに基づいて新しい項目を作成することができます。

新しいスプライトを作成する

新しいスプライト アイコンまたはカスタムのスプライト アイコンをエクスペリエンス エディターのリボンで使用できるようにする場合は、新しいスプライト ファイルを作成してから、スプライト アイコンのコレクションをそれに追加できます。

新しいスプライトを作成するには:

  1. コア・データベースで、Spritesフォルダ (/sitecore/content/Applications/WebEdit/Sprites) を右クリックし、InsertをクリックしてからSpriteをクリックします。

    The Insert menu for the Sprites folder in the Content Editor

  2. 新しいスプライトについては、Spriteセクションで、次の2つのフィールドを指定します。

    • Image Url – スプライト画像の出力パスを指定します。

    • StylesheetUrl – スプライトスタイルシートの出力パスを指定します。

    The Sprite section on a Sprite item in the Content Editor
    メモ

    Stylesheet Url To Includeフィールドはオプションです。これを使用して、スプライト スタイルシート ファイルに含まれる基本的なスタイルシート ファイルを定義できます。

  3. 新しいスプライトの下に、カスタムスプライトアイコンを追加できるようになりました。エクスペリエンス エディターの初期化中に、Sitecoreはすべてのスプライト リソース (スプライト イメージとスタイルシート) を再生成します。

カスタムアイコンをスプライトに追加する

新しいスプライトを作成したら、スプライトアイコンを追加できます。

手記

スプライト アイコンをスプライトに追加する前に、アイコンをアップロードしてSitecoreで利用できるようにする必要があります。

カスタムアイコンをスプライトに追加するには:

  1. コア・データベースで、Sprites ・フォルダ(/sitecore/content/Applications/WebEdit/Sprites)に移動します。

  2. 関連するスプライトアイテムまたはカスタムアイコンを追加するフォルダーを右クリックし、「 Insert 」をクリックしてから、「 Sprite Icon」をクリックします。

    The Insert menu on a sprite item in the Content Editor

  3. スプライトアイコンには、以下を指定します。

    • SpriteセクションのStylesheet Classフィールドで、CSSクラス名を指定します。

      The Stylesheet Class field

    • AppearanceセクションのIconフィールドで、アイコンへのパスを指定します。

      特定のアイコンへのパスを見つけるには、Open iconをクリックします。 Change iconダイアログボックスで、関連するアイコンに移動し、OKをクリックします。

      The Icon field on a sprite icon item

既存のリボン コントロールにスプライト アイコンを使用する

画像の代わりにエクスペリエンス エディターのリボンにスプライト アイコンを読み込むには、既存のリボン コントロールのスプライト サポートを有効にします。

スプライトのサポートを有効にし、既存のリボン コントロールにアイコンを割り当てるには:

  1. Coreデータベースで、/sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Experience Editor/に移動し、関連するリボン コントロールをクリックします。

  2. ContentタブのSpriteセクションで、次の操作を行います。

    • Enabledチェック ボックスをオンにして、現在のリボン コントロールのスプライト サポートを有効にします。このようにして、画像の代わりにスプライトアイコンが読み込まれます。

    • Sprite Iconフィールドで、現在のリボン コントロールに使用するスプライト アイコンを指定します。

    The Sprite Icon field

  3. 変更を保存します。

新しいスプライト互換リボン コントロールを作成する

新しいカスタム リボン コントロールを作成するときは、新しいリボン コントロールをスプライト互換テンプレートに基づいて作成することで、スプライト互換にすることができます。

スプライト互換リボン項目を使用するには:

  • リボン チャンク項目の下にスプライト互換のリボン項目を追加し、通常どおりにプレゼンテーションの詳細を構成します。

    スプライトと互換性のあるすべてのリボン テンプレートは、Coreデータベースの ( Ribbon Controlsフォルダー ( )/sitecore/templates/System/Experience Editor/Ribbon Controlsにあります。

    The templates in the Ribbon Controls folder
この記事を改善するための提案がある場合は、 お知らせください!