フィードバックを送信
Developing Page Fragments Reference
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。

フラグメント構成タイプのリファレンス

フラグメントで使用可能な構成タイプを以下に示します。 フラグメントを構成可能にする方法の詳細については、 フラグメントへの構成オプションの追加 を参照してください。

以下は実装できる構成可能なフラグメントタイプです。

  • 文章
  • 選択
  • チェックボックス
  • colorPicker (Liferay 7.4以降で利用可能)
  • 長さ (Liferay 7.4+ U44/GA44 で利用可能)
  • アイテムセレクター
  • url (Liferay 7.4以降で利用可能)
  • videoSelector (Liferay 7.4以降で利用可能)
  • コレクションセレクター
  • カラーパレット
  • navigationMenuSelector (Liferay 7.4以降で利用可能)
注記

FreeMarker コンテキストに挿入された構成値は、JSON ファイルで指定された定義済みの データ型 値を尊重します。 例えば、 dataType が Stringの場合、 configuration.[name-value]?is_string は true となります。

テキスト設定

このJSON設定は、テキストを手動で追加するための入力テキストフィールドを作成します。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "buttonText",
                  "ラベル": "ボタンテキスト"、
                  "説明": "ボタンテキスト"、
                  "タイプ": "テキスト"、
                  "タイプオプション": {
                     "プレースホルダー": "プレースホルダー"
                  }、
                  "データ型": "文字列"、
                  "デフォルト値": "どこかへ行く"
               }
         ]
      }
   ]
}

テキスト設定は、入力テキストオプションが必要な場合に役立ちます。

構成を選択

このJSON設定は、定義済みのオプションを選択するためのセレクターを作成します。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "numberOfFeatures"、
                  "ラベル": "特徴量の数"、
                  "説明": "特徴量の数"、
                  "タイプ": "select",
                  "dataType": "int",
                  "typeOptions": {
                     "validValues": [
                           {"value": "1"},
                           {"value": "2"},
                           {"value": "3"}
                     ]
                  },
                  "defaultValue": "3"
               }
         ]
      }
   ]
}

選択設定は、オプションの選択が必要な場合に便利です。

チェックボックスの設定

このJSON設定では、ブール値を選択するためのチェックボックスを作成します。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "hideBody",
                  "ラベル": "本体を非表示"、
                  "説明": "hide-body"、
                  "タイプ": "チェックボックス"、
                  "デフォルト値": false
               }
         ]
      }
   ]
}

チェックボックスの設定は、ブール値による選択が必要な場合に便利です。

カラーピッカーの設定

Liferay 7.4以降

カラーピッカーのJSON設定により、任意の色を選択できる柔軟なカラーセレクターが作成されます。 色を選択するには、以下の方法を使用できます。

  • 左側の色をクリックして、カラーピッカーから色を選択してください。

  • 色の16進コードをテキストボックスに入力します。

  • スタイルブックの値 をクリックすると、現在の スタイルブック で定義されている定義済みの色のメニューが開きます。 これにより、ボタンをもう一度押してリンクを解除するまで、フィールドの値が選択されたトークンにリンクされます。 トークン値のリンクを解除すると、選択した色が再び同等の16進コード値に変換されます。

  • カラーピッカーにデフォルト値が定義されていない場合は、 デフォルト ドロップダウンメニューをクリックして、現在のスタイルブックから任意の色を選択してください。 これは、値を選択する際の［スタイルブックの値］ボタンと同じように機能します。

カラーピッカーの設定では、色を選択するためのいくつかの方法が用意されています。

注記

使用しているテーマにスタイルブックのトークン定義がない場合、ページ上のカラーピッカーの設定はカラーパレットの設定に置き換えられます。

この JSON 設定では、 headingColor という名前のカラーピッカーフィールドが作成されます。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "headingColor",
                  "ラベル": "見出しの色"、
                  "説明": "見出しの色"、
                  "タイプ": "colorPicker",
                  "defaultValue": "#FF0000"
               }
         ]
      }
   ]
}

colorPicker 型は、選択された色値と設定された名前を持つオブジェクトを格納します。 フラグメントのHTMLでこのオブジェクトを参照する方法は次のとおりです。

<div class="fragment_69">
    <h1 style="color: ${configuration.headingColor}">
        このテキストの色は設定可能です。
    </h1>
</div>

フラグメントがレンダリングされると、選択された色がトークン ${configuration.OBJECT_NAME} を置き換えます。 それがどのような価値を持つかは、色の選び方によって決まる。

  • 色を直接選んだ場合は、対応する16進コードの値に置き換わります。
  • 現在のスタイルブックから色を選択した場合、リンク先のトークンのCSS変数（例えば、 var(--danger)）に置き換えられます。
  • 現在のテーマに使用できるトークン定義がない場合（そのため、 カラーパレット が代わりに使用されます）、CSS カラーに置き換えられます（たとえば、 rgb(255, 0, 0)）。

長さ構成

Liferay 7.4 U44 および GA44+

長さ 設定タイプは、数値を入力して定義済みの単位を選択したり、幅、余白、パディングなどの設定に独自の単位を指定したりできるフィールドを作成します。

この JSON サンプルは、 長さ 構成タイプを使用するフィールドを示しています。 これには、名前、ラベル、デフォルト値を定義するプロパティが含まれます。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "defaultValue": "300px"、
                  "ラベル": "サイズ"、
                  "名前": "サイズ"、
                  "タイプ": "長さ"
               }
         ]
      }
   ]
}

ユーザーインターフェースでは、利用可能な単位から選択するか、カスタム単位を指定できます。

カスタムフラグメントの「サイズ」というラベルの付いたフィールドは、長さの設定を使用して、利用可能な単位のドロップダウンリストを表示します。

アイテムセレクターの設定

Liferay 7.3以降

この設定では、フラグメントに含める既存のコンテンツ（デフォルトでは、ドキュメント、Webコンテンツ記事、ブログエントリ、カテゴリ、製品、またはナレッジベース記事）を1つ選択するためのセレクターが作成されます。

注記

itemSelector 構成を持つフラグメントが Collection Display内に配置されると、コレクションアイテムが自動的に選択されたコンテンツになります。 コレクション表示機能がコンテンツを動的に決定するため、手動選択は無効になっています。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "select-content",
                  "名前": "itemSelector1"、
                  "タイプ": "itemSelector"、
                  "typeOptions": {
                     "enableSelectTemplate": true
                  }
               }
         ]
      }
   ]
}

アイテムセレクターの設定は、既存のコンテンツを表示するためのオプション選択が必要な場合に役立ちます。

特定の種類のコンテンツのみを選択するための、より高度な設定を行うことができます。 以下の設定では、ウェブコンテンツの記事のみを選択できるように指定しています。 オプションのプロパティ itemSubtype を選択するには、選択した Web コンテンツ記事が構造 article-structure-key-15 を使用する必要があります。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "select-content",
                  "名前": "itemSelector1"、
                  "タイプ": "itemSelector"、
                  "typeOptions": {
                     "itemType": "com.liferay.journal.model.JournalArticle",
                     "itemSubtype": "article-structure-key-15"
                  }
               }
         ]
      }
   ]
}

この例では、 image/png MIMEタイプ（.png ファイル）を持つドキュメントのみを選択できることを指定しています。

{
   "fieldSets": [
      {
         "fields": [
         {
            "label": "select-content",
            "名前": "itemSelector1"、
            "タイプ": "itemSelector"、
            "typeOptions": {
               "itemType": "com.liferay.portal.kernel.repository.model.FileEntry",
               "mimeTypes": [
               "image/png"
               ]
            }
         }
         ]
      }
   ]
}

この例では、ブログ記事のみを選択できることを指定しています。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "select-content",
                  "名前": "itemSelector1"、
                  "タイプ": "itemSelector"、
                  "typeOptions": {
                     "itemType": "com.liferay.blogs.model.BlogsEntry"
                  }
               }
         ]
      }
   ]
}

