Tailwind Logo

ブログ

ブログの記事を時系列で確認することが出来ます

Next.js

コンポーネントの作成とテンプレート連携 - 日付と数字編

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



Next.js

コンポーネントの作成とテンプレート連携 - テキスト編

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


Next.js

コンポーネントの作成

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


Next.js

多言語サイトのコンテンツに切り替える

Next.js のテンプレートはすでに多言語対応のモジュールが入っているため、Sitecore 側の設定を追加することで比較的簡単に言語を増やすことができます。そこで今回は、日本語のリソースを追加したいと思います。


Next.js

Sitecore Horizon のインストール

これまで Sitecore の編集環境としてはコンテンツエディター、エクスペリエンスエディターと2つのツールを利用していました。全体を見渡すことができるコンテンツエディター、見たまま編集を実現するエクスペリエンスエディターという位置付けです。今回紹介をする Sitecore Horizon はその2つのいいところ取りの製品になります。


Sitecore Connect for Content Hub 5.0 のインストール

以前にこのブログでも Sitecore の CMS と Content Hub を連携させるコネクタのインストールの手順を紹介しましたが、コネクタの新しいバージョンがリリースされました。このリリースからは Sitecore Install Framework を利用したインストールに対応をしているので、今回はこの手順を紹介します。


Next.js

Hero エリアの部品を作成する(後編)

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


Next.js

Hero エリアの部品を作成する(前編)

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


Next.js

ナビゲーションを分離する

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


Next.js

Tailwind CSS を Next.js のサンプルに適用する

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


Send

Moosend と Sitecore Send の紹介

昨年、このブログでも紹介をした Moosend のサービスを、Sitecore としてのサービスとして Sitecore Send という形で企業向けのサービスとして展開を開始しました。改めて製品の紹介と 2 つの製品の違いは何か?というのを今回は紹介します。