ローカルの Next.js のプロジェクトを XM Cloud に接続する
今回は手元にある Next.js のプロジェクトを直接 XM Cloud のインスタンスにつなげて動かす手順に関して紹介します。
XM Cloud
世界トップクラスのエンタープライズ対応CMSで、適切なコンテンツをあらゆる場所で素早く作成、管理、配信できます。
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 として利用するためのツールをいくつか提供しています。まず関連するツールに関して紹介をしていきます。