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

フラグメントへの構成オプションの追加

ライフレイ DXP 7.2 SP1

構成可能なオプションによりフラグメントが柔軟になり、類似のフラグメントのメンテナンスが最小限に抑えられます。たとえば、スタイル A の見出しとスタイル B の見出し用に別々のフラグメントを作成する代わりに、構成可能な見出しスタイルを持つフラグメントを作成できます。フラグメントに構成オプションを追加する方法を学習します。

構成可能なフラグメントのデプロイ
構成の検討
設定の変更
変更のプロパゲートとテスト
関連情報

注

Liferay DXP 7.4以降の場合、フラグメントコレクションはLiferay UIではフラグメントセットと呼ばれます。

構成可能なフラグメントのデプロイ

新しいLiferay インスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

http://localhost:8080でLiferayにサインインします。メールアドレス test@liferay.com とパスワード testを使用してください。プロンプトが表示されたら、パスワードを learnに変更します。

次に、次の手順に従って例をデプロイし、フラグメント構成オプションがどのように機能するかを確認します。

サンプルフラグメントセットをダウンロードして解凍します。

curl https://resources.learn.liferay.com/examples/liferay-c7f8.zip -O

unzip liferay-c7f8.zip

フラグメントを手動でインポートします。
フラグメントセットが利用可能であることを確認します。 サイトメニュー () を開き、 デザイン → フラグメントに移動します。セットがリストに表示されます。

注

Liferay DXP 7.1 および 7.2 の場合、製品メニューの サイト → サイトビルダー → ページフラグメント に移動して、フラグメントページに移動します。
コンテンツページに移動し、編集 () をクリックして編集を開始します。
フラグメントとウィジェットパネルで C7F8 セット 見出しを展開し、 C7F8 カード フラグメントをページにドラッグします。
ページで C7F8 カード を選択して、 フラグメント構成メニューを開きます。 [全般] タブで、コンポーネントのテキストスタイルを暗い色または明るい色に設定します。

構成可能なフラグメントを正常にインポートして設定しました。

構成の検討

フラグメントの構成オプションは、Liferay に組み込まれているフラグメントエディターまたはテキストファイルで編集できます。

フラグメントエディターの使用: UI で、フラグメントエディターを使用してフラグメントを編集し、 [構成] タブを選択します。フラグメントの構成がエディターに表示されます。

フラグメント構成ファイルの編集: フラグメントファイルがない場合は、フラグメントのアクションメニューを開き、 [エクスポート]をクリックして、フラグメントからエクスポートします。フラグメントの fragment.json ファイル内の configurationPath フィールド (オプション) は、構成 .json ファイルを指定します。構成ファイルがない場合は、構成ファイルを作成し、configurationPathフィールドを構成ファイル名に設定します。

例の fragment.json ファイルを開いて、フラグメントの構成ファイルを確認します。

{
   "configurationPath": "index.json",
   "cssPath": "index.css",
   "htmlPath": "index.html",
   "jsPath": "index.js",
   "name": "C7F8 Card",
   "type": "component"
}

"configurationPath": "index.json" プロパティは、このフラグメントの構成ファイルが index.jsonであることを示します。

構成ファイルを開きます。

{
   "fieldSets": [
      {
         "fields": [
               {
                  "dataType": "string",
                  "defaultValue": "dark",
                  "label": "Text Style",
                  "name": "c7f8TextStyle",
                  "type": "select",
                  "typeOptions": {
                     "validValues": [
                           {
                              "value": "dark"
                           },
                           {
                              "value": "light"
                           }
                     ]
                  }
               }
         ],
         "label": "C7F8"
      }
   ]
}

上記の設定ファイルは、フラグメントに暗いまたは 明るい テキストスタイルを適用するためのセレクターを指定します。この構成には、c7f8TextStyleという名前のフィールドがあります。フィールドのtypeはselectであり、セレクタコンポーネントになります。詳細については、フラグメント構成タイプを参照してください。

セレクタの有効な値は、darkまたはlightです。 "dataType": "string" プロパティは、セレクターが文字列データに対して操作することを意味します。このセレクタは、C7F8というラベルの付いたフィールドセットの一部です (ラベルはオプションです)。

UI では、このセレクターは、 C7F8というラベルの付いたフラグメントの構成セクションにあります。セレクタは、フィールドのlabelプロパティごとに、Text Styleとラベル付けされています。次の図にセレクタを示します。

C7F8カードフラグメントのセレクターはこちらです

警告

フラグメントエディターは、構成が有効になるまでそれを保存しません。プレビューする前に、JSON構成が有効であることを確認してください。

ユーザーが選択した構成値は、FreeMarkerコンテキストを介してHTMLで使用できるようになります。これらは、HTMLの中で ${configuration.fieldName}という表記で参照されます。このサンプル（${configuration.textAppliedStyle}）は、ユーザーが選択した構成値に応じて dark または light を返し、CSS クラスを text-light または text-darkに設定します。

<div class="component-c7f8-card">
   <div class="card">
      <img
         class="card-img-top"
         data-lfr-editable-id="01-image"
         data-lfr-editable-type="image"
         src="https://clayui.com/images/home/lexicon_symbol.svg"
      />

      <div class="card-body">
         <h5
               class="card-title text-${configuration.c7f8TextStyle}"
               data-lfr-editable-id="02-title"
               data-lfr-editable-type="rich-text"
         >
               Editable Card Title
         </h5>

         <p
               class="card-text text-${configuration.c7f8TextStyle}"
               data-lfr-editable-id="03-text"
               data-lfr-editable-type="rich-text"
         >
               Here is some editable text.
         </p>

         <a
               class="btn btn-primary"
               data-lfr-editable-id="04-label"
               data-lfr-editable-type="link"
               href="#"
         >
               Editable Link
         </a>
      </div>
   </div>
</div>

この例は、選択の構成を示しています。使用可能なフラグメント構成タイプの完全なリストについては、構成タイプリファレンスを参照してください。

設定の変更

サイトメニュー () を開き、 デザイン → フラグメントに移動します。

注

Liferay DXP 7.1 および 7.2 の場合は、代わりに製品メニューの サイト → サイトビルダー → ページフラグメント に移動してフラグメントページに移動します。
C7F8 セットを選択し、C7F8 カードの アクション () をクリックして、編集を選択します。フラグメントエディタが開きます。
構成タブを選択し、チェックボックスフィールドを使用して構成を更新し、カードの説明を非表示/表示にします。 c7f8TextStyleフィールドの閉じ括弧とカンマ（},) の後の新しい行に次のコードを挿入します。
```
{
   "name": "showDescription",
   "label": "Show Description",
   "description": "show-description",
   "type": "checkbox",
   "defaultValue": true
}
```
ヒント

関連付けられたフィールドがどのタブに表示されるかを指定するには、フィールドセットに configurationRole 値を追加できます (JSON 内の fields オブジェクトと一緒に)。値を スタイル に設定すると、フィールドが [スタイル] タブに表示されます。値を 詳細 に設定すると、フィールドが [詳細] タブに表示されます (Liferay DXP バージョン U23+ または GA23+のみ)。 configurationRole が設定されていない場合は、デフォルトで [全般] タブに表示されます。
［コード］タブの［HTML］ペインに戻り、チェックボックスの値をチェックするための条件付きステートメントで段落要素をラップします。 ［Publish］をクリックして変更を適用します。
```
[#if configuration.showDescription]
<p data-lfr-editable-id="03-card-text" data-lfr-editable-type="rich-text"
class="card-text text-${configuration.textAppliedStyle}">
   Here is some editable text.
</p>
[/#if]
```