Tailwind Logo

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

XM Cloud

公開日: 2024-02-27

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

標準で提供している Grid

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

  • Tailwind
  • Bootstrap 5 （デフォルトの値）
  • Bootstrap 4
  • Bootstrap 3
  • Foundation
  • Grid 960
xmcgrid01.png

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

Bootstrap 5 での動作

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

xmcgrid02.png

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

xmcgrid03.png

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

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

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

TypeScript 
  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 では以下のコードを格納しています。

xmcgrid04.png

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

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

Tailwind.css での動作確認

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

xmcgrid05.png

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

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 のサイズに対してアイテムで定義されています。

xmcgrid06.png

まとめ

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

関連タグ