レンダリング バリアントを作成する

概要

レンダリングでフィールドを動的にレンダリングする方法を説明します。

SXA には、デフォルトのレンダリングとレンダリング バリアントのセットがあります。レンダリング バリアントは、デフォルトのレンダリングを変更して適用するものです。再利用性を高めるために、デザイナーとフロントエンドの開発者は新しいレンダリング バリアントを作成することもできます。これにより、作成者はより多くのコンテンツ表示方法を使用できるようになります。

コンテンツ エディターでバリアントを追加することで、レンダリングの独自のバリエーションを作成できます。

レンダリング バリアントを作成するには:

  1. コンテンツ エディターで、サイトをクリックして プレゼンテーション/レンダリング バリアント フォルダーを開きます。このフォルダーには、バリアントを許可するすべてのレンダリングが一覧表示されます。

    注記

    レンダリングをフォルダーに追加するには、管理者に連絡してください。

  2. バリアントを追加するレンダリングを右クリックし、[挿入]、[バリアント定義] の順にクリックします。

    バリアント定義を挿入
  3. 名前を入力して、[OK] をクリックします。

  4. [バリアント詳細] セクションの次のフィールドに情報を入力します。

    • [リンク ターゲットとして使用されるフィールド]: 対象アイテムのフィールド名を入力します。このクラスは、リストとナビゲーション アイテムのマークアップ (li HTML要素) に追加されます。このリンクは、[リンク]、[プリフィックスをリンクにする]、[サフィックスをリンクにする] チェック ボックスが選択されている場合にすべてのリンクを上書きするために使用されます。

    • [許可されるテンプレート]: バリアントを使用できるページを指定します。関連するページ テンプレートをクリックし、右矢印をクリックして選択済みアイテムのリストに移動し、[保存] をクリックします。選択済みテンプレートがない場合は、バリアントはすべてのページで使用できます。

    • [互換性のあるレンダリング]: レンダリング バリアントを他のレンダリングで使用できるようにします。たとえば、ページ コンテンツのレンダリング バリアントの場合、"互換性のあるレンダリング" フィールドで Title を指定すると、Title レンダリングにもレンダリング バリアントを使用できます。

    • [CSS クラス]: レンダリング コンテンツ要素にレンダリングするクラスを指定します。例:

      <div class="component title customClass col-xs-12">
          <div class="component-content">
      <div class="field-title">S</div>    
      </div>
      </div>
      
    • [アイテム Css クラス フィールド]: CSS クラスが取得されクラス属性にレンダリングされる、レンダリングされたアイテムのフィールド名を指定します。ナビゲーション レンダリングでのみサポートされています。

  5. オプションで、バリアントのサムネイル画像を [アピアランス (外観と動作)] セクションで追加できます。この画像はバリアント ドロップダウン ボックスに表示され、コンテンツ編集者が目的に最も適したバリアントを選択するのに役立ちます。

    コンテンツ エディター

    エクスペリエンス エディター

    [アピアランス (外観と動作)] セクションでバリアントのサムネイルを追加します
    サムネイルを確認してからレンダリング バリアントを選択します。

    サムネイルのないレンダリング バリアントは名前のみが表示されます。

    サムネイルが指定されていない場合、バリアントは名前のみを表示します。
  6. 表示されるフィールドを定義するには、子アイテムをレンダリング バリアントに追加し、バリアントを右クリックして、[挿入] をクリックしてから、該当するアイテムをクリックします。

    レンダリング バリアントで使用できる子アイテムは次のとおりです。

    • [フィールド]: フィールド名とその他のフィールド値を表示します。

    • [日付]: 日付と時間をカスタム形式で表示します。カスタム形式で日付と時刻を表示できるようにするには、日付アイテムを使用する必要があります。このアイテムはフィールド アイテムに似ていますが、日付と時刻のフォーマットを選択できる「日付フォーマット」というフィールドが追加されています。フィールド アイテムと同様に、日付アイテムはフォールバック アイテムとして使用でき、独自のフォール バック アイテムを定義できます。

      注記

      フィールドとバリアントの詳細については、下表で説明します。

    • [編集フレーム]: 編集モードで使用できるバリアント アイテム。

    • [HTML タグ]: ユーザーが HTML の終了タグをレンダリングできるようにします。

    • [モデル]: 現在のモデルのプロパティを表示します。SXA レンダリング モデルは Sitecore.XA.Foundation.Mvc.Models.RenderingModelBase から継承します。"プロパティ パス" フィールドに、表示するプロパティへのパスを入力できます。

    • [モデル反復子]: モデルのリストからプロパティを表示します。

    • [プレースホルダー]: ユーザーがレンダリングを追加できるようにするプレースホルダーをレンダリングします。ユーザーがこのプレースホルダー内のレンダリングのコンテキストを切り替えられるようにするには、[バリアント詳細] セクションに移動し、[コンポーネント コンテキストを現在レンダリングされているアイテムに切り替え] チェックボックスをオンにします。

      プレースホルダー内のレンダリングに対してコンテキストの切り替えを有効にします。
    • [参照]: 参照アイテムのフィールドを表示します。参照アイテムのフィールドを表示する場合は、このフィールドを [パススルー フィールド] で定義できます。このバリアント フィールドは、LinkField (GeneralLink、DropLink)、FileField (File)、ImageField (Image)、および ReferenceField (Droptree) のフィールドに使用できます。参照アイテムには、別の参照アイテムを子アイテムとして含めることができます。これは、参照アイテムのツリーを作成して、参照アイテムで参照されているアイテムからフィールドを表示する場合に便利です。

    • [レスポンシブ画像]: 画像のデフォルトのサイズと、許容されるサイズおよび幅を定義できます。画像をレスポンシブにするということは、ページ上の画像のサイズと画面の解像度に基づいて、ブラウザーが異なるサイズの画像を表示することを意味します。[バリアント 詳細] セクションに入力された値は、srcset 属性にまとめられます。以下のスクリーンショットの値により、次の img タグが生成されます。

      バリアントの詳細は srcset 属性にまとめられます。
    <img src="/-/media/Project/Tenant/Site/26056130_2115225655366272_5152181870065454436_n/MyImage.JPEG?w=400&amp;hash=C54AFF8A74289E7B0A776137DFF1D4F89DDEFF93" alt="Simple description of the image" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" srcset="/-/media/Project/Tenant/Site/26056130_2115225655366272_5152181870065454436_n/MyImage.JPEG?w=280&amp;hash=DB3A5BEB52094FC6C547F04211070DE715F458D3 280w,/-/media/Project/Tenant/Site/26056130_2115225655366272_5152181870065454436_n/MyImage.JPEG?w=440&amp;hash=247F0C11B22A5339E5913F9C4EC52361D1D2A1F2 440w,/-/media/Project/Tenant/Site/26056130_2115225655366272_5152181870065454436_n/MyImage.JPEG?w=800&amp;hash=D10309E3D24FF417E3194419240075419EF353B8 800w">
    
    • [クエリ]: 現在のコンテキスト アイテムで実行されるクエリを指定できます。これにより、子アイテムのクエリや SXA トークンの使用が可能になります。たとえば、特定のテンプレートの子アイテムに対してのみレンダリング バリアントを表示する場合などです。クエリは、query で開始して、それに続けて標準の Sitecore クエリ構文を使用する必要があります。Sitecore クエリを $home や $site などの SXA トークンと組み合わせることができます。

    • [セクション]: グループの作成に使用されます。[セクション] には、[タグ] ("div" などの、セクションのラッピング要素を作成する) や [CSS クラス] (css クラスをラッピング タグに追加する) などのフィールドが含まれます。セクション アイテムをネストして、より複雑なバリアント構造を作成できます。

    • [テンプレート]: HTML の一部をレンダリングするために使用するテンプレートをユーザーが定義できるようにします。

    • [テキスト]: テキストを表示します。説明などのカスタム文字列をレンダリングするために使用されます。次のフィールドを使用できます: [テキスト]、[タグ] (テキストをラップする追加のタグを定義する)、[CSS クラス] (タグに追加される css クラス)、[リンク] (選択すると、追加でカスタム テキストが現在のアイテムを指すハイパー リンクによってラップされる)。

    • [トークン]: SXA は次のトークンをサポートします: $id (アイテムの ID をレンダリングする)、$size (添付されるアセットのサイズを整える), $name (アイテムの場合は名前をレンダリングする)、$FileTypeIcon (ファイル拡張子と同じクラスの css の span をレンダリングする)。カスタム パイプラインである resolveVariantTokens を使用して、バリアント トークンのセットを拡張できます。

    • [コンポーネント]: コンポーネントを埋め込むことができます。たとえば、News heading の場合、Breadcrumb とタグのレンダリングを含むバリアントを作成できます。ページネーション コンポーネントの埋め込みはサポートしていません。

      SXA-component-rendering-variant.png

      [レンダリング アイテム] フィールドでレンダリングを選択できます。"レンダリング パラメーター" フィールドで、データソースを選択できます。データソースを空のままにすると、フィールドのレンダリングに通常使用されるアイテムがデータソースとしてコンポーネントに提供されます。レンダリング パラメーターを設定する前に、レンダリング アイテムを指定して保存する必要があります。

    • [Scriban]: HTML の一部をレンダリングするために使用する Scriban テンプレートをユーザーが定義できるようにします。

    注記

    Scriban アイテムの下でコンポーネント バリアントを使用する場合、コンポーネントで複合コンポーネントやページネーション コンポーネントを使用することはできません。Sitecore は、Scriban テンプレートの下でもプレースホルダーのあるコンポーネントを使用しないことをお勧めします。これらのコンポーネントはページで正しくレンダリングされない可能性があるためです。

    追加するアイテムに応じて、次のフィールドを設定できます。

    フィールド

    バリアント詳細

    タグ

    レンダリングされたフィールド コンテンツをラップするために使用する HTML タグ。例: div 

    空のままにすると、フィールド コンテンツはラップされないままになります。

    選択したタグが無効な HTML マークアップとならないようにする必要があります。無効な HTML マークアップの場合、エクスペリエンス エディターは正しく動作せず、編集者はコンテンツ ページのアイテム フィールドを編集できません。たとえば、両方の <p> タグをレンダリングするようにネストされたコンポーネントを含むアイテム プレゼンテーションの場合です。

    <p>My <p>text</p> which gives trouble</p>

    フィールド名

    コンテンツのレンダリングに使用されるアイテムのフィールドの名前。

    プレフィックス

    文字列値をプレフィックスとして追加します。

    サフィックス

    文字列値をサフィックスとして追加します。

    リンク

    フィールド コンテンツをラップするハイパーリンクを設定するかどうかを選択します。

    [Unwrapped] - フィールドはリンク (<a href="" … /> HTML 要素) でラップされません。

    [Wrapped] - フィールドは常にリンク (<a href="" … /> HTML 要素) でラップされます。

    [Wrapped (空ではない場合)] - フィールドは、空でない場合にのみ、リンク (<a href="" … /> HTML 要素) でラップされます。

    プリフィックスをリンクにする

    フィールド コンテンツをラップするハイパーリンクを設定するかどうかを選択します。

    [Unwrapped] - フィールドはリンク (<a href="" … /> HTML 要素) でラップされません。

    [Wrapped] - フィールドは常にリンク (<a href="" … /> HTML 要素) でラップされます。

    [Wrapped (空ではない場合)] - フィールドは、空でない場合にのみ、リンク (<a href="" … /> HTML 要素) でラップされます。

    サフィックスをリンクにする

    フィールド コンテンツをラップするハイパーリンクを設定するかどうかを選択します。

    [Unwrapped] - フィールドはリンク (<a href="" … /> HTML 要素) でラップされません。

    [Wrapped] - フィールドは常にリンク (<a href="" … /> HTML 要素) でラップされます。

    [Wrapped (空ではない場合)] - フィールドは、空でない場合にのみ、リンク (<a href="" … /> HTML 要素) でラップされます。

    ダウンロード リンク

    ダウンロード属性を持つハイパーリンクを設定する場合にオンにします。

    CSS クラス

    タグに Css クラスを追加します。"タグ" フィールドが指定されていない場合、CSS クラスはレンダリングされません。

    編集可能状態

    レンダリングされたフィールドを編集する場合にオンにします。

    日付形式

    日付形式を指定します。

    空白の場合レンダリングします

    フィールドが空のときは空の要素をレンダリングする場合にオンにします。

    パススルー フィールド

    ネストされたアイテムのフィールド名を定義します。

    テキスト

    レンダリングするテキストです。

    テンプレート

    コンポーネント バリアント HTML の一部をレンダリングする Scriban テンプレートを定義します。

    トークン

    特別なトークンを使用して、特定のフィールド値の書式を設定します。サポートされているトークンは次のとおりです。

    $Size: サイズ単位に応じてファイルのサイズを表示します。

    $FileTypeIcon: ファイルの拡張子に応じてアイコンを表示します。

    クエリー

    現在のコンテキスト アイテムで実行されるクエリを指定します。例:

    すべての子アイテムを取得するには:

    query:./*

    現在のアイテム以下のページ テンプレートのすべてのアイテムを取得するには:

    query:..//*[@@templatename='Page']

    現在のサイトのホーム アイテム以下のページ テンプレートのすべてのアイテムを取得するには:

    query:$site/*[@@name='Home']//*[@@templatename='Page']

    結果の最大数

    返されるアイテムの数を制限する場合に、数値を入力します。

    プロパティ パス

    "プロパティ パス" フィールドに、表示するプロパティへのパスを入力できます。たとえば、Item.Paths.Path の場合は Model から Item プロパティにアクセスし、さらに掘り下げて Paths プロパティ、Path 文字列の順にアクセスします。

    "プロパティ パス" フィールド
    Item.Paths.Path の例

    データ属性

    レンダリング バリアント アイテムによって生成された HTML 要素にデータ属性を追加します。

    リンク属性

    レンダリング バリアントによって生成されたリンク要素にリンク属性を追加します。

    ボタン

    フレーム ボタンを編集します。ボタンを選択するには、/sitecore/コンテンツ/Applications/WebEdit/Edit Frame Buttons に移動します。

    プレースホルダー キー

    プレースホルダーのレンダリングに使用するプレースホルダー キーを定義します。

    レンダリング アイテム

    レンダリング バリアント レンダラーで使用するレンダリングを選択します。

    レンダリング パラメーター

    レンダリング バリアント レンダラー用のレンダリング パラメーターを指定します。

    デフォルト サイズ

    レスポンシブ画像のデフォルトのサイズを指定します。レスポンシブ画像の構文を生成するために使用されます。例:

    img srcset="photo-author1-320w.jpg 320w,
                photo-author1-480w.jpg 480w,
                photo-author1-800w.jpg 800w"
    sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,800px"
    src="photo-author1-800w.jpg" alt="Blog author 1"

    サイズ

    レスポンシブ画像のメディア条件を定義し、どの画像サイズを選択するのが最適かを示します。レスポンシブ画像の構文を生成するために使用されます。次に例を示します。

    img srcset="photo-author1-320w.jpg 320w,
                photo-author1-480w.jpg 480w,
                photo-author1-800w.jpg 800w"
    sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,800px"
    src="photo-author1-800w.jpg" alt="Blog author 1"

    レスポンシブ画像に設定可能な幅を指定します。レスポンシブ画像の構文を生成するために使用されます。次に例を示します。

    img srcset="photo-author1-320w.jpg 320w,
                photo-author1-480w.jpg 480w,
                photo-author1-800w.jpg 800w"
    sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,800px"
    src="photo-author1-800w.jpg" alt="Blog author 1"