ブログ記事の場合は、以下のHTMLスニペットを使用してフラグメント内にコンテンツをレンダリングできます。

<div class="fragment_name">
   [#if configuration.itemSelector1.content??]
         ${configuration.itemSelector1.content}
   [/#if]
</div>

コンテンツの特定の部分にアクセスする必要がある場合は、フラグメント内の Java オブジェクトに name 属性と Object サフィックス (この場合はitemSelector1Object) を使用してアクセスすることもできます。 以下の例は、ブログ記事のタイトル、説明、および本文を表示するものです。

<div class="fragment_name">
   [#if configuration.itemSelector1.content??]
         ${itemSelector1Object.getTitle()}
         ${itemSelector1Object.getDescription()}
         ${itemSelector1Object.getContent()}
   [/#if]
</div>
注記

アイテムセレクター構成を持つフラグメントをコレクション表示ウィジェットに配置すると、コレクションアイテムが選択されたコンテンツとして自動的にマッピングされます。

URL設定

この設定により、フラグメントのマークアップで使用するURL専用のフィールドが追加されます。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "My URL",
                  "名前": "myURL"、
                  "タイプ": "url"
               }
         ]
      }
   ]
}

この構成でフラグメントを設定すると、URL を手動で入力するか (URL)、同じサイトの別のページを選択してその完全な URL (ページ ) を使用できます。

以下は、上記のJSONに含まれるURL設定を使用してハイパーリンクを作成するHTMLフラグメントの例です。

<div class="fragment_1">
   <a href=${configuration.myURL}>このリンクをクリックしてください！</a>
</div>

ビデオセレクター

Liferay 7.4以降

videoSelector タイプを使用すると、 外部ビデオ フラグメントを別のフラグメントに組み込むビデオセレクタを作成できます。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "My Video Selector",
                  "名前": "myVideoConfig"、
                  "タイプ": "videoSelector"
               }
         ]
      }
   ]
}

これは、デフォルトで動画が埋め込まれたフラグメントが必要な場合に便利です。 以下の JSON 設定サンプルは、外部ビデオセレクタをカードフラグメントに組み込む方法を示しています。

{
"fieldSets": [
   {
      "fields": [
         {
               "label": "Video",
               "名前": "ビデオ"、
               "タイプ": "ビデオセレクター"
         }
      ]
   },
   {
      "configurationRole": "style",
      "fields": [
         {
               "データ型": "文字列"、
               "デフォルト値": "w-100"、
               "ラベル": "image-size"、
               "name": "imageSize"、
               "type": "select"、
               "typeOptions": {
                  "validValues": [
                     {
                           "label": "fit",
                           "値": "w-100"
                     },
                     {
                           "ラベル": "オリジナルサイズ"、
                           "値": "w-0"
                     }
                  ]
               }
         }
      ]
   }
]
}

ビデオセレクターを使用すると、フラグメントに外部ビデオを含めることができます。

注記

videoSelector タイプは、 外部ビデオ フラグメントと互換性がありますが、 ビデオ URL フラグメントとは互換性がありません。

コレクションセレクター

Liferay 7.3以降

collectionSelector 構成タイプを使用すると、 コレクション または コレクションプロバイダ を含むフラグメントを開発できます。 collectionSelector は、手動コレクションと動的コレクションの両方で使用できます。

注記

開発者は、コレクションプロバイダーを使用して、最近のコンテンツや最も閲覧されたアイテムなど、高度な基準に基づいてアイテムをグループ化できます。 グループ化すると、 情報テンプレート を使用して、これらのアイテムがページ上でどのように表示されるかをカスタマイズできます。

以下の JSON 設定は、 collectionSelector の使用方法を示しています。

{
   "fieldSets": [
      {
      "label": "Collection",
      "fields": [
         {
               "名前": "コレクション"、
               "型": "コレクションセレクタ"
         }
      ]
      }
   ]
}

