前回はコンポーネントに画像、テキストを固定で作成してページに貼り付けましたが、今回は独自のテンプレートを追加して、そのデータを利用してコンポーネントのレンダリングをしたいと思います。
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3KyJEkSzdR8WYHGiFZEotC%2Fd25484a5ceb38d980d2597daaae91bc8%2Fedge2edge-media-t1OalCBUYRc-unsplash.jpg&w=3840&q=75)
新しいコンポーネントの作成
今回はコンポーネントとして画像、テキストを配置している簡単なものを作成しました。
![comopnentlink2item01.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7B6TPLkMTy3Tha5uTM4aIC%2Fbde67a0c37851a88760b415b13d9df8b%2Fcomopnentlink2item01.png&w=3840&q=75)
このレイアウトに対して、画像とテキストを割り当てていきます。
テンプレートを作成する
今回のコンポーネントで利用する専用のテンプレートを作成していきます。Pages を開いて、左側のメニューにある Teampletes をクリックしてください。
![comopnentlink2item02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2Fs2r1SLC3g2NGnPMnYRhDF%2F690ced45d5243eefea199cd08ee6f33a%2Fcomopnentlink2item02.png&w=3840&q=75)
Create template をクリックするとコンテンツエディターに移動をします。今回は Project の下の Tailwind にはすでにデフォルトのテンプレートがあるため、区別するために Components というフォルダを作成して、Sample というテンプレートを作成します。
![comopnentlink2item03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3RjJgAIeBV4JDd6zgGn2bz%2F722c348d702845bb5c90afd3cce21db0%2Fcomopnentlink2item03.png&w=1920&q=75)
この作成したテンプレートを利用して、Home の中の Data フォルダに対して、サンプルのアイテムを作成します。
![comopnentlink2item04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5IyhwH5XH5nz9gSY50QwKY%2Fe83b45f9a7741107fb52272a24e7a0f3%2Fcomopnentlink2item04.png&w=3840&q=75)
これで準備が完了となります。
テンプレートを FEaaS に登録する
今回作成をしたテンプレートの構造を Sitecore Components で利用できるようにするために、サイトの Settings の中にある FEaaS compnent data source tempates で選択をしてください。FEaaS は FrontEnd as a Service の略で、Sitecore Component と連携するための仕組みの名称となります。
![comopnentlink2item05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F365g7A1RCwPqzZJXnn8jSK%2F000f074e16d61b9de6db1329b792691d%2Fcomopnentlink2item05.png&w=3840&q=75)
この設定を実行すると、Components のデータソースに自動的に候補として表示されるようになります。
![comopnentlink2item06.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5zjvpNr8UnfV4Wmw6nl7wa%2F22d0ea86548cb93ead5b3007bb40e4da%2Fcomopnentlink2item06.png&w=1920&q=75)
項目を選択すると、すでに作成したサンプルのデータが JSON のサンプルとして追加されていることがわかります。
![comopnentlink2item07.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F23511m2NHDjNQ2Bif4tTMh%2Fe09e127e6cf75af37fa8b55fb7e97f80%2Fcomopnentlink2item07.png&w=3840&q=75)
データソースを紐づける
紐づける準備が完了したところで、もう一度 Components の画面で対象となるコンポーネントを開きます。作業的なところとしては、画像には画像の値を、テキストにはテキストをマップさせるような形です。今回は以下のように作業をしました。
適当に作っているので画像のサイズなどはおかしい形です。少しだけ補正をしてみました。
![comopnentlink2item08.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F65cP3P2cdDNKgqvoeyBB1A%2Fd6089f16b2c33e54fdfbbb6571eda588%2Fcomopnentlink2item08.png&w=3840&q=75)
これに以下のような手順を進めていきます。
- Version を追加
- デバイスに合わせたバージョンの調整
これでコンポーネントの準備が完了です。
Pages に移動をして、コンポーネントを配置、表示をするアイテムをアサインします。
![comopnentlink2item09.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5j1AXT3JythC59zPITGFUX%2F7c65f1bf22d89475b5153b36a781a547%2Fcomopnentlink2item09.png&w=3840&q=75)
コンポーネントを配置して、デバイスを切り替えると有効になっていることを確認できます。
![comopnentlink2item10.gif](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4TafJEtJSxzRPqivIif751%2F758b22115cfba296df77974018c3db9f%2Fcomopnentlink2item10.gif&w=3840&q=75)
アイテムのデータを更新
コンポーネントが正しくデータソースを参照しているか確認をするために、アイテムのデータをまずは更新します。
![comopnentlink2item11.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2IfHdgJSoLgfwWpW9YQpab%2F84e7ab88e85e0775d57a46302d20cc86%2Fcomopnentlink2item11.png&w=1920&q=75)
Pages で改めてコンポーネントの確認をします。
![comopnentlink2item12.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F21JBtavI0a6SBRLo4eYls3%2F2d7c72b8ac9340e18fa70710c0a7735b%2Fcomopnentlink2item12.png&w=1920&q=75)
画像と文字が変更されていることを確認できました。
まとめ
コンポーネントの画像、テキストだけで今回は検証をしました。もちろん要素を増やすのであればテンプレートで設定することで項目を追加することが出来ます。アイテムに対して、ワークフロー、タイマーをかけて公開などをすることで、コンポーネントの中身を公開、バージョン管理することが可能となります。
前回はノーコードでコンポーネントの作成、そして今回はノーコードでテンプレートと連携することが出来ました。Headless SXA でコンポーネントを作成しなくても、コンポーネントを作ることが出来るのは ROI という点では便利な機能です。