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

フラグメント固有のタグと属性のリファレンス

標準的なHTML、CSS、JavaScriptに加えて、Liferay固有のタグや属性を使用して、編集可能な要素を定義したり、ウィジェットを埋め込んだりすることができます。

編集可能な要素は、 data-lfr-editable-* 属性を使用して、テキスト、画像、リンク、HTML、およびその他のサポートされているタイプを定義します。公開前にこれらの要素を設定することで、構造が一貫していてコンテンツが柔軟に変更可能な、再利用可能なフラグメントを作成できます。

Liferay固有のタグと属性は以下のとおりです。

編集可能なテキスト
編集可能な画像
編集可能なリンク
編集可能なHTML
日付の断片
オブジェクトアクションをボタンにマッピングする
埋め込みウィジェット
ローカライズ可能なフラグメントフィールド
JavaScript変数

警告

編集可能な要素を定義するには、 data-lfr-editable* 属性を使用します。編集可能な各要素には、一意の data-lfr-editable-id を含める必要があります。フラグメントをページに追加した後は、IDを変更しないでください。変更すると、フラグメントに加えた変更が失われます。

ヒント

タグ名を入力し始めると、 HTML エディタは、編集可能な要素や埋め込み可能なウィジェットなどの lfr タグの自動補完機能を提供します。

このリファレンスでは、編集可能な要素と属性を例とともに一覧表示しています。

編集可能な要素

編集可能な要素を使用して、動的で再利用可能なフラグメントを作成します。テキスト、画像、リンク、HTMLをデフォルト値として定義し、フラグメントが使用される各ページごとにカスタマイズします。編集可能なコンテンツをそのまま表示することも、公開前に置き換えるためのダミーコンテンツを使用することもできます。

警告

編集可能な要素内の FreeMarker コードは、フラグメントをページに追加したとき（デフォルト値を設定するため）に一度だけ実行されます。

価値の再評価が必要な場合は、使用を避けてください。例えば、 ${languageUtil.get(locale,'word')}を使用して値をローカライズした場合、その単語はフラグメントをページに追加したときにのみローカライズされます。ポータルの言語が変更されると、コードは再実行されません。

編集可能な要素には多くの用途がある。商品名、小さなテキストボックス、画像、そして商品説明へのリンクが必要だと想像してみてください。編集可能なダミーテキスト、編集可能な画像用のスペース、適切な書式設定、および編集可能なリンクを含むフラグメントを作成します。

その後、フラグメントを複数のページに追加し、説明が必要な各製品について画像、テキスト、リンクを定義できます。

編集可能な要素を使用すると、編集可能なテキスト、画像、リンクを含むフラグメントを作成できます。この断片は編集して、さまざまな状況で再利用できます。

警告

フラグメント内で編集可能な要素を他の編集可能な要素の中にネストすることはサポートされていません。

テキストを編集可能にする

data-lfr-editable-type="text" 属性を使用して、テキスト要素を編集可能にします。各要素には一意の data-lfr-editable-id が必要です。

<div data-lfr-editable-id="text1" data-lfr-editable-type="text">
   Placeholder
</div>

注

すべてのブロック要素とインライン要素が編集可能なテキストに対応しています。

テキスト タイプは、レンダリング前に HTML フォーマットを削除し、プレーンテキストのみを表示します。テキストや色のスタイルなどの書式設定オプションが必要な場合は、ブロック要素やその他のリッチスタイルを含む完全な HTML 書式設定をサポートする リッチテキスト タイプを使用してください。

<div data-lfr-editable-id="text1" data-lfr-editable-type="rich-text">
   Placeholder
</div>

注

編集可能な リッチテキスト には、すべてのブロック要素がサポートされています。 < p>の 代わりに<div>のようなブロック要素を使いましょう。<p>はインライン・コンテンツにしか対応していません。


画像を編集可能にする
画像を編集可能にするには、 data-lfr-editable-type="image" 属性を使用します。 各要素には一意の data-lfr-editable-id が必要です。
<img
   src="placeholder.jpg"
   alt="Placeholder"
   data-lfr-editable-id="img1"
   data-lfr-editable-type="image"
>

data-lfr-editable-type 属性を追加した後、ページに追加されると、コンテンツページエディターのサイドバーから画像のソースとプロパティを設定できます。

