コードファーストの JSS アプリにマニフェスト定義を追加する

Version: 20.x
日本語翻訳に関する免責事項

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

コンポーネントをスキャフォールディングするときに、スクリプトを変更して機能を削除していない場合、JSS は新しいコンポーネントのマニフェスト定義を自動的に作成します。ただし、コンポーネント ファイルを作成するだけの場合は、Manifest API インスタンス メソッドを使用してマニフェスト アイテムに追加できます。また、Manifest API インスタンス メソッドを使用して、新しいルート タイプやその他のタイプのアイテムを登録することもできます。

これらのメソッドは、sitecore/definitions/ ディレクトリにあるマニフェスト定義ファイルで使用します。ファイル名は、*.sitecore.[js|ts] の規則に従う必要があります。アスタリスクは、SearchBox.sitecore.js などのコンポーネント名、または placeholders.sitecore.js などのアイテム タイプを表します。

Manifest API インスタンス メソッド

Manifest API は、登録用に次のインスタンス メソッドを提供します。

  • addComponent(...components: component[]) - JSS アプリ コンポーネント定義を登録します。

  • addContent(...contents: content[])

  • addRoute(...routes: route[]) - アプリ ルート データ定義を追加します。

  • addRouteType(...routeTypes: template[]) - ルートに Sitecore テンプレート タイプを追加します。

  • addTemplate(...templates: template[])

  • addPlaceholder(...templates: template[]) - マニフェストにプレースホルダー定義を追加します。

マニフェスト オブジェクト

Manifest API インスタンス メソッドを使用してマニフェスト定義を追加するには、定義が次のスキーマと一致する必要があります。

ヒント

JS 型付けを理解するエディター (VS Code など) を使用すると、エディター内の型情報にアクセスできます。これには、役立つ注釈が含まれます。

コンポーネント

RequestResponse
{
  id: string:optional,
  name: string:required,
  displayName: string:optional,
  fields: fields:optional,
  params: params:optional,
  placeholders: placeholders:optional, // placeholders exposed by rendering
  allowedPlaceholders: array[string]:optional, // placeholders component is allowed in (normally inferred by route data)
  displayFieldEditorButton: boolean:optional = true,
  fieldEditorFields: array[string]:optional = all fields, // field names
  customExperienceButtons: array[string]:optional, // names or IDs
  insertOptions: array[string]:optional, // template names or IDs
  graphQLQuery: string:optional, // see GraphQL integrated documentation
  // note: while these use the same structure as a route, they do not use placeholders and are not mapped as routes. 
  // This enables adding child items to the datasource.
  children: array[route] 
}
注記

displayFieldEditorButton プロパティと fieldEditorFields プロパティを使用すると、Sitecore エクスペリエンス エディターのコンポーネントに自動的に追加されるフィールド エディター ボタンの動作を制御できます。このボタンをを使用すると、すべてのコンポーネント データをポップアップ フォーム インターフェイスで編集できます。既定では、すべてのコンポーネントにボタンが表示され、すべてのコンポーネント フィールドが編集可能です。これが目的の動作である場合は、これらのプロパティを指定する必要はありません。

コンテンツ

コンテンツ データはルート データと同じスキーマを使用します。ただし、placeholders プロパティは効果がないため、通常は使用されません。

フィールド

type プロパティには、使用可能な CommonFieldTypes 値のいずれかを使用することを推奨します。

RequestResponse
{
  name: string:required,
  type: string|CommonFieldTypes:required,
  displayName: string:optional,
  required: bool:optional,   // whether the field must have a value entered
  validationPattern: string:optional, // regular expression (C#) to determine value validity
  validationMessage: string:optional, // message shown when validationPattern fails
  standardValue: string:optional, // the default value this field gets when a content editor creates a new item using it
  section: string:optional, // Sitecore template section name
  source: string:optional,  // Sitecore template field source (field-type specific)
  sortOrder: int:optional,  // Template field sort order. Defaults to order defined in JSON.
  storage: string:optional,  // Sitecore field storage: versioned (default), unversioned, shared (DO NOT CHANGE AFTER IMPORTED)
  id: string:optional
}

CommonFieldTypes

RequestResponse
{
  SingleLineText: 'Single-Line Text',
  MultiLineText: 'Multi-Line Text',
  RichText: 'Rich Text',
  ContentList: 'Treelist',
  ItemLink: 'Droptree',
  GeneralLink: 'General Link',
  Image: 'Image',
  File: 'File',
  Number: 'Number',
  Checkbox: 'Checkbox',
  Date: 'Date',
  DateTime: 'Datetime',
}
注記

カスタム Sitecore フィールド タイプまたは CommonFieldTypes 列挙にないその他のタイプの場合は、Sitecore のフィールド タイプ名の文字列 (つまり、Single-Line Text) を渡すことができます。VS Code などの型注釈をサポートするエディターでは、この列挙型に対してオート コンプリートが提供されます。

パラメーター

RequestResponse
{
  name: string:required
}

プレースホルダー

RequestResponse
{
  name: string:required,
  displayName: string:optional
}

プレースホルダー

RequestResponse
{
  placeholderName: array[component]:optional,
  // additional placeholder key/values can be added
}

ルート

RequestResponse
{
  id: string:optional,
  name: string:required,
  displayName: string:optional,
  template: string:optional, // note: this is optional in yaml/json as its defaulted before adding to manifest
  fields: fields:optional,
  children: array[route]:optional,
  placeholders: placeholders:optional,
  insertOptions: array[string]:optional,
}

