Headless

これまでサーバーとして Sitecore を仮想マシンとして起動していましたが、エンドポイントとして Sitecore Experience Edge というサービスを展開しており、これを利用することで Next.js のアプリを Vercel に簡単に展開することができます。今回はその展開手順に関して紹介をします。

前々回に Next.js のテンプレートの準備を、前回はそれを利用するための Sitecore にアイテムをインポートする手順を紹介しました。今回は Next.js の設定を変更して、Sitecore のアイテムを参照してページが表示されるところまで紹介をします。

テスト環境の設定に関して、この項目を入力してください、などの記述をしていましたが実際に使うとなるともう少し自動化したほうが良い形になってきました。そこで最後に設定を .env ファイルに集約する形に書き換えていきます。

すでにプロジェクトとしてはヘッドレスの検証環境を用意した形となりますが、今回と次回で不要な部分を削除、整理していきたいと思います。今回はヘッドレスで起動することになったので、CD サーバーの構成を削除したいと思います。

前回は Node.js をベースとしたコンテナを立ち上げて、そのコンテナで Next.js を起動しました。Next.js は Sitecore からデータを取得してページを表示している形です。今回は、Sitecore が Node.js のコンテナに接続して、エクスペリエンスエディターが起動するところまで進めていきます。

これまで紹介してきた内容は、 Sitecore をコンテナで起動、その後テンプレートを追加、サーバーでの動作というところまで進めてきました。サーバーの環境では、Vercel を利用してページの編集、確認ができるようにしましたが、ローカルのコンテナの環境では Vercel の部分が不足している形となります。そこで今回は、この部分を Node.js のコンテナを追加して同じように動作する設定を作成します。

前回は Vercel に新しいサイトを展開することができました。このインスタンスを利用して、エクスペリエンスエディターでページの編集をできるように進めていきます。

これまで作成をしてきた Web サイトを Vercel に展開したいと思います。シリーズの最初の頃に立ち上げたサーバーに対してサンプルのデータを展開、合わせて Vercel に展開する手順を紹介していきます。

前々回に Next.js のテンプレートの準備を、前回はそれを利用するための Sitecore にアイテムをインポートする手順を紹介しました。今回は Next.js の設定を変更して、Sitecore のアイテムを参照してページが表示されるところまで紹介をします。

前回は Next.js のテンプレートをプロジェクトに追加しましたが、この段階では Sitecore には何もデータが無いためエラーとなります。そこで、Sitecore CLI を利用して、サンプルデータをインポートしたいと思います。

４回に分けて作成をしてきた環境にはまだ Next.js のプロジェクトがないため、サンプルサイトを追加していきます。プロジェクトにコードを追加する形です。この手順は２回に分けて紹介をしていく予定です。今回は、まず Next.js のサンプルが動くところまで進めていきます。

コンテナの環境を設定したあと、管理画面が英語のままとなっているため、日本語化の手続きを今回紹介をします。今回は Docker のイメージを作成する時にファイルをコピーする形でリソースを展開する手順を紹介します。

コンテナの環境をサーバーと同じ環境に整えていくために、Docker でも各種モジュールを利用できるようにしていきます。現在利用している Docker のコンテナには SXA および Horizon までは設定されているため、不足している分を随時インストールしていきます。

前回はサーバーを用意しましたが、実際の作業をするのは手元でコンテナを動作させるのがポイントとなります。これまで数回に分けて実施してきた手順を整理しながら、手元で Docker ベースの Sitecore が起動する環境を準備していきたいと思います。

１か月ほどブログの記事を掲載していませんでしたが、これまでの Tips を改めてまとめるシリーズを作成するために少し時間をいただきました。今回のシリーズで、Sitecore Headless を手元で動かし、サーバーに反映させて、実際に Web サーバーに展開するという形が可能な環境を構築していきたいと思います。

前回は Sitecore Management Services のインストールを実施しました。今回はモジュールのインストールとして、Sitecore Headless Services のモジュールをインストールしたいとおもいます。また、標準で SXA のモジュールも入っているため、この後利用することはないため削除してい行きます。前回の Sitecore Management Services と違って、CM サーバー以外にも設定をする必要があるため、同様のモジュールでも同じような手順で進めることが可能です。

今回は少し趣向を凝らして、デザインツールの Figma との連携について紹介をします。このツールはブラウザ上で動作する Web サイトのデザインツールで、無料でも使うことができるようになっています。近々日本語版もリリースされるそうです。最初に Figma で簡単なコンポーネントを作成して、Sitecore のヘッドレスと連携して GraphQL からデータを取得、デザインに反映させるための手順を簡単に紹介します。

Next.js の SDK を利用して Sitecore をヘッドレス CMS で開発をする際の各種ヒントを個別のトピックとして紹介しています。ここでは一覧で表示していますので参考にしてください。

作成をしたアイテムのワークフローをスタンダードバリューで設定することで、アイテムを作成後に指定したワークフローを利用して承認プロセスを動かすことができます。

これまで Next.js ベースのサンプルとして作成していたアイテムは JSS のサンプルをインポートした時のルートアイテムをベースに作成をしていました。今回はルートアイテムに相当するものを作成する手順を紹介して行きます。

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

コンポーネント作成シリーズの最後として、ファイルを指定することができるファイルコンポーネントを作成します。ファイル自体はメディアライブラリにあるファイルを指定する形となりますが、データとしてどういう形で取得することができるのか、というのを確認するのが主な目的です。

