XM Cloud が提供しているグリッドの動作を確認する

公開日 :

以前に XM Cloud で利用する Next.js のグリッドの仕組みに関して少し取り上げましたが、動作に関して紹介をしていませんでした。今回はこれを取り上げたいと思います。

標準で提供している Grid

Sitecore XM Cloud のサンプルで提供しているグリッドは以下のようになっています。この設定は、サイトの Settings の中で Grid として提供されています。

  • Tailwind

  • Bootstrap 5 （デフォルトの値）

  • Bootstrap 4

  • Bootstrap 3

  • Foundation

  • Grid 960

random desc

今回は Bootstrap 5 と tailwind の２つで動作検証をします。

Bootstrap 5 での動作

Basic site のコンテンツは Bootstrap 5 で作成されているため色々な値が入ってきますが、動作確認をするためにプレーンな状況でコードを確認していきたいと思います。まず、Title と RichText コンポーネントを配置します。

random desc

実際にページを表示した際には、以下のようなコードが出力されているのがわかります。

random desc

リッチテキストのコンポーネントのコードは以下のように記載されています。

<div class="component rich-text col-12">
  <div class="component-content">
    <div>
      <p>RichText Sample</p>
    </div>
  </div>
</div>

リッチテキストの処理をしているコンポーネントは components/RichText.tsx に記載されており、一部のコードを参照すると以下のようになっています。

  return (
    <div
      className={`component rich-text ${props.params.styles.trimEnd()}`}
      id={id ? id : undefined}
    >
      <div className="component-content">{text}</div>
    </div>
  );

このコードを見ると以下のような動きをしているのがわかります。

  • <div className={`component rich-text まではこのコンポーネント固有のコード

  • ${props.params.styles.trimEnd() はコンポーネントに追加される追加の属性

  • <div className="component-content"> の中にアイテムで持っている RichText のデータを表示する

アイテムを確認すると、RichText では以下のコードを格納しています。

random desc

Sitecore のアイテムからデータを取得して HTML に関して記載していることを確認することができました。

実際に作成したコンポーネントを削除して、次の Grid での動作確認をしていきます。

Tailwind.css での動作確認

改めて空っぽのページに対して同じようにコンポーネントを配置します。出力は以下のようになっています。

random desc

HTML のコードを確認すると、以下のようになっています。

<div class="component rich-text basis-full">
  <div class="component-content">
    <div>
      <p>Sample RichText</p>
    </div>
  </div>
</div>

Bootstrap 5 の場合にはコンポーネントの class に col-12 が指定されていますが、この部分が basis-full に変わっていることがわかります。それぞれのフレームワークで全幅（横幅 100%）を利用する際の記述ができているのがわかります。

このように、コンポーネントを配置する際に、サイトで指定している Grid で必要となるコードが補完されているのが変わります。

ではこの値はどこで定義されているのでしょうか？実は、/sitecore/system/Settings/Feature/Experience Accelerator/GridTailwind/Tailwind Grid Definition に Tailwind を利用する際のグリッドの記述方法が定義されており、Mobile の 12 のサイズに対してアイテムで定義されています。

random desc

まとめ

今回は Grid の選択がどういう形でコードに反映されるのか？というのを確認することができました。次回は、Tailwind.css を利用していくにあたって、スタイルシートの記述方法を少しまとめていきます。