これまでブログでは Headless SXA の仕組みで登録をするコンポーネント、Sitecore Components を利用してノーコードで作成するコンポーネントを紹介しました。今回はこれと違って、コンポーネントを持ち込む、という感じの実装を紹介します。
コンポーネント実装に関して
すでに紹介をしているコンポーネントに関して、まとめると以下のような特徴があります。
- Headless SXA - みたまま編集を実現することができるコンポーネント。GraphQL なども活用できる。
- Sitecore Components - ノーコードで作ることができるコンポーネントビルダーのツール。Sitecore で管理しているアイテムとリンクして、コンポーネントの中のデータを管理することができる。
- BYOC - Bring your own components の略称で、React などで作成した Web コンポーネントを利用することができます。
今回は BYOC のサンプルを動かしてみたいと思います。なお、公式のページは以下の通りです。
サンプルに関して
コンポーネントのサンプルに関して、いくつか以下のページで公開されています。
今回は、app/byoc/ExampleHybridComponent.tsx のサンプルを適用していきます。まずこのファイルを、src\byoc の下に配置します。そして、 index.hybrid.ts のファイルに対して、以下の１行を追加してください。
TypeScript
import './ExampleHybridComponent';これでコンポーネントの登録が完了となります。実はこれだけで設定が完了となります。今回はローカルの環境で Docker インスタンスで XM Cloud の環境を準備して、Pages をローカルに接続して利用します。接続する手順はこちらに記載しています。
Pages を起動すると、以下のように新しいコンポーネントが追加されています。
実際に配置をすると以下のようにコンポーネントを置くことができます。
右側に表示されている Configuration をクリックすると、このコンポーネントで設定できるデータを入力することが可能になります。
データを設定すると、コンポーネントでの表示内容が変わります。
このように、コンポーネントを用意して、コンテンツの中身を Pages を通じて変更できることがわかります。
まとめ
今回はサンプルのコードをそのまま動かしてみました。次回は実際にどういう形でデータを持っているのか、コードの記述している内容の役割などを紹介する形で、動作確認をしていきます。