---
title: "コードファーストのJSSアプリにおけるマニフェスト定義の追加"
slug: "adding-manifest-definitions-in-code-first-jss-apps"
abstract: "Manifest APIインスタンスメソッドでManifestにアイテムを追加してください"
---
# コードファーストのJSSアプリにおけるマニフェスト定義の追加

コンポーネントをスキャフォールディングする際、スクリプトを修正して機能を削除していなければ、JSSは新しいコンポーネントのマニフェスト定義を自動的に作成します。しかし、単にコンポーネントファイルを作成する場合は、Manifest APIインスタンスメソッドを使ってマニフェストアイテムに追加できます。また、Manifest APIインスタンスメソッドを使って [新しいルートタイプやその他のアイテムを登録](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/create-a-route-type-with-fields-in-jss-code-first-development.html "Create a route type with fields in JSS code-first development") することもできます。

これらの方法は、sitecore/definitions/ ディレクトリにあるマニフェスト定義ファイルで使用します。ファイル名は慣例 \*.sitecore.js|tsに従う必要があります。ここでアスタリスクはコンポーネント名(例: SearchBox.sitecore.js )やアイテムタイプ(例: placeholders.sitecore.js)を表します。

## マニフェスト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など)を使うと、エディタ内のタイプ情報や役立つ注釈にアクセスできます。

#### コンポーネント

{
 id: string:optional,
 name: string:required,
 displayName: string:optional,
 fields: fields:optional,
 params: params:optional,
 placeholders: placeholders:optional, // placeholders exposed by rendering
 allowedPlaceholders: arraystring:optional, // placeholders component is allowed in (normally inferred by route data)
 displayFieldEditorButton: boolean:optional = true,
 fieldEditorFields: arraystring:optional = all fields, // field names
 customExperienceButtons: arraystring:optional, // names or IDs
 insertOptions: arraystring: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: arrayroute
}

> !注displayFieldEditorButtonとfieldEditorFieldsプロパティにより、Sitecoreエクスペリエンスエディターで自動的にコンポーネントに追加されるフィールドエディターボタンの挙動を制御できます。このボタンはポップアップフォームインターフェースですべてのコンポーネントデータを編集できます。デフォルトでは、すべてのコンポーネントにボタンが表示され、すべてのコンポーネントフィールドは編集可能です。もしこれが望ましい動作であれば、これらのプロパティを提供する必要はありません。

#### 内容

コンテンツデータは [ルートデータ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/types-of-jss-manifest-data.html "Types of JSS Manifest data")と同じスキーマを使用しますが、placeholdersプロパティは一般的に使われません。なぜなら影響が出ないからです。

#### フィールド

typeプロパティについては、利用可能な[CommonFieldTypes](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/adding-manifest-definitions-in-code-first-jss-apps.html#UUID-ccf3326d-decc-ae3b-295b-9b504eba38cc_N1633611413584 "CommonFieldTypes")の値のいずれかを使用することを推奨します。

{
 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
}

#### 共通フィールドタイプ

{
 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のような型注釈をサポートするエディタは、この列挙に自動補完を提供します。

#### パラム

{
 name: string:required
}

#### プレースホルダー

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

#### プレースホルダー

{
 placeholderName: arraycomponent:optional,
 // additional placeholder key/values can be added
}

#### ルート

{
 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: arrayroute:optional,
 placeholders: placeholders:optional,
 insertOptions: arraystring:optional,
}

#### テンプレート

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

#### 場

{
 fieldName: objectfieldName = field:required
 // additional field key/values can be added, see the following
}

#### パラム

{
 paramName: arraystring: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が画像タイプである場合に使用されます。通常のフィールドと比べて追加の性質を持ちます。

{
 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がリンクタイプである場合に使用されます。通常のフィールドと比べて追加の性質を持っています。

{
 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参照を使って共有コンテンツ領域で定義されたアイテムを引き込む(またはSitecore内の非アプリアイテムを参照するために明示的なGUIDを使う)ことで定義できます

// 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
 # ...

#### 日付フィールド値の扱い

マニフェスト内の日付フィールドの値は、例えば25:43の文字列[2012-04-23T18:8601](https://en.wikipedia.org/wiki/ISO_8601#Combined_date_and_time_representations)の文字列で書式化ISOされています.511Z。

> !注これはJavaScriptの日付形式であり、Sitecoreが内部で日付フィールド値を保存する方法とは異なります。Sitecore形式の日付は *動作しません。*

## マニフェスト定義の例

JSSアプリケーションを作成する際、アプリにはすでにいくつかのマニフェスト定義があります。最も一般的なマニフェスト定義は、アプリインポート時にSitecoreでプレースホルダーやコンポーネントを登録するためのものですが、[ルートにフィールドを追加する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/create-a-route-type-with-fields-in-jss-code-first-development.html "Create a route type with fields in JSS code-first development")など他のユースケースでもマニフェスト定義を使うことができます。

### プレースホルダー

マニフェスト内でプレースホルダーを明示的に定義することは任意です。ルートで参照される任意のプレースホルダー名は、マニフェストによって自動的に認識されます。しかし、プレースホルダーを明示的に登録することで、その名の [プレースホルダー表示名](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/introducing-placeholders-in-jss-apps.html "Introducing placeholders in JSS apps") を設定でき、コンテンツ編集者がより親しみやすいものを見られるようにappname-content-leftside-upsidedown-2。

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

例えば:

import { addPlaceholder } from '@sitecore-jss/sitecore-jss-manifest';

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

### 構成要素

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

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

/\*
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-manifest';

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>でコンポーネントを作成すると、サンプルアプリケーションにスキャフォールディングスクリプトが利用可能であれば、コンポーネントとマニフェスト定義を生成します。