コンポーネントの作成とテンプレート連携 - 日付と数字編
日付、数字に関してはテキストのフィールドを利用して管理することもできますが、Sitecore のフィールドとしては日付、時間、数字を設定することが可能です。今回はこれらの項目を利用してコンテンツを構成できるように、フィールドの使い方を紹介していきます。
Next.js
Next.jsは、Reactベースのフレームワークで、Reactを使用してサーバーサイドレンダリングと静的サイト生成を可能にする機能を提供します。
コンポーネントの作成とテンプレート連携 - 画像編
前回はテキストに関するフィールド形式を利用して、テンプレートを作成しました。今回は画像を指定できるコンポーネントを作成していきます。
コンポーネントの作成とテンプレート連携 - テキスト編
Sitecore のコンテンツ管理の仕組みとしては、コンテンツのデータ構造を定義する仕組みとしてテンプレートという仕組みを提供しています。今回はデータの持ち方を定義して、どのように呼び出しをするのかについてテンプレートを作成、データの表示について紹介をしていきます。なお、このサンプルコードは Styleguide のサンプルデータとして含まれているものを紹介していく形となります。
コンポーネントの作成
Sitecore と連携している環境の準備ができていれば、コンポーネントの追加に関しての手順は非常に簡単なものです。今回は、jss scaffold のコマンドを利用することなく、コンポーネントを追加することで、どういう形でコンポーネントを管理しているのか、を確認します。
多言語サイトのコンテンツに切り替える
Next.js のテンプレートはすでに多言語対応のモジュールが入っているため、Sitecore 側の設定を追加することで比較的簡単に言語を増やすことができます。そこで今回は、日本語のリソースを追加したいと思います。
Sitecore Horizon のインストール
これまで Sitecore の編集環境としてはコンテンツエディター、エクスペリエンスエディターと２つのツールを利用していました。全体を見渡すことができるコンテンツエディター、見たまま編集を実現するエクスペリエンスエディターという位置付けです。今回紹介をする Sitecore Horizon はその２つのいいところ取りの製品になります。
Hero エリアの部品を作成する（後編）
前回は新しいコンポーネントを作成して配置しましたが、まだ見た目は普通に HTML が表示されている程度の Tailwind CSS のデザインになっています。今回は見た目を少し変更するのと、合わせてコンテンツの属性を少し変更したいと思います。
Hero エリアの部品を作成する（前編）
前回の記事でヘッダー、フッターのエリアを整理しました。今回はトップページで利用する Hero エリアのコンポーネントを新規に作成していきます。この手順を通じて、新しいコンポーネントの作り方を学んでいきます。
ナビゲーションを分離する
前回は Tailwind CSS を利用できるところまで実施しました。今回はこれを利用する前に、レイアウトの中に記載されているナビゲーションのコードを別のファイルに分離する手順を確認していきます。
Tailwind CSS を Next.js のサンプルに適用する
Next.js のサンプルは CSS のスタイルシートとして bootstrap が標準で設定されています。CSS のスタイルシートはさまざまなものが提供されていますが、今回は Tailwind CSS を利用する形に切り替えていきます。
Next.js に Google Tag Manager を設定する
今回は少し趣向を変えて Sitecore ではなく Next.js で Google Tag Manager を適用するための手順を紹介します。テストも含めて、実施していきます。
Sitecore Headless - Next.js ステージングの追加
前回の記事で、Next.js のサンプルを Sitecore に展開、また実際のデリバリーとして Vercel と連携する形まで用意をしました。今回は、もう少しテスト、検証をしやすくするためにプロダクションとステージング環境を分けて、ローカルでもテストする手順を紹介をしていきます。