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

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

標準の HTML、CSS、JavaScript に加えて、Liferay 固有のタグと属性を使用して、編集可能なセクションの定義やウィジェットの埋め込みなどを行うことができます。

編集可能な要素は公開前に変更できます。つまり、同一のフォーマットを持ちながら、特定のコンテキストに適応できる要素を含む、シンプルで再利用可能なフラグメントを作成できます。

以下の Liferay 固有のタグと属性が利用可能です。

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

警告

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

ヒント

タグの名前を入力し始めると、 HTML エディタによって、編集可能な要素や埋め込み可能なウィジェットなどの lfr タグの自動補完が行われます。

このリファレンスには、編集可能な利用可能なタグと属性、およびフラグメントでそれらを使用する方法の例がリストされています。

編集可能な要素

サイトを構築するための編集可能なセクション、動的で再利用可能なフラグメントを作成したり、編集可能な要素を使用してポートレットに埋め込まれたウィジェットを組み込むことでフラグメントを実現したりできます。

これらの編集可能な要素にテキスト、画像、リンク、HTML コードを提供すると、それらが各フィールドのデフォルト値になります。ページの最終バージョンで編集可能なコンテンツを表示したり、ページを公開する前に置き換える必要があるフィラーコンテンツを表示したりする必要がある場合もあります。

警告

編集可能なフィールド内の FreeMarker コードは、フラグメントがページに追加されたときに 1 回だけ実行されます (デフォルト値を設定するため)。

値を再評価する必要がある場合は使用しないでください。たとえば、 ${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> はインラインコンテンツのみをサポートしているため、 <p> ではなく、 <div> のようなブロック要素を使用します。

画像を編集可能にする

画像はテキストと同じ data-lfr-editable-type 属性を使用しますが、タイプは image です。 data-lfr-editable-id は一意の ID である必要があります。

<img
   src="placeholder.jpg"
   alt="Placeholder"
   data-lfr-editable-id="img1"
   data-lfr-editable-type="image"
>

data-lfr-editable-type タグと image タイプをフラグメントに追加した後、コンテンツページエディターのサイドバーで編集可能な画像をクリックし、フラグメントがページに追加されたときにそのソースとプロパティを構成できます。

コンテンツページ上の画像を定義するにはいくつかのオプションがあります。

ほとんどの画像はこのように処理できますが、編集可能な背景画像を追加するには、 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>

コンテンツマッピングは、フラグメント内の編集可能なフィールドを、Web コンテンツやブログなどのアセットタイプのフィールドに接続します。たとえば、画像フィールドをマップして、Web コンテンツ記事のプレビュー画像を表示できます。マッピングフィールドの詳細については、「フラグメントマッピング設定」を参照してください。

編集可能なリンクの作成

data-lfr-editable-type を linkに設定することで、一般的なリンク要素を編集可能にすることができます。 data-lfr-editable-id は一意の 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 の作成

data-lfr-editable-type 属性を html に設定することで、一般的な HTML 要素も編集可能にできます。

<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 にスペースを入れないようにしてください。スペースがあると、構成の問題が発生し、設定が適切に保持されなくなる可能性があります。

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 の場合は別のボタンタイプを定義できます。フラグメント構成フィールドをローカライズするには、 ローカライズ可能な 属性を使用します。

注

ローカライズ可能な 属性は、 configurationRole プロパティが スタイルに設定されているフラグメント構成フィールドでは使用できません。

次のコード抜粋では、ボタンフラグメント構成によって、 fieldSetsの下の fields セクションの localizable 属性が true に設定されています。 ローカライズ可能な 属性は、フィールドレベルで設定されます。この例では、 buttonType のフィールドが1つだけ存在します。複数のフィールドを持つフラグメントがある場合、それぞれに ローカライズ可能な 属性を設定することが可能です。

"fieldSets": [
  {
    "fields": [
      {
        "dataType": "string",
        "defaultValue": "primary",
        "label": "type",
        "name": "buttonType",
        "type": "select",
        "localizable": true,
        "typeOptions": {
          "validValues": [
            {
              "value": "primary"
            },
            {
              "value": "secondary"
            },
            {
              "value": "link"
            },
            {
              "value": "outline-primary"
            },
            {
              "value": "outline-secondary"
            }
          ]
        }
      }
    ]
  }
]

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

フラグメント内のローカライズ可能な要素では、[全般] タブの下にフラグアイコンが表示され、言語ごとに異なる構成がサポートされます。

ヒント

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

言語のカスタム構成を指定していない ローカライズ可能な 属性を持つフラグメントは、デフォルトのページ言語の構成を使用します。

日付フラグメントの使用

日付形式を地域に適合させることは、多くの状況で困難な場合があります。日付フラグメントに data-lfr-editable-id="date-time" 属性と data-lfr-editable-type="date-time" 属性を含めることで、日付フラグメントを使用して日付形式をカスタマイズおよびローカライズできます。 data-lfr-editable-id は、次の例のように一意の ID である必要があります。

<div data-lfr-editable-type="date-time" data-lfr-editable-id="date-time">
   02/03/11 00:00 AM
</div>

日付形式

最も一般的な日付形式をすぐに選択することも、 SimpleDateFormatに従って日付形式をカスタマイズすることもできます。

すぐに使用できるオプションは 4 つあります。

日付形式	見た目
月/日/年	2023年8月7日
日/月/年	2023年7月8日
年/月/日	2007年8月23日
日/月/年	2023年7月8日

日付形式をカスタマイズすると、さまざまな日付と時刻のパターン (例: 元号指定、タイムゾーン、曜日名) を含めることができます。

次にいくつかの例を示します。

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

ヒント

日付形式は、フラグメント構成フィールドをローカライズすると同じ方法でローカライズできます。

ボタンをアクション対応にする

ボタンタグに data-lfr-editable-id="action" 属性と data-lfr-editable-type="action" 属性を含めることで、ボタンコンポーネントを使用してオブジェクトアクションをトリガーできます。 data-lfr-editable-id は、次の例のように一意の ID である必要があります。

<button class="btn btn-${configuration.buttonSize} btn-${configuration.buttonType}" data-lfr-editable-id="action" data-lfr-editable-type="action">
   Go Somewhere
</button>

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');
}
```