Headless SXA

Sitecore Next.js 21.4.0 から 21.5.0 の差分

前回は新しい Next.js のプロジェクトを動かすところまで実行しましたが、実際に 21.4.0 から 21.5.0 に対する差分の確認もできます。せっかくなので見てみましょう。

2023/12/10

Headless SXA の新規プロジェクトを作成する

これまでプロジェクトに含まれている Haedless SXA のプロジェクトを利用していましたが、これは以前から提供している Next.js と違いはあるのでしょうか？今回は新しい Next.js のアプリを準備して動かすところまで進めてみます。

2023/10/18

ChatGPT が生成したコードを参考にコンポーネントを作成する

生成 AI として今年はブレイクしている ChatGPT は JavaScript や TypeScript のサンプルを紹介してくれます。今回は ChatGPT が生成するコードを利用して、XM Cloud のコンポーネントを作成したいと思います。

2023/10/18

Headless SXA - コンポーネントウィザードを利用する

Sitecore のコンポーネントを作成することで、簡単にドラッグ＆ドロップのコンポーネントを作成することができます。今回はこのコンポーネントを作るときに便利なウィザードを紹介します。以前に紹介している手順は以下の通りです。

2023/02/20

Headless SXA でデモサイトを構築する - Part 8 日本語リソースの適用

コンテナおよび XM Cloud の環境に対して日本語リソースを適用していきます。この手順は以前にブログで紹介していましたが、今回はその手順を改めてステップの中に入れていく形です。

2023/02/15

Headless SXA でデモサイトを構築する - Part 7 ページテンプレートの制御をする

ヘッダーとフッターが出来上がりましたが、これをデフォルトのページに必ず入れておく形にしていきたいと思います。これを実現する機能はページデザインとなりますので、今回はこれを紹介します。

2023/02/14

Headless SXA でデモサイトを構築する - Part 6 フッターの作成、メニューの制御

ヘッダーが出来上がったので今回はフッターのエリアを作成したいと思います。フッターにはメニューの主な項目を表示する様な形としていきたいため、フッターの作り方だけでなくメニューの制御について学んでいきます。

2023/02/13

Headless SXA でデモサイトを構築する - Part 5 ヘッダーのスタイルシートの変更をする

ここに概要を書く作成をしたヘッダーに対して、スタイルシートで見た目をもう少し整えていきたいと思います。レイアウトの表示するコンポーネントは画面で設計する際に利用し、スタイルシートを変更してみための調整ができる、というのを今回は紹介します。

2023/02/10

Headless SXA でデモサイトを構築する - Part 4 パーシャルデザインの作成 - ヘッダーの作成その３

コンテナを３つ配置して上から２つは完成させましたが、まだ3つ目のコンテナの実装をしていません。これは画面のサイズに合わせてメニューを変更するレスポンシブデザインに対応するためのものとして用意しています。それでは最後に3つ目の項目を実装していきましょう。

2023/02/09

Headless SXA でデモサイトを構築する - Part 3 パーシャルデザインの作成 - ヘッダーの作成その２

前回はヘッダーエリアに３つのコンテナーを配置して、そのうち2つに関してのバックグランドの色を変更しました。今回は一番上に配置したコンテナーにメンニューの項目を配置していきたいと思います。

2023/02/08

Headless SXA でデモサイトを構築する - Part 2 パーシャルデザインの作成 - ヘッダーの作成その１

今回はデモサイトを作る最初の第一歩として、ヘッダーのパーシャルデザインを作りたいと思います。ここで利用するのは標準のコンポーネントを配置して、少し見た目を変えるという感じの簡単な作り方で進めていきます。なお、作業環境としては XM Cloud のコンテナをローカルで起動して、作成をしていくのを前提とします。

2023/02/07

Headless SXA でデモサイトを構築する - Part 1 ページ、パーシャルデザイン、プレースホルダー

今回から Headless SXA を利用した簡単なページを作る際の基本的なポイントを数回に分けて紹介をしていきます。今回はパーシャルデザインとページの考え方、プレースホルダーをどういう風に活用するのか、という基本的な考え方を取り上げます。

2023/01/19

Docker

Sitecore 10.3 で Headless SXA を簡単に起動する

これまで数回に分けて Sitecore 10.3 のコンテナ環境、SXA の追加など手元で動かす方法を紹介してきました。毎回同じ手順を実施するのは大変なので、簡単に起動することができるリポジトリを作成しました。リポジトリを利用して起動する方法を今回は紹介します。

2023/01/17

Docker

Next.js のプロジェクトを追加する

前回作成をしたヘッドレスのサイトはまだサイトコアのアイテムがあるだけとなっています。今回はこれに Next.js のプロジェクトを追加して、ページの編集ができるところまでの紹介をします。

2023/01/12

Docker

SXA のモジュールを追加する

前回は XM1 のインスタンスを起動することができました。今回は、Next.js のプロジェクトを追加するにあたって必要となる Sitecore Experience Accelerator のモジュールをコンテナで利用できる様に追加の設定をしていきます。

2022/12/22

Sitecore XM Cloud 関連記事

Sitecore XM Cloud に関する記事をいくつか掲載をしました。今後も追加していく予定ですが、まずはジャンル別としてまとめておきました。

2022/12/16

Headless SXA - 新規コンポーネントの追加

前回は既存のコンポーネントの表示形式を増やすだけでしたが、今回は新しいコンポーネントを作成します。これにより、各企業で求めているデータ構造に対してのレイアウト作成という形で、Sitecore でデータ形式の定義をして、見た目の部分を実装するという部分のイメージが湧くかと思います。

2022/12/15

Headless SXA - Variant の追加

前回は Headless SXA に関して簡単に紹介をしました。基本コンポーネントだけでは当然 Web サイトを作る上では色々なものが不足しています。今回は、既存のコンポーネントの表示形式を追加する方法を紹介します。

2022/12/14

Sitecore が提供する Web サイトのコンポーネント集となる Sitecore Experience Accelerator のヘッドレス版となる Headless SXA の提供を開始しました。このコンポーネントは Sitecore XM 10.3 でも利用できるようになっていますので、既存の Sitecore のサブスクリプションライセンスを利用の場合も同じように利用することが可能です。

2022/12/12