---
title: "エクスペリエンスエディターのパフォーマンスを向上させるためにスプライトを使います"
slug: "use-sprites-to-improve-the-performance-of-the-experience-editor"
abstract: "エクスペリエンスエディターでスプライトを使って画像リクエスト数を減らすことでページ読み込み時間を短縮できます。"
---
# エクスペリエンスエディターのパフォーマンスを向上させるためにスプライトを使います

エクスペリエンスエディターでページロード時間を短縮するには、スプライトを使って画像リクエスト数を減らすことができます。既存のリボンコントロールでスプライトを使えるようにするか、新しいリボンコントロールを作成してスプライト対応のテンプレートをベースにして新しいアイテムを作成することもできます。

## 新しいスプライトを作成してください

Experience Editorのリボンで新しいまたはカスタムのスプライトアイコンを利用できるようにしたい場合、新しいスプライトファイルを作成し、そこに自分のスプライトアイコンコレクションを追加できます。

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

1.  Coreデータベースで*Sprites*フォルダ(*/sitecore/content/Applications/WebEdit/Sprites*)を右クリックし、「 **挿入** 」をクリックし、その後「 **スプライト**」をクリックします。
    
    ![The Insert menu for the Sprites folder in the Content Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/93/sitecore-experience-manager/images/Sprite1.png)
    
2.  新しいスプライトについては、**スプライト** セクションで以下の2つのフィールドを指定します:
    
    -   **画像URL(画像URL** )– スプライト画像の出力パスを指定します。
    -   **StylesheetUrl** – スプライトのスタイルシート出力パスを指定します。
    
    ![The Sprite section on a Sprite item in the Content Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/93/sitecore-experience-manager/images/Sprite2.png)
    
    > !注「スタイルシートURL To Included」フィールドはオプションです。スプライトスタイルシートファイルに含まれる基本的なスタイルシートファイルを定義するために使うことができます。
    
3.  新しいスプライトの下には、カスタムスプライトアイコンを追加できます。エクスペリエンスエディターの初期化中、Sitecoreはすべてのスプライトリソース(スプライト画像とスタイルシート)を再生成します。
    

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

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

> !注スプライトアイコンを追加する前に、まずアイコンをアップロードしてSitecoreで利用可能にする必要があります。

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

1.  Coreデータベースで*Sprites*フォルダ(*/sitecore/content/Applications/WebEdit/Sprites*)に移動します。
    
2.  該当するスプライトアイテムかカスタムアイコンを追加したいフォルダを右クリックし、「 **挿入** 」をクリックしてから「 **スプライトアイコン**」をクリックします。
    
    ![The Insert menu on a sprite item in the Content Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/93/sitecore-experience-manager/images/Sprite3.png)
    
3.  スプライトアイコンについては、以下を指定してください:
    
    -   **スプライト**セクションの**スタイルシートクラス**フィールドで、CSSクラス名を指定します。
        
        ![The Stylesheet Class field](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/93/sitecore-experience-manager/images/Sprite4.png)
        
    -   **外観**セクションの**アイコン**フィールドで、アイコンへの経路を指定します。
        
        特定のアイコンへのパスを見つけるには、「 **アイコンを開く**」をクリックしてください。 **「アイコン変更** 」ダイアログボックスで、該当するアイコンに移動して **「OK**」をクリックします。
        
        ![The Icon field on a sprite icon item](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/93/sitecore-experience-manager/images/Sprite5.png)
        

## 既存のリボンコントロールにはスプライトアイコンを使います

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

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

1.  Coreデータベースで */sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Experience Editor/* に移動し、該当するリボンコントロールをクリックしてください。
    
2.  **コンテンツ**タブの**スプライト**セクションで:
    
    -   現在のリボンコントロールのスプライトサポートを有効にするには、「 **有効」** チェックボックスを選択してください。この方法では、画像の代わりにスプライトアイコンが読み込まれます。
    -   ス **プライトアイコン** フィールドで、現在のリボンコントロールに使いたいスプライトアイコンを指定します。
    
    ![The Sprite Icon field](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/93/sitecore-experience-manager/images/Sprite6.png)
    
3.  変更を保存してください。
    

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

[新しいカスタムリボンコントロールを作成する](https://doc.sitecore.com/xp/ja/developers/93/sitecore-experience-manager/customize-the-experience-editor-ribbon.html "Customize the Experience Editor ribbon")際、スプライト互換テンプレートを基にリボンコントロールを基にしてスプライト対応にできます。

スプライト互換リボンアイテムを使用するには:

-   リボンチャンク項目の下にスプライト対応のリボンアイテムを追加し、通常通りプレゼンテーションの詳細を設定します。
    
    すべてのスプライト互換リボンテンプレートは、Coreデータベースの*Ribbon Controls*フォルダ(*/sitecore/templates/System/Experience Editor/Ribbon Controls*)にあります:
    
    ![The templates in the Ribbon Controls folder](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/93/sitecore-experience-manager/images/Sprite7.png)