テンプレート処理中にエラーが発生しました。
Java method "com.liferay.portal.json.JSONFactoryImpl.createJSONObject(String)" threw an exception when invoked on com.liferay.portal.json.JSONFactoryImpl object "com.liferay.portal.json.JSONFactoryImpl@2ad66ae2"; see cause exception in the Java stack trace.

----
FTL stack trace ("~" means nesting-related):
	- Failed at: navigationJSONObject = jsonFactoryUti...  [in template "17855804202317#32484267#LEARN-ARTICLE-NAV" at line 4, column 9]
----
1<#assign 
2	groupFriendlyURL = themeDisplay.getScopeGroup().getFriendlyURL() 
3	groupPathFriendlyURLPublic = themeDisplay.getPathFriendlyURLPublic() + groupFriendlyURL 
4	navigationJSONObject = jsonFactoryUtil.createJSONObject(navigation.getData()) 
5	navigationMenuItems = 
6
7			"Analytics Cloud": { 
8				"image": "/documents/d${groupFriendlyURL}/analytics_c-svg", 
9				"title": "Analytics Cloud", 
10				"url": "analytics-cloud" 
11			}, 
12			"Commerce": { 
13				"image": "/documents/d${groupFriendlyURL}/commerce_product-svg", 
14				"title": "Commerce", 
15				"url": "commerce" 
16			}, 
17			"DXP": { 
18				"image": "/documents/d${groupFriendlyURL}/dxp_p-svg", 
19				"title": "DXP / Portal", 
20				"url": "dxp" 
21			}, 
22			"Liferay Cloud": { 
23				"image": "/documents/d${groupFriendlyURL}/dxp_c-svg", 
24				"title": "Liferay Cloud", 
25				"url": "liferay-cloud" 
26			}, 
27			"Reference": { 
28				"image": "/documents/d${groupFriendlyURL}/reference-svg", 
29				"title": "Reference", 
30				"url": "reference" 
31
32
33 
34	breadcrumbJSONArray = navigationJSONObject.getJSONArray("breadcrumb") 
35	childrenJSONArray = navigationJSONObject.getJSONArray("children") 
36	parentJSONObject = navigationJSONObject.getJSONObject("parent") 
37	productJSONObject = breadcrumbJSONArray.getJSONObject(breadcrumbJSONArray.length()-1)!navigationJSONObject.getJSONObject("self") 
38	siblingsJSONArray = navigationJSONObject.getJSONArray("siblings") 
39/> 
40 
41<div class="learn-article-nav"> 
42	<#if productJSONObject?has_content && productJSONObject.getString("title")?has_content && navigationMenuItems[productJSONObject.getString("title")]?has_content && navigationMenuItems[productJSONObject.getString("title")].title?has_content> 
43		<div 
44			class="dropdown learn-article-nav-root learn-dropdown" 
45
46			<div class="learn-article-nav-item"> 
47				<div class="d-flex"> 
48					<div class="learn-article-nav-image"> 
49						<img 
50							class="lexicon-icon lexicon-icon-caret-bottom product-icon" 
51							role="presentation" 
52							src='${navigationMenuItems[productJSONObject.getString("title")].image}' 
53							viewBox="0 0 512 512" 
54						/> 
55					</div> 
56 
57					<span class="learn-article-nav-text">${navigationMenuItems[productJSONObject.getString("title")].title}</span> 
58				</div> 
59 
60				<div id="dropdown-icon"> 
61					<svg 
62						class="lexicon-icon lexicon-icon-caret-bottom" 
63						role="presentation" 
64						viewBox="0 0 512 512" 
65
66						<use xlink:href="/o/admin-theme/images/clay/icons.svg#caret-bottom"></use> 
67					</svg> 
68				</div> 
69			</div> 
70 
71			<ul class="dropdown-menu learn-dropdown-menu"> 
72				<#list navigationMenuItems as key, value> 
73					<li> 
74						<a 
75							class="dropdown-item learn-article-nav-item" 
76							href="/w/${navigationMenuItems[key].url}/index" 
77							tabindex="4" 
78
79							<span class="d-flex"> 
80								<span class="learn-article-nav-image"> 
81									<img 
82										class="lexicon-icon lexicon-icon-caret-bottom product-icon mt-0 mr-2" 
83										role="presentation" 
84										src="${value.image}"height: 25px; margin-left: 5px; max-width: none; width: 25px; 
85										viewBox="0 0 512 512" 
86									/> 
87								</span> 
88								<span class="learn-article-nav-text">${value.title}</span> 
89							</span> 
90 
91							<#if navigationMenuItems[productJSONObject.getString("title")].url == value.url> 
92								<span> 
93									<@clay["icon"] symbol="check" /> 
94								</span> 
95							</#if> 
96						</a> 
97					</li> 
98				</#list> 
99			</ul> 
100		</div> 
101	</#if> 
102 
103	<div class="learn-article-nav-content"> 
104		<#if parentJSONObject?has_content && parentJSONObject.getString("url")?has_content> 
105			<div class="learn-article-nav-item learn-article-nav-parent liferay-nav-item p-2"> 
106				<div class="mr-2"> 
107					<a 
108						href='${parentJSONObject.getString("url")}' 
109
110						<svg 
111							class="lexicon-icon lexicon-icon-angle-left" 
112							role="presentation" 
113							viewBox="0 0 512 512" 
114
115							<use xlink:href="/o/admin-theme/images/clay/icons.svg#angle-left"></use> 
116						</svg> 
117					</a> 
118				</div> 
119 
120				<span>${parentJSONObject.getString("title")}</span> 
121			</div> 
122		</#if> 
123 
124		<#if childrenJSONArray.length() gt 0> 
125			<ul class="m-0 p-2"> 
126				<#list 0..childrenJSONArray.length()-1 as i> 
127					<li class="learn-article-nav-item"> 
128						<a 
129							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == childrenJSONArray.getJSONObject(i).url)?then("selected", "")}' 
130							href="${childrenJSONArray.getJSONObject(i).url}" 
131
132							<span>${childrenJSONArray.getJSONObject(i).getString("title")}</span> 
133						</a> 
134					</li> 
135				</#list> 
136			</ul> 
137		<#elseif siblingsJSONArray.length() gt 0> 
138			<ul class="m-0 p-2"> 
139				<#list 0..siblingsJSONArray.length()-1 as i> 
140					<li class="learn-article-nav-item"> 
141						<a 
142							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == siblingsJSONArray.getJSONObject(i).url)?then("selected", "")}' 
143							href="${siblingsJSONArray.getJSONObject(i).url}" 
144
145							<span>${siblingsJSONArray.getJSONObject(i).getString("title")}</span> 
146						</a> 
147					</li> 
148				</#list> 
149			</ul> 
150		</#if> 
151	</div> 
152</div> 

デフォルトのフラグメントリファレンス

Liferayはすぐに使える様々なフラグメントを提供するので、すぐにソリューションの構築を始めることができます。 利用可能なフラグメントを表示するには、コンテンツページまたはページテンプレートの編集を開始してください。 編集中に、編集サイドバーメニューの フラグメントとウィジェット タブ( フラグメントとウィジェット)を開きます。

フラグメントは、次のセットに編成されています。

note

利用可能な設定オプションは、フラグメントとフラグメントのサブエレメントによって異なる。 詳しくは フラグメントの設定 を参照。

レイアウト要素

For Liferay 7.3+

レイアウト要素は、ページやテンプレートのレイアウトをデザインするためのドロップゾーンを定義します。 デフォルトでは、Liferayには2つのレイアウト要素があります: ContainerGrid です。

フラグメント説明
コンテナ(以前は パネル構成可能なドロップゾーンを追加します。
グリッド(以前は 複数のドロップゾーンモジュールを追加します。 これらのモジュールは、垂直または水平に構成および配置できます。

基本コンポーネント

これらは、ページに基本的な機能を追加するシンプルなデザイン要素です。 例としては、ボタン、見出し、タブなどがあります。 これらのコンポーネントを使って、あなたのページを少しずつ構築していくことができる。 DXPには以下の基本コンポーネントが含まれる。

フラグメント説明
ボタンリンク要素 を追加する。 リンクまたはアクションタイプで、5つの異なるボタンスタイルを適用できます:プライマリ、セカンダリ、リンク、プライマリ・アウトライン、セカンダリ・アウトラインです。
カード画像リッチテキストリンク 要素をディスプレイカードとして配置したものを追加する。
日付カスタム日付フィールドにマッピングできるフィールドを追加します。
ドロップダウン 7.4+シンプルなテキスト要素 とドロップゾーンを追加します。 他のフラグメントやウィジェットをドロップゾーンにドラッグ&ドロップして、高度なドロップダウンメニューを作成できます。
外部ビデオ 7.4+外部の動画をページやテンプレートに埋め込みます。 対応するビデオソースは、YouTube、Facebook、Twitch、Vimeo、およびドキュメントとメディアに保存されているビデオです。 詳しくは Liferayアセットとページに動画を埋め込む をご覧ください。
HTML編集可能な HTML 要素 を追加します。 要素をダブルクリックすると、HTML構文を使用してコンテンツを編集できるモーダルウィンドウが開きます。
見出しH1-H6 見出しレベルを使用するように設定できる 単純テキスト要素 を追加します。
画像設定可能な 画像要素 を追加します。 構成するときは、画像の元のサイズを使用するか、コンテキストに合わせて調整するかを決定します。
パラグラフリッチテキスト要素 を追加します。 編集するときは、フラグメントのテキストを強調表示して、追加のフォーマットオプションにアクセスします。
セパレーター(区切り文字)ページ要素間に水平線を追加します。 その間隔と色を構成できます。
スライダースライドにグループ化された複数の 画像リッチテキスト オーバーレイを追加します。 ユーザーは各スライドを手動で切り替えることができます。
ソーシャル、Facebook、Twitter、LinkedInのアイコンが付いた画像要素 、各プラットフォームのページにリンクできます。
スペーサーページの断片の間に水平方向の空白を追加する。 その高さを設定できます。
タブ、シンプルなテキスト要素 、ウィジェットやその他のフラグメントを追加するための個別のドロップゾーンを備えた複数のタブを追加します。
ビデオのURL(以前は ビデオ・フラグメント)。YouTubeやDocuments and Mediaの動画をページやテンプレートに埋め込みます。 ビデオの自動再生、ループ、ミュート、コントロールの非表示を設定できます。 エンドユーザーからビデオコントロールを非表示にすることもできます。 詳しくは 動画の埋め込み をご覧ください。

フォームコンポーネント

For Liferay 7.4 U45+/GA45+

フォームコンポーネントのフラグメントを使用して、コンテンツページにフォームを作成します。 これらのフラグメントはカスタム・オブジェクトのみをサポートする。 これらを有効にしてアクセスするには、少なくとも1つの公開オブジェクトが必要です。 詳しくは フラグメントでフォームを構築する を参照してください。

フラグメント説明
フォームコンテナーコンテンツページにフォームを作成するためのコンテナを追加します。 追加したら、コンテナをカスタム・オブジェクトにマッピングする必要があります。 コンテナは、オブジェクトの各フィールドのフォームフラグメントを自動的に生成する。 コンテナからフラグメントを追加または削除したり、フォーム送信の成功メッセージをカスタム設定したりできます。 マッピングされたフォーム・コンテナには、他のフォーム・コンポーネントを配置することしかできません。
キャプチャフォームコンテナに CAPTCHA 確認を追加します。 一度追加されたフォームコンテナは、送信時に人間による確認を必要とします。
チェックボックスフォームコンテナにチェックボックスを追加し、ブーリアン・フィールドにマッピングできるようにします。
日付カスタム日付フィールドにマッピングできるフィールドを追加します。
ファイルアップロード添付ファイルフィールド にマッピングできるファイルアップロードボタンを追加します。 マップされた添付ファイルフィールドは、ファイルのアップロード方法を決定します。 デフォルトでは、このフラグメントはサポートされているファイル拡張子を表示します。
複数選択のリストマルチセレクト・ピックリストにマッピングできるフィールドを追加します。
数値入力カスタム数値フィールド(integer、long integer、decimal、precision decimalなど)にマッピングできるフィールドを追加します。 プレースホルダーの値とヘルプテキストを設定できます。
リッチテキスト入力リッチ・テキスト・フィールドにマッピングできるフィールドを追加します。
プルダウンカスタム・ピックリストおよびリレーションシップ・フィールドにマップできるドロップダウンメニューを追加します。 マッピングされたフィールドに10個以上のオプションが含まれている場合、ユーザーはドロップダウンメニューでオプションを検索することができます。
送信ボタンフォーム入力を送信するためのボタンを追加します。 すべてのフォーム・コンテナには送信ボタンが必要です。
テキスト入力テキスト・フィールド(テキスト、ロング・テキストなど)にマッピングできるフィールドを追加する。
テキスト領域長いテキストフィールドにマッピングできるフィールドを追加します。
タグ現在のサイトまたはグローバルサイトのタグをオブジェクトエントリーに追加するフィールドを追加します。
カテゴリー現在のサイトまたはグローバルサイトのカテゴリーをオブジェクトエントリーに追加するフィールドを追加します。

コンテンツの表示

liferay 7.3+用

コンテンツ表示フラグメントを使用して、サイトのコンテンツを個別に、またはコレクションの一部として表示します。 ページコンテンツを評価またはフラグ付けするためのページ要素を追加することもできます。 DXPには以下のコンテンツ表示用フラグメントが含まれる:

フラグメント説明
コレクション表示手動および動的に定義されたコレクションと、コレクションプロバイダによって定義されたコレクションを表示します。 コレクションをグリッドで表示するか、リストテンプレート(すなわち、ボーダー、箇条書き、インライン、番号付き、スタイルなし)で表示するかを設定できます。 詳しくは コレクションの表示 を参照してください。
コンテンツの表示ドキュメントやメディア、ウェブコンテンツ、ブログ、カテゴリーから1つのコンテンツを表示します。 使用可能な構成オプションは、選択したコンテンツの種類によって異なります。
適用されたフィルター(7.4以降で利用可能)コレクション表示に適用されるフィルタを表示および管理するための要素を追加します。
コンテンツのフラグコンテンツ項目にフラグを立てるための要素を追加します。
コレクションフィルター(7.4以降で利用可能)語彙またはカテゴリを使用してコレクション表示をフィルタリングするための要素を追加します。
コンテンツの評価コンテンツ項目を評価するための要素を追加します。
Note

コレクション表示フラグメントで使用されるコレクション・フィルタ・フラグメントは、オブジェクト・コレクション・プロバイダまたはブループリント・コレクション・プロバイダにマッピングされている場合にのみ機能します。

アカウント

liferay DXP 7.4 U72+/GA72+.

アカウントセレクターフラグメントを使用すると、商品の閲覧や注文の作成時にアカウントを簡単に切り替えることができます。 詳しくは アカウント・セレクタ・フラグメントの使用 を参照のこと。

カート

liferay DXP 7.4 U69+/GA69+.

ミニカートの断片を使用して、カートの詳細な概要を取得します。 商品の数量を調整したり、商品を削除したり、チェックアウトプロセスを開始したり、簡単に商品を検索してカートに追加したりすることができます。 詳しくは ミニカートフラグメントの使用 をご覧ください。

主なコンテンツ

フィーチャー・コンテンツ・フラグメントは、複数のコンポーネントから構成される複雑なページ要素です。 フラグメントのレイアウトをプレビューするには、Fragments and Widgetsパネルで Card View( Card View )に切り替えます。 Liferayには次のような特徴的なコンテンツフラグメントがあります。

note

Liferay DXP/Portal 7.3では、各フラグメントのInformationアイコン(Information)にカーソルを合わせるとレイアウトをプレビューできます。

バナー

バナーフラグメントを使用して、コンテンツページにテキストとリンク要素を追加し、CTA(Call to Action)バナーを作成します。 DXPには、次のレイアウトが含まれています。

Add text and link elements to a content page for creating call to action banners.

機能

featuresフラグメントを使用して、テキスト、画像、リンク要素をコンテンツページに追加し、主要な機能を宣伝します。 Liferayは以下のレイアウトを提供します。

Add text, image, and link elements to a content page for promoting key features

ハイライト

highlightsフラグメントを使用して、ハイライト用の画像、テキスト、リンク要素をコンテンツページに追加します。 Liferayは以下のレイアウトを提供します。

Add image, text, and link elements to a content page for highlighting.

フッタ

Liferay 7.3+

マスターページテンプレート にカスタムフッターを追加するには、フッターフラグメントを使用します。 各フッターには、ナビゲーションメニュー、サインインリンク、画像要素、著作権テキストが含まれています。 Liferayはフッターフラグメントに以下のレイアウトを提供します:

Add a custom footer to master page templates for content page.

ナビゲーションバー

liferay 7.3+

マスターページテンプレート にカスタムヘッダーを追加するには、ナビゲーションバーフラグメントを使用します。 各ナビゲーションバーには、ナビゲーションメニュー、サインインリンク、およびロゴの画像要素が含まれています。 Liferayはナビゲーションバーのフラグメントに以下のレイアウトを提供します:

Add a custom header to master page templates for content page.

メニュー表示

liferay 7.4+

メニュー表示フラグメントを使用すると、コンテンツページにメニューを追加することができます。 展開後は、事前に定義された ナビゲーションメニュー から選択することができます。 サイトナビゲーションのメニュー表示フラグメントの設定方法については、 メニュー表示の設定 のメニュー表示ウィジェットの設定を参照してください。

また、 ナビゲーションメニューセレクタ設定 を使って、特定のマークアップと希望する動作を持つカスタムメニュー表示フラグメントを作成することもできます。

関連トピック

コンテンツページの使用

コンテンツページエディタUIリファレンス

フラグメントの使用