Logo

Experience Manager (XM)

Sitecore が提供するコンテンツ管理システムの基本パッケージです。

App screenshot

ヘッドレスサイトを追加する

プロジェクトの作成、XM1 の環境整備、そして前回は SXA のモジュールのインストールをしました。今回はこのプロジェクトに対して、ヘッドレスのサイトを追加して、Next.js のプロジェクトと連携させていきます。手順が長くなるため、今回はヘッドレスのサイトを追加して、そのデータをいつでも再利用できるようにシリアライズができるところまで紹介をします。

日本語リソースの追加

すでに XM の環境が起動していますが、管理画面で表示される言語がデフォルトの英語になっています。今回は管理画面で日本語を利用することができるように、日本語のリソースを追加する手順を紹介していきます。

XM1 のプロジェクトを準備する

前回の記事でまずはテンプレートとなるプロジェクトを作成しました。今回は、一番シンプルな XM1 を実行するためのプロジェクトにするために、不要なものを削除、調整の手順を進めていきます。

新しいプロジェクトを作成する

新年あけましておめでとうございます。今年も Sitecore に関する技術的な情報をブログで提供していきたいと思います。実は Sitecore の技術情報は日本語で多く提供しているのですが、いざ始めるとなるとどこから手を付けていいのか悩ましいですよね。ということで、新年最初の投稿は、新しいプロジェクトをサクッと作るところを紹介します。

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

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

Headless SXA の紹介

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

フィールド名の翻訳とヘルプの表示

これまでいくつかテンプレートを作成してきましたが、シンプルに英語のリソースのみを設定していました。実際の運用という点では、英語にも日本語にももう少しわかりやすいタイトル、説明を入れた方が日頃編集する人にとっては使いやすい管理画面になります。今回は、フィールドを表示する際のローカライズの手順を紹介します。

個別フィールドのソースを活用する

アイテムに関して階層化して管理をしていることもあり、対象となるアイテムの選択ができるようにしたい、ソースを指定したいというニーズがあります。これに関しては、テンプレートのソースの項目を利用することで、作業効率を上げることが可能となります。今回はこのフィールド形式の指定の後ろの項目、ソースの利用方法を紹介します。

スタンダードバリュー - その４ 挿入オプションの設定

新しいアイテムを作成する時に、アイテムのタイプを事前に設定をしておくことでテンプレートからどのアイテムを作るのか、という手順を省略することができます。そして、サイトの中のアイテムの構造もこのルールに沿って作っていくことが可能となります。今回は、この設定手順となる、挿入オプションについて紹介をします。

アイテムのアイコンを指定する

これまでアイテムを作成すると書類のようなアイコンが常に設定されていました。アイテムに対してアイコンを設定することが可能ですが、これを毎回作業をするのは手間になりますので、今回は、アイコンの設定を紹介します。

スタンダードバリュー - その１ 初期値について

これまでフィールド形式を指定してコンポーネントを作成するところを紹介していましたが、ページの編集をする人の手間を省くために、標準の値に関して設定をすることができるスタンダードバリューについて紹介をします。この機能は、Sitecore のヘッドレスの機能固有のものではなく、普通の Sitecore の機能のため、設定をしていない場合は運用に併せてどういう設定が良いか検討していただきたい項目です。

プレースホルダーの作成

Sitecore でレイアウトのエリアに関して、名前をつける機能をプレースホルダーという形で定義することができます。これを利用することで、プレースホルダーに配置することができるコンポーネントの制限をしたり、プレースホルダーを階層化して管理することができるようになります。今回はこのプレースホルダーの考え方、そして作り方を紹介していきます。

Sitecore Headless - GraphQL UI の利用

Sitecore XM に対して Headless Service をインストールすることで、GraphQL を利用してデータの取得が可能となります。今回は、データをどういう形で取得することができるのか、というのを紹介します。

Sitecore Headless - Sitecore First に変更する

これまで Sitecore の SDK のサンプルのコードを展開するところにフォーカスしていましたが、ここからは Sitecore で作業をしてコードで補完する形の開発をしていく手順に切り替えていきます。後半では以前に紹介をした空っぽのプロジェクトを作る手順を改めて確認して、実際につながるところまで進めていきます。

Sitecore Headless - Next.js ステージングの追加

前回の記事で、Next.js のサンプルを Sitecore に展開、また実際のデリバリーとして Vercel と連携する形まで用意をしました。今回は、もう少しテスト、検証をしやすくするためにプロダクションとステージング環境を分けて、ローカルでもテストする手順を紹介をしていきます。

Sitecore XM シリーズ

Sitecore XM に関連する記事を公開しています。コンテナではなく仮想マシンの上で動かす手順に関して紹介をしている形です。参考にしてください。

Sitecore XM シリーズ - Sitecore Headless Rendering インストール

今回は Sitecore Experience Manager (XM) の環境にヘッドレスのモジュールをインストールする手順を紹介していきます。すでに紹介したように、XM をインストールアシスタントを利用してインストールをすると、 CM / CD と分かれた環境が展開されます。この環境で、Sitecore ヘッドレスに関するモジュールをインストールする手順を紹介していきます。

Sitecore XM シリーズ - Sitecore Experience Accelerator インストール

以前に紹介をした Sitecore Experience Accelrator のインストールは、構成として XP0 ということで CM および CD サーバーを共有する形での運用となっていました。この記事の直前にインストールをした XM の構成は CM と CD と分かれています。この場合は、必要なモジュールを CD サーバーにもインストールする必要があります。今回は、このインストールの手順について紹介をします。

Sitecore XM シリーズ - セットアップ

これまで Sitecore Experience Platform （以下 XP）のデモ環境のセットアップを紹介してきましたが、今回は CMS のみのインスタンスを立ち上げる Sitecore Experience Manager (以下 XM）の環境をセットアップしていきます。

ページ作成の確認

以前に Sitecore のデモ環境として Sitecore Demo Platform の立ち上げ方について紹介をしました。今回は、この環境を利用してページの作成、編集が可能なアカウントを作成して、確認をするための手順を紹介していきます。

Sitecore 権限の確認 - アクセスビューアーの活用

Sitecore のロール権限を利用してアクセス権を設定する時、そのロールでどのアイテムが参照できるのか、というのを確認するには、アクセスビューアーを利用するのが便利です。今回は、ロールを２つ作成して、どのアイテムに権限があるのか、というのを確認する手順を紹介していきます。

Sitecore における多言語コンテンツの管理

Sitecore は多言語サイトにおいて多く採用されています。背景として、コンテンツを多言語で管理する場合に必要とされる機能が標準で含まれているというのが強みであり、かつ当然ながら海外でも製品の導入があり、製品トレーニングなども英語で受講することができるため、導入に関して強みを持っている形です。

Sitecore メディアライブラリ

Sitecore のメディアライブラリの機能をいくつか紹介をしていきます。今回は、ファイルをまとめてアップロードする機能、そしてダウンロードではなくてブラウザで表示をしたいという２つのシナリオに関して紹介をします。

macOS + VMWare Fusion を組み合わせて Sitecore の環境を整える - その１

Sitecore JSS の開発をする場合、Node.js が動けば問題ないため macOS の環境でも開発が可能です。しかしながら、Sitecore は Windows の環境で動作する形となるため、macOS で開発をするためには別途環境を整える必要があります。今回は、VMWare Fusion を利用して Sitecore JSS の開発をするための環境を整える方法を紹介します。Windows の場合も Hyper-V を利用して、今回は macOS で環境を整える方法として紹介をします。