編集可能な背景画像の場合、 data-lfr-background-image-id 属性を設定する必要があります。 この ID はフラグメントのメイン div に追加され、編集可能な画像の ID と一致する必要があります。
<div data-lfr-background-image-id="background-img-unique-id">
   <h1 data-lfr-editable-id="h1-unique-id" data-lfr-editable-type="text">
      Placeholder
   </h1>
   <p data-lfr-editable-id="p-unique-id" data-lfr-editable-type="text">
      Placeholder
   </p>
</div>

コンテンツマッピングとは、編集可能な要素と、ウェブコンテンツやブログなどのアセットタイプのフィールドを関連付けるものです。 例えば、画像フィールドをマッピングして、ウェブコンテンツ記事のプレビュー画像を表示させることができます。 マッピングフィールドの詳細については、 フラグメントマッピング設定 を参照してください。
編集可能なリンクの作成
リンク要素を編集可能にするには、 data-lfr-editable-type="link" 属性を使用します。 各要素には一意の data-lfr-editable-id が必要です。
<a
   href="#placeholder"
   target="_blank"
   data-lfr-editable-id="link1"
   data-lfr-editable-type="link"
>
   Go to placeholder
</a>

リンクをメールに関連付けるには、 mailto: URI スキームを使用します。
<a
   href="mailto:email@liferay.com"
   target="_blank"
   data-lfr-editable-id="link-to-email"
   data-lfr-editable-type="link"
>
   Send a Message
</a>

リンクを電話番号に関連付けるには、 tel: URI スキームを使用します。
<a
   href="tel:555-2368"
   target="_blank"
   data-lfr-editable-id="link-to-phone"
   data-lfr-editable-type="link"
>
   Who You Gonna Call?
</a>

コンテンツページエディターのサイドバーから、リンクの種類、ターゲットURL、リンクマッピングを編集できます。

編集可能なリンクの詳細については、 編集可能なリンク を参照してください。
編集可能な HTML の作成
HTML 要素を編集可能にするには、 data-lfr-editable-type="html" 属性を使用します。 各要素には一意の data-lfr-editable-id が必要です。
<article data-lfr-editable-id="text1" data-lfr-editable-type="html">
   <h1>Placeholder</h1>
</article>

フラグメント内にウィジェットを含める
各ウィジェットには、 lfr-widget-[name] タグに対応する登録名があります。 このタグを使用して、フラグメントに埋め込むことができます。 例えば、メニュー表示ウィジェットは navとして登録されているため、そのタグは <lfr-widget-nav /> となります。 次のようにブロック内に埋め込むことができます。
<div class="nav-widget">
   <lfr-widget-nav>
   </lfr-widget-nav>
</div>

埋め込み可能なウィジェットとそれに付随するタグは次のとおりです。


ウィジェット名 タグ


DDL表示 <lfr-widget-dynamic-data-list>
フォーム <lfr-widget-form>
アセットバプリッシャー <lfr-widget-asset-list>
パンくずリスト <lfr-widget-breadcrumb>
カテゴリフィルター <lfr-widget-categories-nav>
Flash <lfr-widget-flash>
メディアギャラリー <lfr-widget-media-gallery>
メニュー表示 <lfr-widget-nav>
アンケート <lfr-widget-polls>
関連するアセット <lfr-widget-related-assets>
サイトマップ <lfr-widget-site-map>
タグクラウド <lfr-widget-tag-cloud>
タグフィルター <lfr-widget-tags-nav>
Webコンテンツの表示 <lfr-widget-web-content>
RSS パブリッシャー <lfr-widget-rss>
Iframe <lfr-widget-iframe>




注


フラグメントにウィジェットを埋め込む際は、IDにスペースを含めないようにしてください。スペースがあると、設定に問題が発生したり、設定が正しく保持されなくなったりする可能性があります。


日付フラグメントの使用
編集可能な日付要素を定義するには、 data-lfr-editable-type="date-time" 属性を使用します。 各要素には一意の data-lfr-editable-id が必要です。
<div data-lfr-editable-type="date-time" data-lfr-editable-id="date-time">
   02/03/11 00:00 AM
</div>

日付形式
最も一般的な日付形式をすぐに選択することも、 SimpleDateFormat に従って日付形式をカスタマイズすることもできます。
すぐに使えるオプションは4つあります。


日付形式 見た目


