Tailwind Logo

Bring own your component でコンポーネントを追加する

XM Cloud

公開日: 2024-03-15

これまでブログでは 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 のファイルに対して、以下の1行を追加してください。

TypeScript
import './ExampleHybridComponent';

これでコンポーネントの登録が完了となります。実はこれだけで設定が完了となります。今回はローカルの環境で Docker インスタンスで XM Cloud の環境を準備して、Pages をローカルに接続して利用します。接続する手順はこちらに記載しています。

Pages を起動すると、以下のように新しいコンポーネントが追加されています。

xmcloudbyoc01.png

実際に配置をすると以下のようにコンポーネントを置くことができます。

xmcloudbyoc02.png

右側に表示されている Configuration をクリックすると、このコンポーネントで設定できるデータを入力することが可能になります。

xmcloudbyoc03.png

データを設定すると、コンポーネントでの表示内容が変わります。

xmcloudbyoc04.png

このように、コンポーネントを用意して、コンテンツの中身を Pages を通じて変更できることがわかります。

まとめ

今回はサンプルのコードをそのまま動かしてみました。次回は実際にどういう形でデータを持っているのか、コードの記述している内容の役割などを紹介する形で、動作確認をしていきます。

関連タグ