このフラグメント構成を以下のFreeMarkerコードと組み合わせて使用することで、コレクションアイテムを一覧表示できます。 collectionObjectList は、 コンテンツ ページ エディター で選択されたコレクションを表します。

FreeMarker でこのコレクションを参照するには、JSON 設定でコレクション 名 と ObjectList サフィックスを使用します。 前の JSON コード抜粋では、コレクション の名前 は コレクション なので、FreeMarker は collectionObjectList を使用してコレクションを参照します。

<div class="fragment_310">
   <h1>
      アイテムのリスト:
   </h1>
   <ul>
      [#if collectionObjectList??]
      [#list collectionObjectList as item]
      <li>${item.title}</li>
      [/#list]
      [/#if]
   </ul>
</div>

コレクション設定を使用すると、コレクションセレクターを含むフラグメントを開発できます。

コレクションセレクターのフィルタリング

collectionSelector 設定で itemType を使用してコレクションセレクタをフィルタリングできます。 例えば、ウェブコンテンツやブログなど、複数のコレクションがある場合、コレクションセレクターでブログコレクションのみを表示するように制限することができます。 このJSONサンプルは、この設定を示しています。

{
   "fieldSets": [
      {
         "label": "Collection",
         "fields": [
               {
                  "名前": "コレクション"、
                  "タイプ": "コレクションセレクター"、
                  "タイプオプション": {
                     "itemType": "com.liferay.blogs.model.BlogsEntry"
                  }
               }
         ]
      }
   ]
}

このサンプル構成を使用すると、コレクションタイプが アセット であるため、Web コンテンツとブログの両方を含むコレクションはコレクションセレクターから除外されます。

ウェブコンテンツやブログ記事を含むコレクションは、資産タイプに該当します。

ヒント

itemTypeに加えて、設定で itemSubtype を指定できます。 itemSubtype は、アセット classPK に対応します。

返却されるコレクションアイテムの最大数を定義する

デフォルトでは、アイテムの最大数に制限を設けない場合、コレクション内のすべてのアイテムが返されます。 JSON設定で numberOfItems を使用してこの制限を設定できます。

{
   "fieldSets": [
      {
         "label": "Collection",
         "fields": [
               {
                  "名前": "コレクション"、
                  "タイプ": "コレクションセレクター"、
                  "タイプオプション": {
                     "numberOfItems": 3
                  }
               }
         ]
      }
   ]
}

カラーパレットの設定

カラーパレットのJSON設定では、色を選択する必要がある場合に実装できるカラーセレクターが作成されます。 カラーピッカー設定とは異なり、現在使用されている スタイルブックのカラーシステムで設定されているテーマカラーに基づくオプションのみを提供します。

この設定では、 textColor という名前のカラーパレットフィールドが作成されます。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "textColor",
                  "ラベル": "テキストの色"、
                  "タイプ": "カラーパレット"、
                  "データ型": "オブジェクト"、
                  "デフォルト値": {
                     "色": "白"
                  }
               }
         ]
      }
   ]
}

colorPalette 型は、値 color を持つオブジェクトを格納します。

例えば、上記のコードスニペットを実装すれば、FreeMarkerで使用できます。

<h3 class="text-${configuration.textColor.color}">例</h3>

色を 白にすると、 h3 タグの見出しにはクラス text-white が付きます。

カラーパレットの設定は、色の選択が必要な場合に役立ちます。

Liferay DXP 2024.Q1/Portal GA112

navigationMenuSelector 構成タイプを使用すると、フラグメント HTML エディタを介して FreeMarker 変数にアクセスし、カスタムナビゲーション メニューをレンダリングするためのマークアップを定義できます。

フラグメント HTML エディタで FreeMarker 変数を使用するには、まず navigationMenuSelector を 構成タイプ として設定します。 以下のJSONスニペットを参考にしてください。

"fieldSets": [
   {
   "fields": [
      {
      "label": "source",
      "名前": "ソース"、
      "タイプ": "navigationMenuSelector"
      }
   ]
   }
]

