カルーセルコンポーネントを作成する（中編）
前回はカルーセルのコンポーネントを管理するためのテンプレートの作成まで進めていきました。今回は、コードを書き換えて、カルーセルとして動くところまで進めていきたいと思います。
XM Cloud
世界トップクラスのエンタープライズ対応CMSで、適切なコンテンツをあらゆる場所で素早く作成、管理、配信できます。
カルーセルコンポーネントを作成する（前編）
カスタムコンポーネントの練習としてよくあるカルーセルの作成、今回は XM Cloud のコンポーネントにする手続きを元に作ってみたいと思います。作業量はあまりありませんが、説明が長くなるので分けて紹介をします。今回は前編です。
Rendering Contents Resolvers の動作確認
今回は Sitecore XM / XM Cloud で提供している便利な機能、Rendering Contents Resolvers について取り上げます。レンダリングの定義で複数の定義が用意されており、これを活用することで効率よくコンポーネントを作成することができます。
NextUI を利用できるようにする
すでに手元で動かしているサンプルは Tailwind.css を利用していますが、もう一歩進んで NextUI を今回は適用したいと思います。これは Next.js を提供している Vercel が提供しているユーザーインターフェイスツールとなります。
Bring own your component のサンプルコードを確認
前回はサンプルのコードを配置して動かすところまで進めていきました。今回は、どういうコードの記述が必要か、データはどういう形で持つのか？などを確認していきたいと思います。
Bring own your component でコンポーネントを追加する
これまでブログでは Headless SXA の仕組みで登録をするコンポーネント、Sitecore Components を利用してノーコードで作成するコンポーネントを紹介しました。今回はこれと違って、コンポーネントを持ち込む、という感じの実装を紹介します。
Sitecore Components のコンテンツを SItecore のアイテムと連携させる
前回はコンポーネントに画像、テキストを固定で作成してページに貼り付けましたが、今回は独自のテンプレートを追加して、そのデータを利用してコンポーネントのレンダリングをしたいと思います。
Sitecore Components で簡単なコンポーネントを作成する
以前に新しくリリースをした Sitecore Components に関して紹介をしましたが、今回は簡単なコンポーネントを作成してみたいと思います。
Shared Layout を利用して各言語でのレイアウトの共有
前回作成をしたパーシャルデザインに関しては英語のレイアウトで作成をしていきました。今回は、これを各言語に対して共通化して利用できるレイアウトを作成していきます。
Pages で Partial design を作成する - フッターの作成
前回は左上にロゴが表示されるだけのヘッダーを作成しました。今回は、ナビゲーションコンポーネントを利用してフッターを作成していきたいと思います。
Pages で Partial design を作成する - ヘッダーの作成
コンポーネントに関しては、また後日カスタムで作る部分を紹介しますが、もう少しページっぽい感じで紹介をしていきたいので、今回はヘッダーを作成したいと思います。
作成したコンポーネントで多言語対応を実装する
前回作成をしたパンくずリストのコンポーネントですが、多言語の時の動作はどういう動きをするでしょうか？今回はその部分も想定したコンポーネントに更新していきます。
パンくずリストのコンポーネントを作成する
前回の LinkList の動作を応用して、今回はパンくずリストのコンポーネントを作ってみたいと思います。
LinkList コンポーネントの動作を確認する
今回は Headless SXA のコンポーネントである LinkList コンポーネントがどのように定義されているのか、確認をしていきます。
強化された Pages のリッチテキストエディターの UI を利用できるようにする
リッチテキストエディターを利用する際に、右側に対象となる項目を表示する形となっていましたが、Pages の新しい仕組みを利用することでより使いやすくなります。今回はそれの手順を紹介します。
ColumnSplitter のコンポーネントを tailwind.css で利用できるようにする
今回は Tailwind.css で利用される Flex を利用して横 Column Splitter （横に分割する）部分のコンポーネントに関して紹介をして行きます。
Pages で利用できるスタイルの動作確認
コンポーネント別のスタイルシートの適用を確認できましたが、Pages で利用可能なスタイルの仕組みがあります。これに関しての動作を確認していきます。
XM Cloud の Starter Kit に Tailwind.css のスタイルを適用する
Basic site は Bootstrap 5 で動作していますが、しばらくは Tailwind.css で動くよう手順を確認していきます。これによりデフォルトの動作に関して、確認していくことができます。今回はスタイルの適用です。
XM Cloud が提供しているグリッドの動作を確認する
以前に XM Cloud で利用する Next.js のグリッドの仕組みに関して少し取り上げましたが、動作に関して紹介をしていませんでした。今回はこれを取り上げたいと思います。
XM Cloud のレイアウト処理を確認する
XM Cloud で提供している Next.js をベースにした SDK に関して、実際にどういう動きをしているのか？というのを簡単に取り上げてみたいと思います。今回は、レイアウト編です。
Sitecore Components のご紹介
Sitecore XM Cloud の Advent Calendar 2023 の最後の記事として、Sitecore Components を紹介します。このツールは XM Cloud で提供されるツールの一つで、これまでの Sitecore の製品には含まれていない新しいツールになります。
XM Cloud のアナリティクスとパーソナライズ
XM Cloud は Sitecore の CMS の機能だけではなく、アナリティクスとパーソナライズの機能も含める形で提供をしています。今回はこの仕組みを紹介します。
Headless SXA で用意されているグリッドの設定、スタイルの動作確認
Headless SXA の Basic サイトは Bootstrap 5 を利用しています。スタイルシートのデータをどういう形で管理するのが良いか、を今回は確認して行きます。
多言語サイトにおける言語フォールバックの設定
すでに XM Cloud で言語を追加する方法に関して紹介をしました。多言語サイトで言語を増やしていく際に効率的に管理する仕組みとして、言語フォールバックの仕組みがあります。今回はこの機能の設定と動作確認をしていきます。
XM Cloud で利用する Rendering を追加する
Sitecore のツールと Next.js のプロジェクトが連携をして、見たまま編集を実現しています。XM Cloud ではデフォルトで１つの Rendering のインスタンスを用意していますが、別途外部で用意することができます。今回は、前回作成をした別のサイトを利用して手順を確認していきます。
XM Cloud にサイトを追加する
これまでデフォルトの Basic Site のコンテンツを利用して動作確認をしていましたが、今回は新しくブランクのサイトを作成して、新しい Next.js のプロジェクトと連携する手順を確認していきます。
Experience Edge と Netlify のサイトを連携させる
前回は XM Cloud のサイトを Netlify に展開しましたが、サイトの更新という点では build を実行した時にページが生成される形となります。そこでページを更新したあと、Netlify のサイトも更新されるように Experience Edge に設定を追加します。
Netlify に XM Cloud のサイトを展開する
静的サイトのホスティングが可能な Netlify に対して Sitecore XM Cloud と連携する Web サイトを展開する手順を確認していきます。
Preview 用のサーバーを用意する
Experience Edge の Preview を利用することで、公開前のデータを確認することが可能ということを前回確認をしました。そこで、Preview 用のインスタンスを Vercel で今回は用意してみます。
Delivery と Preview で提供しているデータの違いを確認する
前回は Experience Edge の Delivery のデータを Postman を利用して確認しました。今回は、Preview のデータはどういう形で動いているのかを確認したいと思います。
Postman を利用して Experience Edge からコンテンツを取得する
Sitecore XM Cloud はコンテンツデリバリーの仕組みとして Sitecore Experience Edge を提供しています。実際にデータがどういう形で取得できるのかを、Postman を利用して確認していきます。
Vercel Deployment Protection を有効にして JSS のアプリを展開する
前回は Vercel の設定の際に Vercel Deployment Protection に関して簡単に紹介をしましたが、アプリの動作を変更することで正しく Vercel Deployement Protection を利用できるようになります。
XM Cloud を展開した後の Vercel 設定のポイント
これまで Vercel に展開する手順を紹介していましたが、今回は展開後のいくつかの設定を紹介していきます。Edition による違いも今回は取り上げます。
Sitecore Next.js 21.4.0 から 21.5.0 の差分
前回は新しい Next.js のプロジェクトを動かすところまで実行しましたが、実際に 21.4.0 から 21.5.0 に対する差分の確認もできます。せっかくなので見てみましょう。
Headless SXA の新規プロジェクトを作成する
これまでプロジェクトに含まれている Haedless SXA のプロジェクトを利用していましたが、これは以前から提供している Next.js と違いはあるのでしょうか？今回は新しい Next.js のアプリを準備して動かすところまで進めてみます。
ローカルで作成したコンポーネントを XM Cloud の Staging に反映させる
前回は Types という全部の項目を利用するコンポーネントを作成しました。今回はこのコンポーネントを利用して、CLI を利用して Staging のサーバーに追加していきます。
Sitecore のフィールドの確認
Sitecore が提供している各種フィールドに関して、実際に１つのコンポーネントに実装をして動作確認をして確認をしていきます。
XM Cloud のレンダリング環境を変更する
前回はローカルの Docker イメージを LTSC2022 を利用するかたちに切り替えましたが、もう少し環境に関して確認をしていきます。今回は、レンダリングの環境を変更していきます。
XM Cloud の Docker イメージについて
Sitecore XM Cloud に限らず、Sitecore の最新版に関する Docker イメージの提供をしています。これにより開発環境や検証環境の切り替えを容易にしています。今回は Sitecore の Docker イメージについて紹介をします。
XM Cloud のマーケティング機能との連携
Sitecore XM Cloud には Sitecore CDP が提供しているアナリティクス、パーソナライズに関しての機能が一部含まれています。これにより、簡単なアナリティクスおよびパーソナライズの機能が標準で含まれる形です。今回はこれの設定を確認していきます。
Docker で起動している CMS に Next.js のプロジェクトで接続する
以前にローカルの Next.js のプロジェクトを XM Cloud に接続する方法を紹介しました。ではローカルのコンテナで起動している場合は簡単にできるでしょうか？今回はこれを確認していきます。
多言語のコンテンツをサイトで利用する
前回の記事では、コンテンツ管理で多言語のデータの持ち方の設定を紹介しました。それでは実際に表示をする際にはどういう動きをしているでしょうか？Next.js のプロジェクトを参照しながら確認をしていきます。
コンテンツを多言語で管理する
Sitecore の CMS と同様に XM Cloud でも多言語でコンテンツ管理ができるようになっています。今回は、CMS 側の設定を紹介していきます。
ローカルの XM Cloud のインスタンスと Pages の連携
XM Cloud の新しい編集ツールである Sitecore Pages は SaaS で立ち上がっているアプリケーションです。このツールとローカルで立ち上げている XM Cloud のインスタンスと連携する手順を今回は紹介します。
XM Cloud に関するこれまでのトピック
すでに今年も 12 月ということで、多くの記事をブログを通じて提供してきましたが、改めて XM Cloud に関して、毎日1本公開をする一人 Advent Calendar XM Cloud を実施します。今回はこれまでブログで取り上げた記事をまずはおさらいします。
Sitecore XM Cloud Advent Calendar 2023
毎日１つの記事が掲載される Advent Calendar を今年は一人で XM Cloud にフォーカスして書いていくことにします。
XM Cloud Plus のご案内
先月のイベントで発表された新しい製品スイート、Sitecore XM Cloud Plus について今回は紹介をします。
ChatGPT が生成したコードを参考にコンポーネントを作成する
生成 AI として今年はブレイクしている ChatGPT は JavaScript や TypeScript のサンプルを紹介してくれます。今回は ChatGPT が生成するコードを利用して、XM Cloud のコンポーネントを作成したいと思います。
Headless SXA - コンポーネントウィザードを利用する
Sitecore のコンポーネントを作成することで、簡単にドラッグ＆ドロップのコンポーネントを作成することができます。今回はこのコンポーネントを作るときに便利なウィザードを紹介します。以前に紹介している手順は以下の通りです。
XM Cloud の Promote の動作確認
XM Cloud ではプロジェクトで複数の環境を用意して運用、開発をすることが可能です。今回は Promote の動作に関して確認をしていきます。
ローカルの Next.js のプロジェクトを XM Cloud に接続する
今回は手元にある Next.js のプロジェクトを直接 XM Cloud のインスタンスにつなげて動かす手順に関して紹介します。
Vercel に XM Cloud のサイトを展開する（アップデート版）
XM Cloud のサイトの展開先として Vercel を選択した場合、CI / CD などの部分は GitHub と連携してやりやすくなります。前回、一度手順を紹介していますが、新しくなったところ、更新されたところを紹介します。
Sitecore CLI を利用してクラウドとローカルの環境を揃える（ 5.2 版 ）
これまで何度か Sitecore CLI に関して紹介をしてきましたが、今回は最新版の Sitecore CLI 5.2 がリリースされているため、これを利用してエクスポート、インポートを実践する手順を紹介します。
XM Cloud - Sitecore Content Hub コネクタを有効にする
Sitecore Content Hub の DAM 機能を有効にするために、XM Cloud と連携させるためにはコネクタを有効にする必要があります。今回は、この手順に関して紹介をします。
XM Cloud Deploy ツールからサイトを追加する
前回は新しくなった XM Cloud Deploy ツールに関して紹介をしました。今回はこのツールで展開した CMS に対して新しいサイトを追加したいと思います。
XM Cloud Deploy のツールの UI が更新されました
サイトコアが提供する SaaS 版の CMS である XM Cloud のツール、XM Cloud Deploy ツールの管理画面が更新されました。色々な情報に管理画面から確認できるようになりましたので、今回はこの部分を紹介していきます。
Sitecore の CMS 製品がハイブリッド ヘッドレス CMS でリーダーとして評価されました
Sitecore のコンテンツ管理システムの製品が、2023年のMarketScapeでハイブリッドヘッドレスCMSが IDC のレポートで、完全なSaaS型クラウドネイティブソリューションとして評価されました。
サイトコアの製品ラインナップ
ここ数年、サイトコアは会社の買収だけでなく新しい製品の開発をして多くの製品をリリースしています。今回は、近々日本でもご紹介できる（海外ではリリース済み）の製品も含めて、全部の製品を紹介します。
Headless SXA でデモサイトを構築する - Part 8 日本語リソースの適用
コンテナおよび XM Cloud の環境に対して日本語リソースを適用していきます。この手順は以前にブログで紹介していましたが、今回はその手順を改めてステップの中に入れていく形です。
Headless SXA でデモサイトを構築する - Part 7 ページテンプレートの制御をする
ヘッダーとフッターが出来上がりましたが、これをデフォルトのページに必ず入れておく形にしていきたいと思います。これを実現する機能はページデザインとなりますので、今回はこれを紹介します。
Headless SXA でデモサイトを構築する - Part 6 フッターの作成、メニューの制御
ヘッダーが出来上がったので今回はフッターのエリアを作成したいと思います。フッターにはメニューの主な項目を表示する様な形としていきたいため、フッターの作り方だけでなくメニューの制御について学んでいきます。
Headless SXA でデモサイトを構築する - Part 5 ヘッダーのスタイルシートの変更をする
ここに概要を書く作成をしたヘッダーに対して、スタイルシートで見た目をもう少し整えていきたいと思います。レイアウトの表示するコンポーネントは画面で設計する際に利用し、スタイルシートを変更してみための調整ができる、というのを今回は紹介します。
Headless SXA でデモサイトを構築する - Part 4 パーシャルデザインの作成 - ヘッダーの作成 その３
コンテナを３つ配置して上から２つは完成させましたが、まだ3つ目のコンテナの実装をしていません。これは画面のサイズに合わせてメニューを変更するレスポンシブデザインに対応するためのものとして用意しています。それでは最後に3つ目の項目を実装していきましょう。
Headless SXA でデモサイトを構築する - Part 3 パーシャルデザインの作成 - ヘッダーの作成 その２
前回はヘッダーエリアに３つのコンテナーを配置して、そのうち2つに関してのバックグランドの色を変更しました。今回は一番上に配置したコンテナーにメンニューの項目を配置していきたいと思います。
Headless SXA でデモサイトを構築する - Part 2 パーシャルデザインの作成 - ヘッダーの作成 その１
今回はデモサイトを作る最初の第一歩として、ヘッダーのパーシャルデザインを作りたいと思います。ここで利用するのは標準のコンポーネントを配置して、少し見た目を変えるという感じの簡単な作り方で進めていきます。なお、作業環境としては XM Cloud のコンテナをローカルで起動して、作成をしていくのを前提とします。
Headless SXA でデモサイトを構築する - Part 1 ページ、パーシャルデザイン、プレースホルダー
今回から Headless SXA を利用した簡単なページを作る際の基本的なポイントを数回に分けて紹介をしていきます。今回はパーシャルデザインとページの考え方、プレースホルダーをどういう風に活用するのか、という基本的な考え方を取り上げます。
Sitecore XM Cloud 関連記事
Sitecore XM Cloud に関する記事をいくつか掲載をしました。今後も追加していく予定ですが、まずはジャンル別としてまとめておきました。
HTML のページを追加する
すでに Web サイトのコンテンツがあって、HTML のデータがあるという際に、Next.js をベースのサイトの場合はどうすれば良いでしょうか？実は Next.js の基本的な機能を利用すれば、HTML ファイルなどを一通りサーバーにホストすることが可能です。
Sitecore XM Cloud - Vercel との連携
Sitecore XM Cloud で作成をした CMS のデリバリー環境として Vercel を選択することが可能ですが、この作業を簡単にするための Sitecore XM Cloud との連携機能を提供しています。今回は、この機能を利用して、Web サイトを Vercel に展開する手順を紹介します。
Headless SXA - 新規コンポーネントの追加
前回は既存のコンポーネントの表示形式を増やすだけでしたが、今回は新しいコンポーネントを作成します。これにより、各企業で求めているデータ構造に対してのレイアウト作成という形で、Sitecore でデータ形式の定義をして、見た目の部分を実装するという部分のイメージが湧くかと思います。
Headless SXA - Variant の追加
前回は Headless SXA に関して簡単に紹介をしました。基本コンポーネントだけでは当然 Web サイトを作る上では色々なものが不足しています。今回は、既存のコンポーネントの表示形式を追加する方法を紹介します。
Headless SXA の紹介
Sitecore が提供する Web サイトのコンポーネント集となる Sitecore Experience Accelerator のヘッドレス版となる Headless SXA の提供を開始しました。このコンポーネントは Sitecore XM 10.3 でも利用できるようになっていますので、既存の Sitecore のサブスクリプションライセンスを利用の場合も同じように利用することが可能です。
Next.js に Google Tag Manager を設定する - XM Cloud 編
XM Cloud のサイトを外部に公開をしました。他のサービスと連携させるためにも、まずは Google Tag Manager を設定します。
Vercel に XM Cloud のサイトを展開する
XM Cloud をこれまで紹介してきましたが、これまで CMS の環境を操作しているだけでした。実際に Web サイトとして公開をする際には、ヘッドレスとして実装しているので別のサービスと連携させる必要があります。今回は、Vercel にサイトを展開する手順を紹介します。
GitHub のリポジトリに反映させる
ローカルで開発をしたものを、GitHub を通じて反映させることが可能です。今回は、ローカルで少しだけアイテムの変更をして、GitHub のリポジトリを通じて SaaS 環境の XM Cloud に反映させる手順を紹介します。
Sitecore CLI を利用してクラウドとローカルの環境を揃える
XM Cloud のローカルの環境とサーバーとして利用している SaaS の XM Cloud の環境を同期する方法を紹介します。今回は全てを一括で同期していますが、アイテムに関して全て同期するとデータ量も増えるため、実際の開発環境では必要なデータだけを同期させて運用することになります。それでは早速環境を整えるところからスタートします。
XM Cloud の開発環境を Docker で起動する
これまで XM Cloud に関して SaaS の環境のみを操作していました。実際の開発になると手元で同じ環境を用意したくなるところです。手元で動かすことができる Docker の環境が作成された GitHub のリポジトリに用意されているため、今回はこれを利用してローカルの環境で起動したいと思います。
Sitecore Digital Experience Tokyo 2022 レポート
先週、12 月 2 日にサイトコアのイベント Sitecore Digital Experiece Tokyo 2022 を開催しました。今回、私が担当したのは Sitecore Developer Lunch ということで、お昼を食べながら Sitecore のパートナー、認定エンジニアの方に参加していただいた軽食付きのランチでした。そこで説明した内容をブログでも紹介します。
XM Cloud に新しい Web サイトの追加
前回まで XM Cloud のサーバーの起動、環境の設定を紹介しました。今回から具体的に XM Cloud のサンプルサイトを起動して、Web サイトを作っていく手続きを進めていきます。
XM Cloud Deploy 環境の追加
前回は新しい XM Cloud のプロジェクトを作成しました。その際に環境として Development というのを作成しましたが、コード管理とどのように連携しているのでしょうか？今回は、環境について紹介をします。
XM Cloud Deploy プロジェクトの作成
Sitecore XM Cloud の利用をする際の最初のツールとなる XM Cloud Deploy ツールを今回は紹介します。このツールを利用することで、GitHub のリポジトリと連携している Sitecore XM Cloud のプロジェクトを作成することができます。
Sitecore Cloud Portal について
Sitecore の新しい製品である Sitecore XM Cloud を日本市場でも販売開始となりました。従来から提供している Sitecore Experience Manager の SaaS 版であり、従来の製品の便利なところ、かつヘッドレスで利用することが可能な製品です。SaaS に展開するにあたって、SaaS として利用するためのツールをいくつか提供しています。まず関連するツールに関して紹介をしていきます。