MM/DD/YY 2023年8月7日
日/月/年 2023年7月8日
YY/MM/DD 2007年8月23日
DD/MM/YYYY 2023年7月8日


日付形式をカスタマイズすると、さまざまな日付と時刻のパターン（例：紀元記号、タイムゾーン、曜日名）を含めることができます。
次にいくつかの例を示します。


日付形式 見た目


MMMM dd, YYYY. hh:mm a 2023年8月7日 午前11時57分
MM.dd.YY 2023年7月8日
hh 'o''clock' a, zzzz グリニッジ標準時午前11時
KK:mm a, z 午前11時57分（グリニッジ標準時）
EEE, d MMM yyyy HH:mm:ss Z 月, 7 8月 2023 11:57:00 +0000




ヒント


フラグメントの設定フィールドをローカライズするのと同じ方法で、日付フォーマットをローカライズすることができます。


ボタンをアクション可能な状態にする
要素の data-lfr-editable-type を "action" に設定することにより、 オブジェクトアクション をトリガーします。 各要素には、一意の data-lfr-editable-id も必要です。
<button class="btn btn-${configuration.buttonSize} btn-${configuration.buttonType}" data-lfr-editable-id="action" data-lfr-editable-type="action">
   Go Somewhere
</button>

ウィジェットの埋め込みを有効にする
Liferay DXP/Portal 7.4+ +U60


注


フラグメントへのウィジェットの埋め込みは、Liferay DXP 2024.Q4/Portal GA129で非推奨となり、将来のリリースで削除される予定です。 代わりに、ウィジェットをコンテンツページに直接追加してください。


フラグメントに埋め込みたいカスタムウィジェットがある場合は、そのウィジェットを埋め込み可能に設定できます。 ウィジェットを埋め込むには、OSGi コンポーネントである必要があります。 埋め込みたいポートレットクラスの @Component アノテーションの中に、次のプロパティを追加します。
com.liferay.fragment.processor.PortletRegistry

また、 @Activate および @Deactivate ライフサイクル メソッドを設定して、 PortletRegistry を使用してポートレットのエイリアスを登録および登録解除します。
public class MySamplePortlet extends MVCPortlet {

	@Activate
	protected void activate() {
		_portletRegistry.registerAlias(
			_ALIAS,
			MySamplePortletKeys.SAMPLE);
	}

	@Deactivate
	protected void deactivate() {
		_portletRegistry.unregisterAlias(_ALIAS);
	}

	private static final String _ALIAS = "sample";

	@Reference
	private PortletRegistry _portletRegistry;
}

ウィジェットをデプロイすると、追加できるようになります。 プロパティで指定する名前は、次のように lfr-widget タグに追加する必要があります。
<lfr-widget-app-name>
</lfr-widget-app-name>



注


W3C HTML 標準によると、カスタム要素は自己終了できません。 したがって、開始タグと終了タグ <lfr-widget...> の間に何かを追加することはできませんが、タグの自己終了表記を使用することはできません。


フラグメント設定のローカライズ
ページのターゲット言語に合わせてフラグメントの設定をローカライズできます。 例えば、ボタンフラグメントでは、ページ言語がen-USの場合に1つのボタンタイプを定義し、ページ言語がes-ESの場合に別のボタンタイプを定義することができます。 フラグメント構成フィールドをローカライズするには、 ローカライズ可能な 属性を使用します。


注


localizable 属性は、 configurationRole プロパティが style に設定されているフィールドでは使用できません。


次のコード抜粋では、ボタンフラグメントの設定により、 localizable 属性が true に設定され、 fieldSets の下の fields セクションに設定されます。 ローカライズ可能な 属性は、フィールドレベルで設定されます。 この例では、 buttonType のフィールドが1つだけ存在します。 複数のフィールドを持つフラグメントがある場合、それぞれに ローカライズ可能な 属性を設定することが可能です。
"fieldSets": [
  {
    "fields": [
      {
        "name": "buttonType",
        "label": "type",
        "type": "select",
        "dataType": "string",
        "defaultValue": "primary",
        "localizable": true,
        "typeOptions": {
          "validValues": [
            { "value": "primary" },
            { "value": "secondary" },
            { "value": "link" },
            { "value": "outline-primary" },
            { "value": "outline-secondary" }
          ]
        }
      }
    ]
  }
]

