JSS for Vue.jsが提供するフィールドヘルパーコンポーネント

Version: 22.x

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

JSS for Vue.jsには、Sitecoreフィールド値のレンダリングに役立つヘルパーコンポーネントが用意されています。

sitecore-jss-vueから公開されるヘルパーコンポーネントは、通常はステートフルコンポーネントであるPlaceholderを除いて、ステートレスな機能コンポーネントです。

Vue.jsでの属性の継承に従って、コンポーネントに渡されるプロパティ以外の属性は、外側のタグにHTML属性としてレンダリングされます。コンポーネントに渡されたイベントも伝播されます。

メモ

sitecore-jss-vueから公開されるヘルパーコンポーネントは、app.component()などのメソッドを使用してグローバルに登録されません。これは、グローバルなコンポーネント空間を汚染しないように、またWebpackやRollupなどのバンドルツールのツリーシェイク機能に合わせるために意図的なものです。したがって、使用するヘルパーコンポーネントを独自のコンポーネントでローカルに要求/インポートする必要があります。

以下は、サポートされているすべてのフィールドヘルパーコンポーネントのリストと、それらの使用方法の例です。次の例では、フィールドデータはプレースホルダコンポーネントによって提供されます。

テキスト

RequestResponse

<template>
  <sc-text tag="h1" :field="fields.title" />
</template>
<script>
import { Text } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScText: Text
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
field	レンダリングするフィールド。通常、Sitecoreフィールドタイプは 1行テキストまたは複数行テキストのいずれかですが、数値タイプを使用することもできます。	-
tag	テキスト値を折り返すHTML要素の名前。	span
editable	エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。	true
encode	出力値のHTMLエンコードを有効または無効にします。falseの値は、editable: falseも意味します。	true

複数行テキストの場合、指定された編集可能な値では、改行はすべて <br />に置き換えられます。編集不可能な値を使用する場合は、field.valueを処理して改行JSON目的のマークアップに置き換えるか、pre-wrapなどのCSS空白値を使用できます。

リッチテキスト

RequestResponse

<template>
  <sc-rich-text tag="div" :field="fields.text" />
</template>
<script>
import { RichText } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScRichText: RichText
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
field	レンダリングするフィールド。Sitecoreリッチテキストタイプである必要があります。	-
tag	リッチテキスト値をラップするHTML要素名。	div
editable	エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。	true

画像

画像コンポーネントは、srcSet属性に属性として指定されている場合、その属性に特別な処理を提供します。 srcSetの各要素のクエリ文字列パラメータを表すオブジェクトの配列を指定できます。これにより、sizesプロパティと組み合わせると、サーバー側レンダリングでレスポンシブイメージが可能になります。

RequestResponse

<template>
  <sc-image :media="fields.image" />
</template>
<script>
import { Image } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScImage: Image
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
media	レンダリングするルートフィールド。Sitecoreイメージタイプである必要があります。	-
editable	Sitecore形式の出力を使用する必要があるかどうかを示します。	true
imageParams	画像URLに追加するクエリ文字列パラメーター。手記 JSSはメディアURLのセキュリティハッシュをサポートしていないため、これらのパラメータセットはサーバー上でホワイトリストに登録する必要があります。	-

リンク

RequestResponse

<template>
  <sc-link :field="fields.link" />
</template>
<script>
import { Link } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScLink: Link
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
field	レンダリングするルートフィールド。Sitecoreの一般リンクタイプである必要があります。	-
editable	エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。手記 Sitecoreからの編集可能な出力を使用する場合、LinkはSitecoreが提供するマークアップの周囲にラッパースパンを作成し、このスパンにホスト要素属性を適用します。	true
showLinkTextWithChildrenPresent	子が存在する場合でもリンクの説明の表示を有効または無効にするブール式。手記 Sitecoreエクスペリエンスエディターでは、技術的な制限によりこの設定は無視され、説明は常にレンダリングされます。

手記

エクスペリエンスエディターエディターモードでは、リンクの説明が常にレンダリングされます。リンクに子がある場合、それらはリンクの説明の兄弟としてレンダリングされます。

ファイル

RequestResponse

<template>
  <sc-file :field="fields.file" />
</template>
<script>
import { File } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScFile: File
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容
field	レンダリングするルートフィールド。Sitecoreファイルタイプである必要があります。

大事な

Fileフィールドは、Sitecoreのエクスペリエンスエディターでのインライン編集をサポートしていませんが、コンポーネントのデフォルトのフィールドエディターを使用して編集できます。

日付

RequestResponse

<template>
  <sc-date :field="fields.date" :formatter="formatDate" />
</template>
<script>
import { Date } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScDate: Date
  },
  methods: {
    formatDate(date) {
      return date && date.toISOString();
    }
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
field	レンダリングするフィールド。Sitecoreの日付タイプである必要があります。	-
tag	日付値をラップするHTML要素の名前。	span
editable	エクスペリエンスエディター/Sitecore形式のHTML出力を使用する必要があるかどうかを示します。	true
formatter	解析されたJavaScript Dateオブジェクトとしてフィールド値を受け取り、コンポーネントのラッピングtagにレンダリングする値を返す関数。	-

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、

JSS for Vue.jsが提供するフィールド ヘルパー コンポーネント

テキスト

リッチテキスト

画像

リンク

ファイル

日付

JSS for Vue.jsが提供するフィールドヘルパーコンポーネント