これで、 [name]Object の下にある FreeMarker 変数にアクセスできるようになります。 この例では、 sourceObject.navItems は、 sourceObject の下にある navItems リストを返します。 設定で使用されていた名前が source だったため、オブジェクトは sourceObject と呼ばれます。

ナビゲーションメニューセレクター構成タイプで使用可能な変数は以下のとおりです。

変数使用
ブランチナビゲーションアイテムナビゲーションメニューの階層構造を表します。
ナビゲーションアイテム表示するナビゲーション項目をそれぞれ表す NavItem オブジェクトのリスト。
ルートレイアウトレベル階層構造におけるレベルを定義します。
ルートレイアウトタイプ現在のページとの関連でルートレイアウトをどのように解釈するかを指定します（絶対、相対、または選択）。

navigationMenuSelector タイプをより詳しく見るには、 navigation-menu フラグメント をダウンロードしてフラグメント セットにインポートします。 フラグメントのインポートについて詳しくは、 フラグメントの管理 を参照してください。

条件付きフィールド表示設定

Liferay DXP 2025.Q2

注記

この機能は、Liferay DXP 2025.Q3で一般提供が開始されました。 Liferay DXP 2025.Q2では、リリース機能フラグ（LPD-46393）の背後で利用可能でした。 詳細については、 リリース機能フラグ を参照してください。

フラグメント構成内のフィールドの表示/非表示は、同じフィールドセット内の他のフィールドの値に基づいて制御できます。 フィールドの可視性は依存関係によって決定され、あるフィールドの可視性は別のフィールドの値に依存する場合があります。 依存関係でサポートされているフィールドタイプは、 テキスト、 セレクト、および チェックボックス です。

フィールドの依存関係を作成するには、フィールドの typeOptions 内に依存関係キーを追加します。 比較するフィールドを指定し、コンディションのタイプを equalまたはnot-equalに設定して、値フィールドの比較方法を定義します。

次の例は、 subscriptionPlan と additionalFeatures という 2 つの選択フィールドを示しています。 additionalFeatures の表示は、 subscriptionPlan の値に依存します。

{
	"fieldSets": [
		{
			"fields": [
				{
					"dataType": "string",
					"defaultValue": "standard",
					"label": "Subscription Plan",
					"name": "subscriptionPlan"、
					"type": "select"、
					"typeOptions": {
						"validValues": [
							{"value": "basic", "label": "Basic Plan"},
							{"値": "標準"、 "ラベル": "標準プラン"}、
							{"値": "プレミアム"、 "ラベル": "プレミアムプラン"}
						]
					}
				}、
				{
					"データ型": "文字列"、
					"デフォルト値": "いいえ"、
					"ラベル": "追加機能"、
					"名前": "追加機能"、
					"タイプ": "選択"、
					"タイプオプション": {
						"dependency": {
							"subscriptionPlan": {
								"type": "equal",
								"値": "プレミアム"
							}
						},
						"有効な値": [
							{"値": "1"、 "ラベル": "優先サポート"}、
							{"値": "2"、 "ラベル": "追加ストレージ"}、
							{"値": "3"、 "ラベル": "カスタムレポート"}
						]
					}
				}
			]
		}
	]
}

可視性依存性は次のように定義されます。

"typeOptions": {
   "dependency": {
      "subscriptionPlan": {
          "type": "equal",
          "値": "プレミアム"
       }
   }
}

この場合、 additionalFeatures フィールドは、 subscriptionPlan フィールドが Premium Plan に設定されている場合にのみ表示されます。 ユーザーが別のサブスクリプションプランを選択した場合、 additionalFeatures フィールドは非表示のままになります。

ヒント

依存関係オブジェクト内に複数の依存関係を追加することで、他のフィールドの値に基づいて表示/非表示を制御できます。

カスタムコンポーネント構成

Liferay DXP 2026.Q2+

フィールドセットとは、fieldSets内のオブジェクトであり、関連するフィールドをグループ化したものです。 フィールドセットに customComponentModule を設定すると、ページエディタは、フィールドセットの通常の入力の代わりに、サイドバーに指定された React コンポーネントをレンダリングします。 コンポーネントは、フィールド セットの configurationRole に応じて、 General または Advanced タブに表示されます。

