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

フラグメント設定タイプのリファレンス

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

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

text
select
checkbox
colorPicker (Liferay 7.4+ で利用可能)
長さ (Liferay 7.4+ U44/GA44 で利用可能)
itemSelector
url (Liferay 7.4以降で利用可能)
videoSelector （Liferay 7.4+で使用可能）
collectionSelector
colorPalette
ナビゲーションメニューセレクター (Liferay 7.4以降で利用可能)

注

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

テキスト設定

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

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "buttonText",
                  "label": "Button Text",
                  "description": "button-text",
                  "type": "text",
                  "typeOptions": {
                     "placeholder": "Placeholder"
                  },
                  "dataType": "string",
                  "defaultValue": "Go Somewhere"
               }
         ]
      }
   ]
}

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

選択設定

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

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "numberOfFeatures",
                  "label": "Number Of Features",
                  "description": "number-of-features",
                  "type": "select",
                  "dataType": "int",
                  "typeOptions": {
                     "validValues": [
                           {"value": "1"},
                           {"value": "2"},
                           {"value": "3"}
                     ]
                  },
                  "defaultValue": "3"
               }
         ]
      }
   ]
}

選択設定は、オプションの選択が必要な場合に役立ちます。

チェックボックスの設定

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

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "hideBody",
                  "label": "Hide Body",
                  "description": "hide-body",
                  "type": "checkbox",
                  "defaultValue": false
               }
         ]
      }
   ]
}

チェックボックス構成は、ブール選択が必要な場合に便利です。

カラーピッカーの設定

Liferay DXP 7.4+

カラーピッカー JSON 構成は、任意の色を選択するための柔軟なカラーセレクターを作成します。色を選択するには、次の方法を使用できます。

左側の色をクリックして、カラーピッカーから色を選択します。
色の16進コードをテキストボックスに入力します。
スタイルブックからの値 をクリックすると、現在のスタイルブックで定義されている定義済み色のメニューが開きます。これにより、ボタンをもう一度押してリンクを解除するまで、フィールドの値が選択したトークンにリンクされます。トークン値のリンクを解除すると、選択した色が再び同等の16進コード値に変換されます。
カラーピッカーにデフォルト値が定義されていない場合は、 デフォルト ドロップダウンメニューをクリックして、現在のスタイルブックから任意の色を選択します。これは、値を選択する際の［スタイルブックの値］ボタンと同じように機能します。

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

注

使用しているテーマにスタイルブックのトークン定義がない場合、ページ上のカラーピッカー構成は [カラーパレット](#color-palette configuration) 構成に置き換えられます。

このJSON設定は、headingColorというカラーピッカーフィールドを作成します。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "headingColor",
                  "label": "Heading Color",
                  "description": "heading-color",
                  "type": "colorPicker",
                  "defaultValue": "#FF0000"
               }
         ]
      }
   ]
}

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

<div class="fragment_69">
    <h1 style="color: ${configuration.headingColor}">
        This text's color is configurable.
    </h1>
</div>

フラグメントがレンダリングされると、選択した色でトークン ${configuration.OBJECT_NAME}が置き換えられます。値のタイプは、色の選択方法によって異なります。

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

長さ構成

Liferay 7.4 U44 および GA44+

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

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

{
   "fieldSets": [
      {
         "fields": [
               {
                  "defaultValue": "300px",
                  "label": "size",
                  "name": "size",
                  "type": "length"
               }
         ]
      }
   ]
}

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

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

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

Liferay DXP 7.3+

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

注

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

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "select-content",
                  "name": "itemSelector1",
                  "type": "itemSelector",
                  "typeOptions": {
                     "enableSelectTemplate": true
                  }
               }
         ]
      }
   ]
}

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

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

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "select-content",
                  "name": "itemSelector1",
                  "type": "itemSelector",
                  "typeOptions": {
                     "itemType": "com.liferay.journal.model.JournalArticle",
                     "itemSubtype": "article-structure-key-15"
                  }
               }
         ]
      }
   ]
}

この例では、 image/png MIME タイプ (.png ファイル) のドキュメントのみを選択できるように指定しています。

{
   "fieldSets": [
      {
         "fields": [
         {
            "label": "select-content",
            "name": "itemSelector1",
            "type": "itemSelector",
            "typeOptions": {
               "itemType": "com.liferay.portal.kernel.repository.model.FileEntry",
               "mimeTypes": [
               "image/png"
               ]
            }
         }
         ]
      }
   ]
}

次の例では、ブログエントリーのみを選択できるように指定しています。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "select-content",
                  "name": "itemSelector1",
                  "type": "itemSelector",
                  "typeOptions": {
                     "itemType": "com.liferay.blogs.model.BlogsEntry"
                  }
               }
         ]
      }
   ]
}

次に、ブログエントリの次の HTML スニペットを使用して、フラグメント内のコンテンツをレンダリングできます。

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

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

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

注

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

URL設定

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

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "My URL",
                  "name": "myURL",
                  "type": "url"
               }
         ]
      }
   ]
}

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

上記の JSON の URL 構成を使用してハイパーリンクを作成するフラグメント HTML の例を次に示します。

<div class="fragment_1">
   <a href=${configuration.myURL}>Click this link!</a>
</div>

ビデオセレクター

Liferay DXP 7.4+

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

{
   "fieldSets": [
      {
         "fields": [
               {
                  "label": "My Video Selector",
                  "name": "myVideoConfig",
                  "type": "videoSelector"
               }
         ]
      }
   ]
}

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