このサンプルコードを使用すると、ページの対象言語に応じてボタンの種類を変更できます。 次の例では、 Contact Us/Contacto ボタンフラグメントが、 localizable 属性を true に設定し、 buttonType フィールドの  localizable  を設定します。 この例では、この属性を使用して、ページが en-US 言語 (A) を使用している場合は Primary ボタン タイプを、ページが es-ES (B) を使用している場合は Outline Primary タイプを設定します。



ヒント


フラグメントの「一般設定」の下にある旗のアイコンは、その設定フィールドがローカライズ可能であることを示しています。


localizable 属性を持つフラグメントで、言語のカスタム設定が指定されていない場合は、デフォルトのページ言語の設定が使用されます。
JavaScript変数の使用
フラグメントにJavaScriptを追加する際、Liferayは事前に定義されたいくつかの変数を用意しており、フラグメントの動作管理を容易にします。 使用できる変数の一部を以下に示します。


fragmentElement は、フラグメントを含むルート HTML 要素です。 これを使用すると、フラグメント内のDOM要素にアクセスして操作できます。
const button = fragmentElement.querySelector('.my-button');
button.addEventListener('click', () => {
   console.log('Button clicked!');
});



構成 は、フラグメントの構成オプションを含むオブジェクトです。 フラグメントに設定可能なフィールド（色、テキスト、URLなど）がある場合、それらの値はここに保存されます。
const textColor = configuration.textColor;
fragmentElement.style.color = textColor;



fragmentEntryLinkNamespace は、同じフラグメントが複数存在する場合でも、ページ内のフラグメントを識別するために使用できる一意の文字列です。 JavaScriptで一意のIDやスコープを作成する必要がある場合に便利です。
const uniqueId = `${fragmentEntryLinkNamespace}-button`;
const button = document.createElement('button');
button.id = uniqueId;
fragmentElement.appendChild(button);



注


fragmentEntryLinkNamespace は fragmentNamespaceと呼ばれていましたが、 fragmentNamespace は非推奨になりました。 互換性のためにまだ利用可能ですが、新しいコードでは fragmentEntryLinkNamespace を使用する必要があります。




layoutMode は、フラグメントが編集中か表示中かを示します。 ページが編集モード（layoutMode === "edit"）かライブ表示（layoutMode === "view"）かに基づいてフラグメントの動作を調整できます。
if (layoutMode === 'edit') {
   console.log('Page is in edit mode');
} else {
   console.log('Page is being viewed');
}



関連トピック

フラグメントツールキットコマンドリファレンス
ページ フラグメントエディタのインターフェースリファレンス
フラグメント設定タイプのリファレンス


					

							
								
									Fragment Specific Tags and Attributes Reference for Liferay 7.3 and Earlier Versions

ウィジェット名	タグ
DDL表示	`<lfr-widget-dynamic-data-list>`
フォーム	`<lfr-widget-form>`
アセットバプリッシャー	`<lfr-widget-asset-list>`
パンくずリスト	`<lfr-widget-breadcrumb>`
カテゴリフィルター	`<lfr-widget-categories-nav>`
Flash	`<lfr-widget-flash>`
メディアギャラリー	`<lfr-widget-media-gallery>`
メニュー表示	`<lfr-widget-nav>`
アンケート	`<lfr-widget-polls>`
関連するアセット	`<lfr-widget-related-assets>`
サイトマップ	`<lfr-widget-site-map>`
タグクラウド	`<lfr-widget-tag-cloud>`
タグフィルター	`<lfr-widget-tags-nav>`
Webコンテンツの表示	`<lfr-widget-web-content>`
RSS パブリッシャー	`<lfr-widget-rss>`
Iframe	`<lfr-widget-iframe>`

日付形式	見た目
MM/DD/YY	2023年8月7日
日/月/年	2023年7月8日
YY/MM/DD	2007年8月23日
DD/MM/YYYY	2023年7月8日

日付形式	見た目
`MMMM dd, YYYY. hh:mm a`	2023年8月7日午前11時57分
`MM.dd.YY`	2023年7月8日
`hh 'o''clock' a, zzzz`	グリニッジ標準時午前11時
`KK:mm a, z`	午前11時57分（グリニッジ標準時）
`EEE, d MMM yyyy HH:mm:ss Z`	月, 7 8月 2023 11:57:00 +0000

Capabilities

View All Capabilities

Product

Education

Knowledge Base