Next.jsアプリケーションにおけるSitecoreフィールドのレンダリングのためのJSSコンポーネント
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSS for Next.jsは、Next.jsアプリケーション内のSitecoreフィールドをレンダリングするのに役立つコンポーネントを提供します。
以下の表は、SitecoreフィールドタイプとJSS Next.jsコンポーネント間の対応関係を示しています。
Sitecoreフィールドタイプ
JSS Next.js コンポーネント
日付
Date
ファイル
File
画像
Image.バージョン20.1以降は 、NextImageコンポーネントも使えるようになりました。
一般リンク
Link
単行テキスト、多行テキスト、または数値タイプ
Text
リッチテキスト
RichText
以下は、サポートされているコンポーネントの一覧と、それらの使用例です。例では、フィールドデータはPlaceholderコンポーネントによって提供されています。
日付
Dateコンポーネントは、JSSアプリケーション内の日付と時間のコンテンツフィールドのレンダリングを支援します。
Date成分は以下の性質を持ちます:
名称
概要
field
必須。
レンダリングしたいフィールド。それはSitecoreのDate型でなければなりません。フィールドデータには2つのプロパティがあります:
- valueプロパティ - Sitecoreアイテムの生フィールド値を表します。
- editableプロパティ - 編集が有効になったときにレンダリングされる編集可能なマークアップが含まれています。
tag
日付値をラップするHTML要素の名前。
デフォルト: span
editable
インライン編集を明示的に有効化または無効化してください。 true と field.editable に値がある場合、 field.editable は処理されコンポーネント出力としてレンダリングされます。 falseの場合、 field.editable 値は無視されレンダリングされません。
デフォルト: false
render
フィールド値を解析されたJavaScript Dateオブジェクトとして受け取り、コンポーネントのラッピング tag でレンダリングする値を返す関数です。日付および日付時間のローカリゼーションのフォーマットに使用できます。
使用例
日付フィールドをレンダリングするには、コンポーネントにインポートする必要があります:
import { DateField } from '@sitecore-jss/sitecore-jss-nextjs';
コンポーネントの使い方は以下の通りです:
-
簡単な日付フィールドをレンダリングするには:
-
datetimeフィールドをレンダリングするには:
-
日付をUTC形式の文字列としてレンダリングするには:
<DateField field={props.fields.date} render={(date) => date.toUTCString()} />
!注編集モードではrenderプロパティは無視されます。
このコンポーネントはフォーマット設定のためにJS Dateオブジェクトへの直接アクセスを提供します。したがって、以下のようにローカライズされた日付および日付時間文字列をレンダリングするために使用できます。
<DateField field={props.fields.date} render={(date) => date.toLocaleDateString()} /> <DateField field={props.fields.dateTime} render={(date) => {date.toLocaleString()}} />
ファイル
Fileコンポーネントはファイルリンクをレンダリングします。
File成分は以下の性質を持ちます:
名称
概要
value
必須。
レンダリングしたいルートフィールドです。これは、 src、 title、 displayNameのプロパティを持つSitecoreファイルタイプを表しています。
children
レンダリングされた タグを埋め込むReactノードです。デフォルト値はファイルです。
!重要ファイルフィールドはエクスペリエンスエディターでのインライン編集をサポートしていません。しかし、コンポーネントのデフォルトフィールドエディターを使って編集することは可能です。
ファイルフィールドをレンダリングするには、コンポーネントにインポートする必要があります:
Imageコンポーネントは編集可能でレスポンシブな画像をレンダリングできます。
画像URLに追加されたクエリ文字列パラメータに変換するImageSizeParametersの配列です。
srcSet
ネイティブ画像のsrcset属性の値として使われる、カンマ区切り文字列を生成するためのImageSizeParameters定義の配列です。
mediaUrlPrefix
メディアURLのプレフィックスを /-/jssmedia または /~/jssmediaに置き換えるカスタム正規表現です。
!重要imageParamsやsrcSetプロパティを使用する際は、セキュリティ上の理由から画像パラメータを サーバー上でホワイトリスト化 しなければなりません。
コンポーネントに追加のプロパティを渡すことができます。例えば、ネイティブ画像sizes属性の値を指定して、サーバー側のレスポンシブなレンダリング画像を有効にすることができます。
使用例
Imageコンポーネントを使用するには、それを自分のコンポーネントにインポートする必要があります:
import { Image } from '@sitecore-jss/sitecore-jss-nextjs';
Imageコンポーネントを使ってレンダリングできます:
-
シンプルな画像:
-
レスポンシブ画像:
<Image field={props.fields.sample2} srcSet={{ mw: 300 }, { mw: 100 }} sizes="(min-width: 960px) 300px, 100px" className="img-fluid" />
-
高度な設定が可能な画像。例えば、以下のサンプルは、Experience EditorのようなSitecoreコンテンツおよびレイアウトエディタでは編集できない画像をレンダリングしています。画像はimageParamsプロパティに基づいてサーバー側でリサイズされます:
<Image field={props.fields.sample2} editable={false} imageParams={{ mw: 100, mh: 50 }} height="50" width="94" data-sample="other-attributes-pass-through" />
リンク
LinkコンポーネントはGeneral Link Sitecoreフィールドの内容をレンダリングするのに役立ちます。
コンポーネントはSitecoreフィールド内のリンクが内部的かどうかをチェックし、もしそうであればNext.jsリンクコンポーネント(next/link)を使ってリンクをレンダリングします。そうでなければ、リンクコンポーネントをレンダリングします。
Link成分は以下の性質を持ちます:
名称
概要
field
必須。
レンダリングしたいルートフィールド。それはSitecore General Link フィールドタイプでなければなりません。フィールドデータは以下のプロパティを持っています:
- valueプロパティ - Sitecoreアイテムの生フィールド値を表します。
- editableFirstPartプロパティは、編集が有効になったときにレンダリングされる編集可能なマークアップの最初の部分を含みます。
- editableLastPartプロパティ- は、編集が有効になったときにレンダリングされる編集可能なマークアップの最後の部分を含みます。
editable
エディターを使うかSitecore形式のHTML出力を使うかを示します。
デフォルト: true
> [!注]
> Sitecoreからの編集可能な出力を使用する場合、LinkはSitecore提供されたマークアップの周りにラッパースパンを作成し、そのスパンにホスト要素の属性を適用します。
internalLinkMatcher
内部リンクを特定するための正則表現パターン。
デフォルト: /^\//g
showLinkTextWithChildrenPresent
子が存在してもリンク記述の表示を有効または無効にするブール式です。
> [!注]
> この設定は技術的な制約により、Sitecoreエクスペリエンスエディターでは無視され、説明は常にレンダリングされます。
使用例
Linkフィールドヘルパーコンポーネントを使用するには、それをコンポーネントにインポートする必要があります:
import { Link } from '@sitecore-jss/sitecore-jss-nextjs';
Linkコンポーネントを使ってレンダリングできます:
-
外部リンク:
-
HTMLやその他のコンポーネントを含む内部リンク:
HTML or other components can be used within link renderers, for example, links to images. -
メールリンク:
-
コンテンツパラメータのリンク:
リンクコンポーネントは追加のプロパティや属性を受け入れます。例えば:
!注エクスペリエンスエディターでは、リンクの説明は常に編集モードでレンダリングされます。リンクに子リンクがある場合は、それらはリンク説明の兄弟姉妹として表示されます。
本文
Textコンポーネントは、単行テキスト、多行テキスト、または数値フィールドのタイプのSitecoreフィールドのレンダリングを助けます。
Text成分は以下の性質を持ちます:
名称
概要
field
必須。
レンダリングしたいフィールド。フィールドデータには2つのプロパティがあります:
- valueプロパティ - Sitecoreアイテムの生フィールド値を表します。
- editableプロパティ - 編集が有効になったときにレンダリングされる編集可能なマークアップが含まれています。
tag
テキスト値をラップしたいHTML要素の名前です。
デフォルト: span
editable
エディターを使うかSitecore形式のHTML出力を使うかを示します。
デフォルト: true
encode
出力値のエンコードHTML有効または無効化します。これを false 値に設定すると、 editable: falseもなります。
デフォルト: true
複数行テキストフィールドタイプの場合、編集可能な値の中で、行切れは
に置き換えられます。編集不可の値を使えば、field.valueをJSONの改行を望むマークアップに置き換えるか、プリラップのようなCSSの空白値を利用できます。
使用例
Textコンポーネントを使用するには、それを自分のコンポーネントにインポートする必要があります:
import { Text } from '@sitecore-jss/sitecore-jss-nextjs';
レンダリングは以下の通りです:
-
デフォルトオプションがあるテキストフィールド:
-
カスタムタグ、CSSクラス、カスタム属性を持つ編集不可のテキストフィールド:
Sitecoreテキストフィールドの生値をレンダリングしたい場合は、インポート文にgetFieldValue関数を追加してください。その後、アプリケーション内で生の値を確認できます。例えば:
RichTextコンポーネントはSitecore Rich Textフィールドのレンダリングに役立ちます。
RichText成分は以下の性質を持ちます:
名称
概要
field
必須。
レンダリングしたいフィールド。フィールドデータには2つのプロパティがあります:
- valueプロパティ - Sitecoreアイテムの生フィールド値を表します。
- editableプロパティ - 編集が有効になったときにレンダリングされる編集可能なマークアップが含まれています。
tag
テキスト値をラップしたいHTML要素の名前です。
デフォルト: div
editable
エディターを使うかSitecore形式のHTML出力を使うかを示します。
デフォルト: true
使用例
RichTextコンポーネントを使用するには、それを自分のコンポーネントにインポートする必要があります:
import { RichText } from '@sitecore-jss/sitecore-jss-nextjs';
レンダリングは以下の通りです:
-
デフォルトのオプションがあるフィールド:
-
カスタムタグ、CSSクラス、カスタム属性を持つ編集不可のリッチテキストフィールド: