Published on2023年1月19日Sitecore 10.3 で Headless SXA を簡単に起動するDockerNext.jsXMHeadless-SXAこれまで数回に分けて Sitecore 10.3 のコンテナ環境、SXA の追加など手元で動かす方法を紹介してきました。毎回同じ手順を実施するのは大変なので、簡単に起動することができるリポジトリを作成しました。リポジトリを利用して起動する方法を今回は紹介します。
Published on2023年1月17日Next.js のプロジェクトを追加するDockerNext.jsXM前回作成をしたヘッドレスのサイトはまだサイトコアのアイテムがあるだけとなっています。今回はこれに Next.js のプロジェクトを追加して、ページの編集ができるところまでの紹介をします。
Published on2023年1月16日ヘッドレスサイトを追加するDockerNext.jsXMプロジェクトの作成、XM1 の環境整備、そして前回は SXA のモジュールのインストールをしました。今回はこのプロジェクトに対して、ヘッドレスのサイトを追加して、Next.js のプロジェクトと連携させていきます。手順が長くなるため、今回はヘッドレスのサイトを追加して、そのデータをいつでも再利用できるようにシリアライズができるところまで紹介をします。
Published on2023年1月12日SXA のモジュールを追加するDockerNext.jsXM前回の記事でまずはテンプレートとなるプロジェクトを作成しました。今回は、一番シンプルな XM1 を実行するためのプロジェクトにするために、不要なものを削除、調整の手順を進めていきます。
Published on2023年1月11日XM1 のプロジェクトを準備するDockerNext.jsXM前回の記事でまずはテンプレートとなるプロジェクトを作成しました。今回は、一番シンプルな XM1 を実行するためのプロジェクトにするために、不要なものを削除、調整の手順を進めていきます。
Published on2023年1月10日新しいプロジェクトを作成するDockerNext.jsXM新年あけましておめでとうございます。今年も Sitecore に関する技術的な情報をブログで提供していきたいと思います。実は Sitecore の技術情報は日本語で多く提供しているのですが、いざ始めるとなるとどこから手を付けていいのか悩ましいですよね。ということで、新年最初の投稿は、新しいプロジェクトをサクッと作るところを紹介します。
Published on2022年12月23日Next.js Commerce と OrderCloud の連携OrderCloudNext.jsNext.js Commerce との連携の手順を以前にも紹介していましたが、時間が経ったこともありアップデートがあります。今回は、最短で立ち上げるための手順を改めて紹介したいと思います。
Published on2022年12月21日HTML のページを追加するNext.jsXM-Cloudすでに Web サイトのコンテンツがあって、HTML のデータがあるという際に、Next.js をベースのサイトの場合はどうすれば良いでしょうか?実は Next.js の基本的な機能を利用すれば、HTML ファイルなどを一通りサーバーにホストすることが可能です。
Published on2022年12月12日Next.js に Google Tag Manager を設定する - XM Cloud 編XM-CloudXMHeadless-SXANext.jsXM Cloud のサイトを外部に公開をしました。他のサービスと連携させるためにも、まずは Google Tag Manager を設定します。
Published on2022年9月26日Experience Edge を利用して Vercel に展開するHeadlessNext.jsVercelこれまでサーバーとして Sitecore を仮想マシンとして起動していましたが、エンドポイントとして Sitecore Experience Edge というサービスを展開しており、これを利用することで Next.js のアプリを Vercel に簡単に展開することができます。今回はその展開手順に関して紹介をします。
Published on2022年9月21日Sitecore Headless 開発、テスト環境を起動するHeadlessNext.js前々回に Next.js のテンプレートの準備を、前回はそれを利用するための Sitecore にアイテムをインポートする手順を紹介しました。今回は Next.js の設定を変更して、Sitecore のアイテムを参照してページが表示されるところまで紹介をします。
Published on2022年9月20日Sitecore Headless 開発、テスト環境の構築 Part 8 - プロジェクトの整理( 設定の一元管理 )HeadlessNext.jsテスト環境の設定に関して、この項目を入力してください、などの記述をしていましたが実際に使うとなるともう少し自動化したほうが良い形になってきました。そこで最後に設定を .env ファイルに集約する形に書き換えていきます。
Published on2022年9月16日Sitecore Headless 開発、テスト環境の構築 Part 7 - プロジェクトの整理( CD サーバーの削除 )HeadlessNext.jsすでにプロジェクトとしてはヘッドレスの検証環境を用意した形となりますが、今回と次回で不要な部分を削除、整理していきたいと思います。今回はヘッドレスで起動することになったので、CD サーバーの構成を削除したいと思います。
Published on2022年9月15日Sitecore Headless 開発、テスト環境の構築 Part 6 - エクスペリエンス エディターを利用できるようにするHeadlessNext.js前回は Node.js をベースとしたコンテナを立ち上げて、そのコンテナで Next.js を起動しました。Next.js は Sitecore からデータを取得してページを表示している形です。今回は、Sitecore が Node.js のコンテナに接続して、エクスペリエンスエディターが起動するところまで進めていきます。
Published on2022年9月14日Sitecore Headless 開発、テスト環境の構築 Part 5 - Node.js コンテナの追加HeadlessNext.jsこれまで紹介してきた内容は、 Sitecore をコンテナで起動、その後テンプレートを追加、サーバーでの動作というところまで進めてきました。サーバーの環境では、Vercel を利用してページの編集、確認ができるようにしましたが、ローカルのコンテナの環境では Vercel の部分が不足している形となります。そこで今回は、この部分を Node.js のコンテナを追加して同じように動作する設定を作成します。
Published on2022年9月5日エクスペリエンス エディターを利用できるようにするHeadlessNext.jsVercel前回は Vercel に新しいサイトを展開することができました。このインスタンスを利用して、エクスペリエンスエディターでページの編集をできるように進めていきます。
Published on2022年9月2日Vercel に展開するHeadlessNext.jsVercelこれまで作成をしてきた Web サイトを Vercel に展開したいと思います。シリーズの最初の頃に立ち上げたサーバーに対してサンプルのデータを展開、合わせて Vercel に展開する手順を紹介していきます。
Published on2022年9月1日Next.js サンプルサイトの追加(後編)HeadlessNext.js前々回に Next.js のテンプレートの準備を、前回はそれを利用するための Sitecore にアイテムをインポートする手順を紹介しました。今回は Next.js の設定を変更して、Sitecore のアイテムを参照してページが表示されるところまで紹介をします。
Published on2022年8月31日Sitecore CLI を利用してアイテムのインポートHeadlessNext.js前回は Next.js のテンプレートをプロジェクトに追加しましたが、この段階では Sitecore には何もデータが無いためエラーとなります。そこで、Sitecore CLI を利用して、サンプルデータをインポートしたいと思います。
Published on2022年8月30日Next.js サンプルサイトの追加(前編)HeadlessNext.js4回に分けて作成をしてきた環境にはまだ Next.js のプロジェクトがないため、サンプルサイトを追加していきます。プロジェクトにコードを追加する形です。この手順は2回に分けて紹介をしていく予定です。今回は、まず Next.js のサンプルが動くところまで進めていきます。
Published on2022年5月20日Sitecore Helix の Next.js サンプルを動かす - コンテナを起動するデモNext.jsDocker前回は環境を準備するところまでとして、コンテナを起動することはありませんでした。今回は、サンプルを実行するためのスクリプト up.ps1 を参考にしながらどういう形でコンテナを起動することになるのかを確認していきます。
Published on2022年5月19日Sitecore Helix の Next.js サンプルを動かす - 準備デモNext.jsDockerSitecore が提供しているデモ Sitecore Helix に、Next.js をベースにしたサンプルが含まれています。今回は、このサンプルを動かすところまでの手順を紹介していきます。なお、今回は設定までとして、実際にコンテナを起動するのは次回紹介する予定です。
Published on2022年5月12日Sitecore Headless - Next.js Tips シリーズNext.jsHeadlessNext.js の SDK を利用して Sitecore をヘッドレス CMS で開発をする際の各種ヒントを個別のトピックとして紹介しています。ここでは一覧で表示していますので参考にしてください。
Published on2022年4月21日ルートアイテムの作成Next.jsHeadlessこれまで Next.js ベースのサンプルとして作成していたアイテムは JSS のサンプルをインポートした時のルートアイテムをベースに作成をしていました。今回はルートアイテムに相当するものを作成する手順を紹介して行きます。
Published on2022年4月15日プレースホルダーの作成Next.jsHeadlessSitecoreXMSitecore でレイアウトのエリアに関して、名前をつける機能をプレースホルダーという形で定義することができます。これを利用することで、プレースホルダーに配置することができるコンポーネントの制限をしたり、プレースホルダーを階層化して管理することができるようになります。今回はこのプレースホルダーの考え方、そして作り方を紹介していきます。
Published on2022年4月14日コンポーネントの作成とテンプレート連携 - ファイル編Next.jsHeadlessコンポーネント作成シリーズの最後として、ファイルを指定することができるファイルコンポーネントを作成します。ファイル自体はメディアライブラリにあるファイルを指定する形となりますが、データとしてどういう形で取得することができるのか、というのを確認するのが主な目的です。
Published on2022年4月13日コンポーネントの作成とテンプレート連携 - コンテンツリスト編Next.jsHeadless今回はコンテンツリストを利用したコンポーネントを作成していきます。コンテンツリストは、Sitecore のアイテムを複数指定して、それらのデータを一括で利用したいというケースで使い勝手の良いものです。よくあるケースとしては、Meta タグで利用するキーワードを選択できるようにする、といったニーズにも使えます。
Published on2022年4月12日コンポーネントの作成とテンプレート連携 - チェックボックス編Next.jsHeadlessこれまで紹介をしていたデータの形式は一般的なデータとして利用することが多い項目でしたが、今回はチェックボックスを紹介する地味なトピックとなります。
Published on2022年4月7日コンポーネントの作成とテンプレート連携 - リンクフィールド編Next.jsHeadlessWeb サイトのデータとして重要になってくるのがコンテンツの次にリンクになります。この部分の記述をコンポーネントではどう言った形で記述するのかを今回は紹介していきます。
Published on2022年4月6日コンポーネントの作成とテンプレート連携 - 日付と数字編Next.jsHeadless日付、数字に関してはテキストのフィールドを利用して管理することもできますが、Sitecore のフィールドとしては日付、時間、数字を設定することが可能です。今回はこれらの項目を利用してコンテンツを構成できるように、フィールドの使い方を紹介していきます。
Published on2022年4月5日コンポーネントの作成とテンプレート連携 - 画像編Next.jsHeadless前回はテキストに関するフィールド形式を利用して、テンプレートを作成しました。今回は画像を指定できるコンポーネントを作成していきます。
Published on2022年4月4日コンポーネントの作成とテンプレート連携 - テキスト編Next.jsHeadlessSitecore のコンテンツ管理の仕組みとしては、コンテンツのデータ構造を定義する仕組みとしてテンプレートという仕組みを提供しています。今回はデータの持ち方を定義して、どのように呼び出しをするのかについてテンプレートを作成、データの表示について紹介をしていきます。なお、このサンプルコードは Styleguide のサンプルデータとして含まれているものを紹介していく形となります。
Published on2022年3月25日コンポーネントの作成Next.jsHeadlessSitecore と連携している環境の準備ができていれば、コンポーネントの追加に関しての手順は非常に簡単なものです。今回は、jss scaffold のコマンドを利用することなく、コンポーネントを追加することで、どういう形でコンポーネントを管理しているのか、を確認します。
Published on2022年3月24日多言語サイトのコンテンツに切り替えるNext.js多言語Next.js のテンプレートはすでに多言語対応のモジュールが入っているため、Sitecore 側の設定を追加することで比較的簡単に言語を増やすことができます。そこで今回は、日本語のリソースを追加したいと思います。
Published on2022年3月18日Hero エリアの部品を作成する(後編)tailwind.cssNext.jsHeadless前回は新しいコンポーネントを作成して配置しましたが、まだ見た目は普通に HTML が表示されている程度の Tailwind CSS のデザインになっています。今回は見た目を少し変更するのと、合わせてコンテンツの属性を少し変更したいと思います。
Published on2022年3月16日Hero エリアの部品を作成する(前編)Next.jsHeadless前回の記事でヘッダー、フッターのエリアを整理しました。今回はトップページで利用する Hero エリアのコンポーネントを新規に作成していきます。この手順を通じて、新しいコンポーネントの作り方を学んでいきます。
Published on2022年3月15日ナビゲーションを分離するtailwind.cssNext.jsHeadless前回は Tailwind CSS を利用できるところまで実施しました。今回はこれを利用する前に、レイアウトの中に記載されているナビゲーションのコードを別のファイルに分離する手順を確認していきます。
Published on2022年3月14日Tailwind.css を Next.js のサンプルに適用するtailwind.cssNext.jsHeadlessNext.js のサンプルは CSS のスタイルシートとして bootstrap が標準で設定されています。CSS のスタイルシートはさまざまなものが提供されていますが、今回は Tailwind CSS を利用する形に切り替えていきます。
Published on2022年2月25日Next.js に Google Tag Manager を設定するNext.jsGoogle-Tag-Manager今回は少し趣向を変えて Sitecore ではなく Next.js で Google Tag Manager を適用するための手順を紹介します。テストも含めて、実施していきます。
Published on2022年2月22日Sitecore Headless - Sitecore First に変更するSitecoreHeadlessNext.jsこれまで Sitecore の SDK のサンプルのコードを展開するところにフォーカスしていましたが、ここからは Sitecore で作業をしてコードで補完する形の開発をしていく手順に切り替えていきます。後半では以前に紹介をした空っぽのプロジェクトを作る手順を改めて確認して、実際につながるところまで進めていきます。
Published on2022年2月21日Sitecore Headless - Next.js ステージングの追加SitecoreHeadlessNext.js前回の記事で、Next.js のサンプルを Sitecore に展開、また実際のデリバリーとして Vercel と連携する形まで用意をしました。今回は、もう少しテスト、検証をしやすくするためにプロダクションとステージング環境を分けて、ローカルでもテストする手順を紹介をしていきます。
Published on2022年2月18日Sitecore Headless - Next.js 評価環境の構築SitecoreHeadlessNext.jsブログでこれまでヘッドレスに関しての情報を提供していました。手順に関してはリンクを貼りながら紹介していきつつ、テスト環境を素早く立ち上げる手順について今回は紹介をします。
Published on2021年12月22日Next.js のサンプルデータが含まれないプロジェクトの作成SitecoreHeadlessNext.jsサイトコアの新しいバージョンとなる 10.2 のリリースに合わせて Sitecore Headless Services のバージョンも 19.0.0 に変わりました。この際、Next.js のサンプルデータが入っていないプロジェクトの作成の手順が追加されました。毎回最初のステップでデータを削除するところを省略できるので、今回はこれについて紹介をします。
Published on2021年10月29日Sitecore ヘッドレス と Next.js でサイト構築 - コンポーネントの追加JSSNext.jsHeadless前回は Sitecore のインスタンスの設定および Vercel での動作まで進めました。今回は立ち上げたサンプルのサイトに関して、すでに入っているコンテンツの整理、またそれを表示するために定義されている内容などを削除して、空っぽのプロジェクトまで仕上げていきます。
Published on2021年10月27日Sitecore ヘッドレス と Next.js でサイト構築 - 空プロジェクトの作成JSSNext.jsHeadless前回は Sitecore のインスタンスの設定および Vercel での動作まで進めました。今回は立ち上げたサンプルのサイトに関して、すでに入っているコンテンツの整理、またそれを表示するために定義されている内容などを削除して、空っぽのプロジェクトまで仕上げていきます。
Published on2021年10月21日Next.js Commerce と OrderCloud の連携 - Middleware と Seller の追加(後編)OrderCloudNext.jsHeadlessNext.js Commerce と Sitecore OrderCloud の連携で簡単にサイトに管理画面を追加する手順、前回はローカルで動くところまででしたので、今回は最後まで進めていきたいと思います。
Published on2021年10月20日Next.js Commerce と OrderCloud の連携 - Middleware と Seller の追加(前編)OrderCloudNext.jsHeadlessNext.js Commerce と Sitecore OrderCloud の連携で簡単にサイトが立ち上がることがわかりました。あとは管理画面、ミドルウェア部分がポイントになりますが、これに関しては Headstart のサンプルを追加していきたいと思います。
Published on2021年10月19日Next.js Commerce と OrderCloud の連携OrderCloudNext.jsHeadless2021 年 10 月最初の週に実施された Sitecore Symposium 2021 にて発表された Sitecore OrderCloud のテンプレートとして、Next.js Commerce との連携ができるようになりました。これにより、汎用的な Web サイトのテンプレートを使って開発をしていくことができるようになります。今回はその手順に関して紹介をしていきます。
Published on2021年9月9日Sitecore ヘッドレス と Next.js でサイト構築 - Vercel 環境の構築JSSNext.jsHeadlessVercelこれまで Next.js のサンプルの使い方を何回か紹介をしてきました。詳細に関しては過去の記事も参照していただく形となりますが、今回はサイト構築をする際の構成について、便利な機能 Vercel と組み合わせた場合どういう開発になるのかを紹介していきます。
Published on2021年5月15日ブログをリニューアルしましたNext.jsDocusaurus も v2 beta になったのと慣れはし始めたのですが、お仕事で Next.js を利用することが増えてきそうなので、ベースを切り替えてみました。
Published on2021年4月20日Sitecore JSS - Next.js SDK を利用してサンプルサイトを構築 - Part.4JSSNext.js前回はエクスペリエンスエディターを利用した設定に関して紹介をしました。Next.js のアプリを作っていく際に、Sitecore で管理しているコンテンツを使いながら開発することはできるのでしょうか?今回は開発中に Sitecore のデータを参照する設定について、紹介します。
Published on2021年4月19日Sitecore JSS - Next.js SDK を利用してサンプルサイトを構築 - Part.3JSSNext.jsこれまで2回にわたって基本的なポイントを紹介していましたが、今回は Next.js で作っているページを Sitecore のみたまま編集ツールであるエクスペリエンスエディターと組み合わせて動かす手順を紹介します。
Published on2021年4月16日Sitecore JSS - Next.js SDK を利用してサンプルサイトを構築 - Part.2JSSNext.js前回は、Next.js のテンプレートからサンプルデータを削除して、日本語のコンテンツを表示するところまで紹介をしました。今回は、このサンプルのサイトを Sitecore Experience Platform と連携させる手順を紹介します。
Published on2021年4月13日Sitecore JSS - Next.js SDK を利用してサンプルサイトを構築 - Part.1JSSNext.jsSitecore 10.1 から Sitecore Headless Service は標準機能として提供することになりました。合わせて静的サイトに対応した React ベースの Next.js の SDK もリリースをしました。今回から数回に分けて、Next.JS SDK を利用してサンプルサイトを構築する手順をブログでシリーズ化して紹介をしていきます。