今回はコンテンツリストを利用したコンポーネントを作成していきます。コンテンツリストは、Sitecore のアイテムを複数指定して、それらのデータを一括で利用したいというケースで使い勝手の良いものです。よくあるケースとしては、Meta タグで利用するキーワードを選択できるようにする、といったニーズにも使えます。

これまで紹介をしていたデータの形式は一般的なデータとして利用することが多い項目でしたが、今回はチェックボックスを紹介する地味なトピックとなります。

Web サイトのデータとして重要になってくるのがコンテンツの次にリンクになります。この部分の記述をコンポーネントではどう言った形で記述するのかを今回は紹介していきます。

日付、数字に関してはテキストのフィールドを利用して管理することもできますが、Sitecore のフィールドとしては日付、時間、数字を設定することが可能です。今回はこれらの項目を利用してコンテンツを構成できるように、フィールドの使い方を紹介していきます。

前回はテキストに関するフィールド形式を利用して、テンプレートを作成しました。今回は画像を指定できるコンポーネントを作成していきます。

Sitecore のコンテンツ管理の仕組みとしては、コンテンツのデータ構造を定義する仕組みとしてテンプレートという仕組みを提供しています。今回はデータの持ち方を定義して、どのように呼び出しをするのかについてテンプレートを作成、データの表示について紹介をしていきます。なお、このサンプルコードは Styleguide のサンプルデータとして含まれているものを紹介していく形となります。

Sitecore と連携している環境の準備ができていれば、コンポーネントの追加に関しての手順は非常に簡単なものです。今回は、jss scaffold のコマンドを利用することなく、コンポーネントを追加することで、どういう形でコンポーネントを管理しているのか、を確認します。

前回は新しいコンポーネントを作成して配置しましたが、まだ見た目は普通に HTML が表示されている程度の Tailwind CSS のデザインになっています。今回は見た目を少し変更するのと、合わせてコンテンツの属性を少し変更したいと思います。

前回の記事でヘッダー、フッターのエリアを整理しました。今回はトップページで利用する Hero エリアのコンポーネントを新規に作成していきます。この手順を通じて、新しいコンポーネントの作り方を学んでいきます。

前回は Tailwind CSS を利用できるところまで実施しました。今回はこれを利用する前に、レイアウトの中に記載されているナビゲーションのコードを別のファイルに分離する手順を確認していきます。

Next.js のサンプルは CSS のスタイルシートとして bootstrap が標準で設定されています。CSS のスタイルシートはさまざまなものが提供されていますが、今回は Tailwind CSS を利用する形に切り替えていきます。

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

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

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

ブログでこれまでヘッドレスに関しての情報を提供していました。手順に関してはリンクを貼りながら紹介していきつつ、テスト環境を素早く立ち上げる手順について今回は紹介をします。

サイトコアの新しいバージョンとなる 10.2 のリリースに合わせて Sitecore Headless Services のバージョンも 19.0.0 に変わりました。この際、Next.js のサンプルデータが入っていないプロジェクトの作成の手順が追加されました。毎回最初のステップでデータを削除するところを省略できるので、今回はこれについて紹介をします。

前回は Sitecore のインスタンスの設定および Vercel での動作まで進めました。今回は立ち上げたサンプルのサイトに関して、すでに入っているコンテンツの整理、またそれを表示するために定義されている内容などを削除して、空っぽのプロジェクトまで仕上げていきます。

前回は Sitecore のインスタンスの設定および Vercel での動作まで進めました。今回は立ち上げたサンプルのサイトに関して、すでに入っているコンテンツの整理、またそれを表示するために定義されている内容などを削除して、空っぽのプロジェクトまで仕上げていきます。

Next.js Commerce と Sitecore OrderCloud の連携で簡単にサイトに管理画面を追加する手順、前回はローカルで動くところまででしたので、今回は最後まで進めていきたいと思います。

Next.js Commerce と Sitecore OrderCloud の連携で簡単にサイトが立ち上がることがわかりました。あとは管理画面、ミドルウェア部分がポイントになりますが、これに関しては Headstart のサンプルを追加していきたいと思います。

2021 年 10 月最初の週に実施された Sitecore Symposium 2021 にて発表された Sitecore OrderCloud のテンプレートとして、Next.js Commerce との連携ができるようになりました。これにより、汎用的な Web サイトのテンプレートを使って開発をしていくことができるようになります。今回はその手順に関して紹介をしていきます。

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

これまで Next.js のサンプルの使い方を何回か紹介をしてきました。詳細に関しては過去の記事も参照していただく形となりますが、今回はサイト構築をする際の構成について、便利な機能 Vercel と組み合わせた場合どういう開発になるのかを紹介していきます。

ここでは過去に紹介した Sitecore JavaScript Service に関して紹介をしている記事一覧を紹介しています。今後も新しいトピックが随時掲載されていくため、最新情報を確認するためには JSS のタグを利用してください。

Headless SSR の動作に関して紹介をしていきました。これを手元で簡単に利用できるように、3回目としては Docker のコンテナを作成して利用する方法を紹介します。

前回は手元で Headless SSR のプロジェクトを動作させて、ページが表示できるのかどうかを確認しました。今回は、各種プラットフォームに展開をする手順に関して紹介をしていきます。

今回は JSS のアプリの展開方法について紹介をします。利用するのは前回までの JSS のアプリ、そして Sitecore のインスタンスを利用して、Node.js のアプリケーションホスティングを利用して、サイトを公開する形です。