この例は、データセットフラグメントの標準構成を示しています。

{
   "fieldSets": [
      {
         "customComponentModule": "{DataSetConfigurationFields} from @liferay/frontend-data-set-fragment-web",
         "fields": [
               {
                  "label": "data-set-view",
                  "name": "itemSelector",
                  "type": "itemSelector",
                  "typeOptions": {
                     "itemType": "FDSView"
                  }
               },
               {
                  "name": "apiURLTokenMappings",
                  "type": "テキスト"
               }
         ],
         "ラベル": "データセットオプション"
      }
   ]
}
属性説明
カスタムコンポーネントモジュールページエディタがフィールドセットの通常の入力の代わりにレンダリングするReactコンポーネントの名前を指定するインポート宣言
フィールドフィールドセットの設定値。 配列は必須ですが、空でも構いません。
ラベルフィールドセットが折りたたみ可能なセクションに埋め込まれている場合、コンポーネントを囲む折りたたみ可能なパネルのタイトル

モジュールの宣言

loadModule ユーティリティは frontend-js-web でインポート宣言を解決します。 これは、文字列を からで分割します。 から の前の部分ではシンボル名が示され、 から の後の部分ではインポートするモジュール名が示されます。

  • {NamedExport} は @scope/module からモジュールの NamedExport エクスポートを解決します。
  • @scope/module のデフォルト はモジュールのデフォルトエクスポートを解決します。
重要

の周りの のスペースは必須です。 設定スキーマは任意の文字列を受け入れるため、文字列が欠落している宣言は検証を通過し、ページエディタがコンポーネントを読み込もうとした場合にのみ失敗します。

名前付きエクスポート形式では、シンボルがモジュールのエントリポイントからエクスポートされる必要があります。 Data Set フラグメントのコンポーネントは、独自のファイルでデフォルトエクスポートされており、モジュールの index.ts がそれを名前で再エクスポートします。 その再エクスポートによって {DataSetConfigurationFields} が解決されます。

コンポーネントはフラグメントの外に存在するため、ブラウザが指定子のみで解決できるモジュールとしてデプロイしてください。 JavaScript インポート マップ エントリ クライアント拡張機能 がそれを行います。 client-extension.yamlで設定したbareSpecifierは、customComponentModule 内のfromの後に続く値となります。

コンポーネントの作成

このコンポーネントは2つのプロパティを受け取ります。

values:フィールドセットの設定値。fields 内の各エントリの名前をキーとしています。 値の形状は、そのフィールド の型に従います。したがって、 のテキスト フィールドは、JSON を保持している場合でも文字列として到着します。 フラグメントレンダラーによってサーバー側で書き込まれた値もここに届くため、 の値 は、 フィールド で宣言されていないエントリを保持できます。

onValueSelect: シグネチャ onValueSelect(name, value)を持つ関数。ただし、 name は、 name と一致する必要があります。 フィールド で宣言されています。 ページエディタは呼び出しを300ミリ秒間デバウンスするため、連続して発生する呼び出しは1回の書き込みに集約されます。

export default function MyConfigurationFields({onValueSelect, values}) {
   return (
      <input
         onChange={(event) => onValueSelect('myField', event.target.value)}
         type="text"
         value={values.myField || ''}
      />
   );
}

Fragments Toolkit の使用 で説明されているように、コンポーネントのバンドルから React を除外し、外部からロードします。

モジュールが読み込まれると、コンポーネントがサイドバー内のフィールドセットによって生成された入力フィールドを置き換えます。 読み込みに失敗した場合は、代わりにサイドバーにエラーが表示されます。 そのエラーは、多くの場合、指定子が解決されないか、指定されたエクスポートが存在しないことを意味します。

Capability:
Development and Tooling
Resource Type:
Official Documentation
Feature:
Fragments
Deployment Approach:
Liferay PaaS
Liferay SaaS
Liferay Self-Hosted