Tailwind Logo

XM Cloud で Tailwind CSS のサンプルサイトを作成 - その5 シリアライズ

XM CloudCLIHeadless SXA

公開日: 2024-06-27

Sitecore XM Cloud で作成したアイテムに関しては、Sitecore CLI のツールを利用して YAML ファイルとしてシリアライズをすることが出来ます。今回は、この仕組みを利用してサイトの情報を GitHub で管理できるようにします。

今回はシリアライズの手順に関しては、YouTube のチュートリアルを参考にしながら進めていきます。

なお、途中で紹介されている GitHub Gist のコードは以下の URL になります。

サイトの追加設定

作成されているサイトだけではなく、実際に使っていくうえで必要となる仕組みもこの機会に追加していきます。まず、今後コンポーネントウィザードを利用してカスタムコンポーネントを作っていくことになるため、以下のように Custom というフォルダを作成します。

  • /sitecore/layout/Renderings/Feature/Tailwindcss
  • /sitecore/system/Settings/Feature/Tailwindcss
  • /sitecore/templates/Branches/Feature/Tailwindcss
  • /sitecore/templates/Feature/Tailwindcss

これでシリアライズの準備は完了です。

シリアライズの対象を決める

Sitecore CLI を利用することで、Sitecore で作成したアイテムをシリアライズ(テキストデータ)をしてエクスポートが可能です。その逆で、シリアライズで出力しているデータをアイテムとしてインポートすることも可能です。

今回はシンプルなプロジェクトを作るために、シリアライズに関してもう少し細かく設定をしていきます。コマンドラインに関して利用する詳細な情報は以下のページに記載されています。

今回は動画で紹介されている Gist GitHub のコードを src\tailwindcss.module.json として作成します。用意されているテンプレートはいくつか変更する必要があります。

  • <SITE_COLLECTION_NAME> : Site Collection の名前を設定します(今回は Tailwindcss )
  • <SITE_NAME> : サイトの名前を設定します(今回は Tailwindcss )

テンプレートとして用意されている項目のうち、しばらく使うことが無いアイテムが含まれています。以下のコードの部分を削除してください(3か所あります)。

JSON
      {
        "name": "layoutsProject",
        "path": "/sitecore/Layout/Layouts/Project/Tailwindcss",
        "allowedPushOperations": "CreateUpdateAndDelete"
      },

      {
        "name": "branchesProject",
        "path": "/sitecore/templates/Branches/Project/Tailwindcss",
        "allowedPushOperations": "CreateUpdateAndDelete"
      },

      {
        "name": "layoutsFeature",
        "path": "/sitecore/Layout/Layouts/Feature/Tailwindcss",
        "allowedPushOperations": "CreateUpdateAndDelete"
      },

また、コンポーネント作成時に使うフォルダが含まれていないため、以下のコードを追加します。

JSON
      {
        "name": "projectRenderingsFeature",
        "path": "/sitecore/layout/Renderings/Feature/Tailwindcss",
        "allowedPushOperations": "CreateUpdateAndDelete"
      },

これで準備完了です。実際のコードはこちらにあります。

このシリアライズの設定では scope を利用してアイテムのシリアライズのルールを設定しています。ルールの内容は以下の通りです。

  • singleItem : 該当するアイテムのみ
  • itemsWithChildren : アイテムと子アイテム
  • itemsAndDescendants : アイテムとその配下のアイテム
  • descendantsOnly : 配下のアイテムのみ
  • ignored : すでに設定したアイテム以外は対象としない

詳しくは以下のページを参照してください。

シリアライズを実行する

今回はローカルの環境で作業をしているため、以下のコマンドでローカルの Sitecore につながります。

PowerShell
dotnet sitecore login

ログインが完了したところで、以下のコマンドでシリアライズを実行します。

PowerShell
dotnet sitecore ser pull

この結果、items のフォルダに多くの Yaml ファイルが作成されました。

create-tailwindcss-sample-25.png

インポートの確認

すでに作成されたファイルを利用して、新しい環境を再現できるか確認をします。ローカルで起動している Docker のコンテナを停止させて、ローカルのデータを削除、改めて新しいインスタンスを起動します。

PowerShell
docker compose down
cd docker
.\clean.ps1
cd ..
.\up.ps1

これで稼働していたデータが消去されて、クリーンな CMS のインスタンスが起動します。

create-tailwindcss-sample-26.png

今度はシリアライズしたデータを Sitecore 側に反映させます。

PowerShell
dotnet sitecore ser push
create-tailwindcss-sample-27.png

完了後、コンテンツエディターにアクセスするとサイトが正しくインポートされていることがわかります。

create-tailwindcss-sample-28.png

まとめ

今回はサイトを作成して、シリアライズを実行して CMS のデータをエクスポート、インポートをすることが出来ました。これにより、アイテムのデータを GitHub で管理することが可能となるため、ブランチと XM Cloud の環境を組み合わせて開発、テスト、展開までのプロセスを管理することが可能となります。

今回までのコードに関しては、以下のブランチで確認できます。

参考情報

関連タグ