テンプレート

RequestResponse
{
  name: string:required,
  displayName: string:optional,
  inherits: array[string]:optional, // names of JSS template(s) to inherit from, OR Sitecore item GUIDs for non-JSS templates
  fields: array[field]:optional,
  icon: string:optional, // e.g. People/16x16/alarmclock.png
  defaultWorkflow: string:optional // e.g. /sitecore/system/Workflows/Sample Workflow
}

フィールド

RequestResponse
{
  fieldName: object[fieldName] = field:required
  // additional field key/values can be added, see the following
}

パラメーター

RequestResponse
{
  paramName: array[string]:required,
  // additional param key/values can be added
  // note: all param values are provided to the component as strings,
  // even if the defined value is a number/boolean value.
}

imageFieldValue

画像フィールドの値は、field が画像タイプの場合に使用されます。通常のフィールドに比べて追加のプロパティがあります。

RequestResponse
{
  id: string:optional,
  src: string:required,         // src of image. Should be under /sitecore/media on the JSS app.
  alt: string:required,
  displayName: string:optional, // media item display name
  title: string:optional,       // media item field
  keywords: string:optional,    // media item field
  description: string:optional, // media item field
  width: int:optional,
  height: int:optional,
  class: string:optional        // rendered image CSS class

}

linkFieldValue

リンク フィールドの値は、field がリンク タイプの場合に使用されます。通常のフィールドに比べて追加のプロパティがあります。

RequestResponse
{
  href: string:required,
  text: string:optional,        // link body text
  class: string:optional,       // rendered <a> css class
  target: string:optional,      // target attribute e.g. _blank
  title: string:optional        // title attribute of <a>
}

multilistFieldValue

Sitecore マルチリスト フィールドを定義するには、マルチ リストで選択されたアイテム定義を (配列として) 指定するか、ID 参照を使用して共有コンテンツ エリアで定義されたアイテム (または明示的な GUID を使用して Sitecore のアプリ以外のアイテムを参照) を取得します。

RequestResponse
// definition using an array of content items (routes without placeholders)
[route]:required

// complete example including the top level fields (YAML):
fields:
  multilistFieldName:
  - name: Option1
    fields:
      title:
        value: Hello
  - name: Option2
  # ...

// or define it using ID references to shared content items (also YAML):
fields:
  multilistFieldName:
  - id: option-1
  - id: option-2
  # ...

日付フィールド値の処理

マニフェスト内の日付フィールドの値は、ISO 8601形式の文字列を使用してフォーマットされます (例: 2012-04-23T18:25:43.511Z)。

注記

これは JavaScript の日付形式であり、Sitecore が日付フィールドの値を内部にする方法とは異なります。Sitecore 形式の日付は機能しません。

マニフェスト定義の例

JSS アプリケーションを作成すると、アプリには既にいくつかのマニフェスト定義があります。最も一般的なマニフェスト定義は、アプリのインポート時に Sitecore にプレースホルダーとコンポーネントを登録するためのものですが、フィールドをルートに追加するなど、他のユース ケースにもマニフェスト定義を使用できます。

プレースホルダー

マニフェストでプレースホルダーを明示的に定義するかどうかは任意です。ルートによって参照されるプレースホルダー名は、マニフェストによって自動的に認識されます。ただし、プレースホルダーを明示的に登録すると、プレースホルダーの表示名を設定して、コンテンツ エディターが appname-content-leftside-upsidedown-2 よりも分かりやすいものを表示できるようにすることができます。

明示的なプレースホルダー定義は、/sitecore/definitions/placeholders.sitecore.js ファイル内の行です。名前の中の .sitecore は必須です。

例:

RequestResponse
import { addPlaceholder } from '@sitecore-jss/sitecore-jss-dev-tools';

export default (manifest) => {
  addPlaceholder(manifest, 
    { name: 'appname-main', displayName: 'Main' },
    { name: 'appname-content', displayName: 'Content' });
};

コンポーネント

JSS が Sitecore 内にコンポーネントを登録し、必要なコンテンツを提供するための適切なインフラストラクチャを提供できるように、ルートに追加される各フロントエンド コンポーネントを定義する必要があります。

コンポーネント定義は通常、/sitecore/definitions/components/<ComponentName>.sitecore.{js|ts} に保存されます。例:

RequestResponse
/*
NOTE: if you use an editor, such as VS Code, that reads typing data from imported libraries, you will receive code completion hints for the manifest definitions.
*/
import { addComponent } from '@sitecore-jss/sitecore-jss-dev-tools';

export default (manifest) => {
  addComponent(manifest, {
    // this name must match the name that is used to add the component to routes,
    // and the name used when the component JS implementation is registered to the componentFactory
    name: 'ConnectedPage',
    // you can use a friendly name for the component to be nice to your authors
    displayName: 'Connected Page',
    // define the content fields, and their data types, that are needed for the component
    fields: [
      { name: 'title', type: manifest.fieldTypes.singleLineText },
      { name: 'text', type: manifest.fieldTypes.richText },
      { name: 'logoImage', type: manifest.fieldTypes.image },
    ],
  });
};

名前の中の .sitecore は必須です。

CLI コマンド jss scaffold <ComponentName> を使用してコンポーネントを作成すると、サンプル アプリケーションでスキャフォールディング スクリプトが使用可能な場合は、コンポーネントとマニフェスト定義が生成されます。

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

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