カルーセルコンポーネントを作成する（中編） : Haramizu.com

前回はカルーセルのコンポーネントを管理するためのテンプレートの作成まで進めていきました。今回は、コードを書き換えて、カルーセルとして動くところまで進めていきたいと思います。

パッケージをインストールする

今回のサンプルは react-responsive-carousel を利用して作成しているため、このパッケージをインストールする必要があります。以下のコマンドを実行してください。

npm install react-responsive-carousel

まずはこのコンポーネントの動作確認をしていきます。import の部分で２行、以下のコードを追加してください。

import { Carousel } from "react-responsive-carousel";
import 'react-responsive-carousel/lib/styles/carousel.min.css';

続いて return で返しているところに、固定の以下のコードを入れます。下記のコードを利用する際には、画像の URL は必ず設定してください。

      <Carousel showArrows={true} autoPlay={true} infiniteLoop={true}>
        <div>
          <img
            src="yourimagefile"
            width="1024"
            height="768"
            alt="Text"
          />
        </div>
        <div>
          <img
            src="yourimagefile"
            width="1024"
            height="768"
            alt="Text"
          />
        </div>
      </Carousel>

このコードを入れることで、スライダーが動いている状況を確認することができます。

アイテムのデータを割り当てる

すでにデータを表示して、カルーセルのコードを入れているため、あとは取得したデータをループをして流し込む形です。コードは以下のように書き換えました。なお、一番上のスタイルを適用するところに関しては、carousel の名前を追加しています。

export const Default = (props: CarouselProps): JSX.Element => {
  const id = props.params.RenderingIdentifier;

  return (
    <div className={`component carousel ${props.params.styles}`} id={id ? id : undefined}>
      <div className="component-content">
        <Carousel showArrows={true} autoPlay={true} infiniteLoop={true}>
          {props.fields.items.map((item, index) => (
            <div key={index}>
              <JssImage field={item.fields.Image} />
            </div>
          ))}
        </Carousel>
      </div>
    </div>
  );
};

ここで JssImage のタグがありますが、Import のところで以下のように読み込んでいます。

import {
  ComponentParams,
  Image as JssImage,
  ImageField,
  LinkField,
  TextField,
} from '@sitecore-jss/sitecore-jss-nextjs';

これによりアイテムからデータを取得して画像が表示されるようになりました。

データソースアイテムの自動生成

今回はデータソースとなるアイテムを手作業で作成をしましたが、これをコンポーネントを配置したタイミングで自動的に生成できるように変更をしていきます。この際、複数のアイテムを自動で生成していくため、テンプレートの Branch の機能を利用していきます。

Branch の作成をする先は、/sitecore/templates/Branches/Feature/Tailwind とします。以下のような画面で、New Branch のボタンをクリックしてください。

ダイアログが開きます。どのテンプレートをベースに Branch を作成するのかを指定します。今回は、Carousel のテンプレートを指定します。

ブランチのトップのアイテムが作成されています。

作成されている $name のアイテムを右クリックして、この下に作成をするアイテムのテンプレートを指定します。アイテム名は Slide 1 とします。

今回はデフォルトでスライドを２つ作成するようにしました。

レンダリングの設定を変更します。/sitecore/layout/Renderings/Feature/Tailwind/Carousel にアイテムがある想定として、以下の項目を変更していきます。

Experience Accelerator の Other properties に isAutoDatasouceRendering を true に設定。
Editor Options
- Datasource Location には query:$site/*[@@name='Data']/*[@@templatename='Carousel Folder']|query:$sharedSites/*[@@name='Data']/*[@@templatename='Carousel Folder'] を設定する
- Datasouce Template は先ほど作成した Branch のテンプレートを指定します

これで準備がほぼ完了しましたが、Datasouce Location に今回は Carousel Folder を指定しています。この Carousel Folder のテンプレートをこの機会に作って配置します。まず、Carousel および CarouselSlide と同じテンプレートの場所に、Carousel Folder を作成します。作成をしたあと、__Standard Values を作成（ Builder Options から Standard Value をクリック）、作成された __Standard Values の Configure の項目にある Assign で、Carousel と Carousel Folder を追加できるようにします。

これでフォルダの準備ができたので、サイトの Data の中に Carousel Folder のテンプレートを利用して、 Carousel のフォルダを作成します。

これで Carousel のデータを保存する共有リソースの準備ができました。

コンポーネントを配置する

それでは Pages を利用してコンポーネントの配置をしたいと思います。まず、Home のアイテムの下にある Data は空っぽになっていることを確認します。

Pages で Carousel の配置ができました。

Home アイテムの下の Data のフォルダに必要なアイテムが自動的に作成されていることを確認できました。

まとめ

コンポーネントのコードを書き換えたあと、アイテムをどういう風に持つのか？という点を調整して無事コンポーネントを配置すると必要なデータソースが作成されるようになりました。これで動作しますが、次回はコンポーネントを作成する作業をやりやすくするための手順を追加していきます。