{
"fieldSets": [
   {
      "fields": [
         {
               "label": "Video",
               "name": "video",
               "type": "videoSelector"
         }
      ]
   },
   {
      "configurationRole": "style",
      "fields": [
         {
               "dataType": "string",
               "defaultValue": "w-100",
               "label": "image-size",
               "name": "imageSize",
               "type": "select",
               "typeOptions": {
                  "validValues": [
                     {
                           "label": "fit",
                           "value": "w-100"
                     },
                     {
                           "label": "original-size",
                           "value": "w-0"
                     }
                  ]
               }
         }
      ]
   }
]
}

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

注

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

コレクションセレクター

Liferay DXP 7.3+

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

注

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

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

{
   "fieldSets": [
      {
      "label": "Collection",
      "fields": [
         {
               "name": "collection",
               "type": "collectionSelector"
         }
      ]
      }
   ]
}

このフラグメント構成を以下の FreeMarker コードと共に使用して、コレクション項目を一覧表示できます。 collectionObjectList は、コンテンツページエディターで選択されたコレクションを表します。

FreeMarker でこのコレクションを参照するには、JSON 構成でコレクション 名 と ObjectList サフィックスを使用します。前の JSON コードの抜粋では、コレクション name は collection であるため、FreeMarker は collectionObjectListを使用してコレクションを参照します。

<div class="fragment_310">
   <h1>
      List of Items:
   </h1>
   <ul>
      [#if collectionObjectList??]
      [#list collectionObjectList as item]
      <li>${item.title}</li>
      [/#list]
      [/#if]
   </ul>
</div>

コレクション構成を使用して、コレクションセレクターを含むフラグメントを開発できます。

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

collectionSelector 構成の itemType を使用して、コレクションセレクターをフィルターできます。例えば、Webコンテンツとブログを含む異なるコレクションがある場合、コレクションセレクターを制限して、ブログコレクションのみを表示することができます。このJSONサンプルは、この設定を説明するものです。

{
   "fieldSets": [
      {
         "label": "Collection",
         "fields": [
               {
                  "name": "collection",
                  "type": "collectionSelector",
                  "typeOptions": {
                     "itemType": "com.liferay.blogs.model.BlogsEntry"
                  }
               }
         ]
      }
   ]
}

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

Webコンテンツやブログエントリーを含むコレクションは、アセットタイプに対応します。

ヒント

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

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

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

{
   "fieldSets": [
      {
         "label": "Collection",
         "fields": [
               {
                  "name": "collection",
                  "type": "collectionSelector",
                  "typeOptions": {
                     "numberOfItems": 3
                  }
               }
         ]
      }
   ]
}

カラーパレットの設定

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

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

{
   "fieldSets": [
      {
         "fields": [
               {
                  "name": "textColor",
                  "label": "Text color",
                  "type": "colorPalette",
                  "dataType": "object",
                  "defaultValue": {
                     "color": "white"
                  }
               }
         ]
      }
   ]
}

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

たとえば、上記のスニペットを実装すると、FreeMarker で使用できます。

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

色 whiteを選択した場合、 h3 タグの見出しのクラスは text-whiteになります。

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

Liferay DXP 2024.Q1/ポータル GA112

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

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

"fieldSets": [
   {
   "fields": [
      {
      "label": "source",
      "name": "source",
      "type": "navigationMenuSelector"
      }
   ]
   }
]

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

ナビゲーションメニューセレクター構成タイプで使用できる変数は次のとおりです。

値	使用
`branchNavItems`	ナビゲーションメニューの階層構造を表します。
`navItems`	表示されるナビゲーション項目をそれぞれ表す `NavItem` オブジェクトのリスト。
`rootLayoutLevel`	階層内のレベルを定義します。
`rootLayoutType`	現在のページを基準としてルートレイアウトを解釈する方法を指定します (絶対、相対、または選択)。

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

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

ライフレイ DXP 2025年第2四半期

注

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

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

フィールド依存関係を作成するには、フィールドの typeOptions内に依存関係キーを追加します。比較するフィールドを指定し、条件の タイプ を 等しい または 等しくない に設定して、 値 フィールドの比較方法を定義します。

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

{
	"fieldSets": [
		{
			"fields": [
				{
					"dataType": "string",
					"defaultValue": "standard",
					"label": "Subscription Plan",
					"name": "subscriptionPlan",
					"type": "select",
					"typeOptions": {
						"validValues": [
							{"value": "basic", "label": "Basic Plan"},
							{"value": "standard", "label": "Standard Plan"},
							{"value": "premium", "label": "Premium Plan"}
						]
					}
				},
				{
					"dataType": "string",
					"defaultValue": "no",
					"label": "Additional Features",
					"name": "additionalFeatures",
					"type": "select",
					"typeOptions": {
						"dependency": {
							"subscriptionPlan": {
								"type": "equal",
								"value": "premium"
							}
						},
						"validValues": [
							{"value": "1", "label": "Priority Support"},
							{"value": "2", "label": "Extra Storage"},
							{"value": "3", "label": "Custom Reports"}
						]
					}
				}
			]
		}
	]
}

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

"typeOptions": {
   "dependency": {
      "subscriptionPlan": {
          "type": "equal",
          "value": "premium"
       }
   }
}

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

ヒント

依存関係オブジェクト内に複数の依存関係を追加して、他のフィールドの値に基づいて可視性を制御できます。

Capability: