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

フロントエンドデータセットセルレンダラークライアント拡張機能の使用

Liferay DXP 7.4+

Frontend Data Set (FDS) セルレンダラークライアント拡張機能を使用して、 データセット の表示をカスタマイズできます。 このタイプを使用すると、データセット内の情報を処理し、表示用に別途デプロイされた関数で表示できます。

注

テーブルビュー のセルのみが、セルレンダラークライアント拡張機能で完全に設定可能です。

サンプルワークスペース のクライアント拡張機能から始めます。

前提条件

  1. サポートされているバージョンの Java をインストールしてください。

    注

    サポートされている JDK、データベース、および環境については、互換性マトリックス を確認してください。 推奨される JVM 設定については、 JVM 設定 を参照してください。

  2. サンプルワークスペースをダウンロードし、解凍します。

    curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zip

    unzip com.liferay.sample.workspace-latest.zip

これで、最初のフロントエンドデータセットセルレンダラークライアント拡張機能をデプロイするためのツールが揃いました。

クライアント拡張の検討と修正

FDSセルレンダラークライアント拡張機能は、サンプルワークスペースの client-extensions/liferay-sample-fds-cell-renderer/ フォルダにあります。 client-extension.yaml ファイルに定義されています。

liferay-sample-fds-cell-renderer:
    name: Liferay Sample Frontend Data Set Cell Renderer
    type: fdsCellRenderer
    url: index.*.js

クライアント拡張機能のIDは liferay-sample-fds-cell-renderer で、 タイプ や、デプロイ時にエクスポートされたレンダラーが配置されるURLなど、フロントエンドデータセットセルレンダラークライアント拡張機能のキー構成が含まれています。 利用可能なプロパティの詳細については、 YAML 設定リファレンス を参照してください。

また、assembleブロックが含まれています。

assemble:
    - from: build/static
      into: static

これは、 build/static/ フォルダーで作成されたすべてのファイルが、ビルドされたクライアント拡張機能 .zip ファイルに静的リソースとして含まれることを指定しています。 付属の tsconfig.json および webpack.config.js ファイルには、クライアント拡張機能のエントリ ポイント src/index.ts から build/static/ フォルダーに JavaScript をビルドするための定型構成が含まれています。

index.ts ファイルには、次の JavaScript コードが含まれています。

const fdsCellRenderer: FDSTableCellHTMLElementBuilder = ({itemData, value}) => {
    const element = document.createElement('div');

    element.innerHTML =
        value === 'Green' ? '🍏' : `${itemData.title} is ${value.toString()}`;

    return element;
};

export default fdsCellRenderer;

これは、データセットセルのデータ(値)を取得し、その値に応じてinnerHTMLプロパティを設定する関数fdsCellRendererを定義しています：既存の(文字列)値と連結されたタイトルセルのデータ、または値がGreenの場合は緑色のリンゴのアイコン(ፏ)のいずれかです。 そして、その関数をクライアント拡張機能として使用できるようにエクスポートします。

注

itemData 属性は、Liferay DXP 2025.Q3 以降でのみ利用可能です。 このコード例では、行全体のすべてのセルのデータへのアクセスが許可されます。たとえば、 タイトル セルの値などです。

innerHTML プロパティが設定される前の行に、 Joseph という値をすべてニックネーム Joe に短縮するコードを追加します。

if (value === 'Joseph')
{
    value = 'Joe';
}

次の行で、 itemData.title の値を itemData.jobTitleに変更し、「is」という単語をコロン (: ) に置き換えます。

element.innerHTML =
    value === 'Green' ? '🍏' : `${itemData.jobTitle}: ${value.toString()}`;

ここで、クライアント拡張をデプロイします。

データセットセルレンダラーをデプロイする

新しい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に変更します。

Liferayが起動したら、サンプルワークスペース内のクライアント拡張機能のフォルダから以下のコマンドを実行してください。

../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)

これにより、クライアント拡張が構築され、Liferayのdeploy/フォルダにzipをデプロイします。

注

クライアント拡張機能をデプロイするために使用するコマンドは、Docker、Liferay PaaS、またはLiferay SaaS以外の自己ホスト型インスタンスを使用する場合に変更されます。 詳細については、 Liferayインスタンスへのデプロイ を参照してください。

ヒント

ワークスペース内のすべてのクライアント拡張機能を同時にデプロイするには、 client-extensions/ フォルダーからコマンドを実行します。

Liferayインスタンスのコンソールでデプロイメントを確認します。

STARTED liferaysamplefdscellrenderer_7.4.13 [1459]

カスタムデータセットセルレンダラーがデプロイされたので、それを使用するデータセットを作成してデータを入力します。

ユーザーのデータセットを作成する

注

現在、フロントエンドデータセットセルレンダラークライアント拡張機能は、 ベータ機能フラグの背後にあります。 この機能を使用するには、事前にその機能フラグを有効にする必要があります。

クライアント拡張機能を使用してセルをレンダリングするデータセットを作成します。

  1. 実行中の Liferay インスタンスで、 アプリケーション メニュー (Applications Menu) → コントロール パネル → データセット に移動します。

  2. 追加 (Add icon) をクリックして、新しいデータセットを追加します。

  3. 新しいデータセットのフォームに以下の値を入力してください。

    • 名前: ユーザーデータセット

    • RESTアプリケーション: /headless-admin-user/v1.0

    • RESTスキーマ: UserAccount

    • RESTエンドポイント: /v1.0/user-accounts

    ユーザーデータセットにすべてのユーザーアカウントを含めるように設定します。

  4. ［保存］をクリックします。

  5. ユーザーデータセット をクリックして編集を開始します。

    または、データセットエントリの横にある アクション （Actions menu）をクリックし、 編集を選択します。

  6. 表示モード タブをクリックします。

  7. テーブルビューを選択した状態で、 追加 (Add icon) → データソースから割り当て をクリックします。

  8. emailAddress、 familyName、 givenName、および jobTitle フィールドを選択し、 保存 をクリックします。

    データセットがページに表示されているときに表示するフィールドを3つ選択してください。

    givenName と familyName フィールドは、それぞれユーザーの名と姓を表します。

  9. familyName の行で、 Actions (Actions icon) → Edit をクリックします。

  10. Renderer ドロップダウン メニューから Liferay Sample Frontend Data Set Cell Renderer を選択します。

    クライアント拡張機能経由でデプロイしたレンダラーを選択してください。

  11. ［保存］をクリックします。

  12. givenName の行で、 Actions (Actions icon) → Edit をクリックします。

  13. Renderer ドロップダウン メニューから Liferay Sample Frontend Data Set Cell Renderer を選択します。

  14. ［Save（保存）］をクリックします。

  15. 詳細 タブをクリックし、 保存 をクリックして変更を確定します。

これで、データセットは新しいクライアント拡張機能を使用して、ユーザーの姓と名を表示するようになりました。

データセットをページに表示する

次に、データセットに表示するユーザーを追加します。

  1. アプリケーション メニュー (Applications) → コントロール パネル → ユーザーと組織 に移動します。

  2. 追加 (Add icon) をクリックします。

  3. ユーザーフォームの必須項目に以下の値を入力してください。

    • スクリーンネーム: josephgreen

    • メールアドレス: josephgreen@liferay.com

    • 名: ジョセフ

    • 姓: グリーン

    • 職種: 開発者

    データセットセルレンダリングコードによって変更された値を使用して、新しいユーザーのデータを入力してください。

  4. ［Save（保存）］をクリックします。

  5. 任意のサイトで空白ページに移動します。

  6. ページ上部の 編集 (Edit icon) をクリックします。

  7. 左側の フラグメントとウィジェット メニューから、 コンテンツ表示 セクションまでスクロールし、 データセット フラグメントをページにドラッグします。

    データセットを表示するには、データセットフラグメントを使用します。

  8. データセット フラグメントをクリックします。

  9. 右側の設定メニューにある「データセット」フィールドの横にある「 追加 （Add icon）」をクリックします。

  10. データセットとして、 ユーザーデータセット を選択します。

    「ユーザーデータセット」を選択すると、以前に設定したフィールドを持つすべてのユーザーが表示されます。

  11. ［保存］をクリックします。

データセットの断片が更新され、ユーザーのデータセットが表示されます。 新規ユーザーであるJoseph Greenの氏名（姓と名）は、データセットのセルレンダリングコードによって変更された値を使用して表示されます。

JavaScriptによるデータ処理のため、ジョセフ・グリーンの姓と名が異なって表示されます。

今後の流れ

Liferayでフロントエンドデータセットセルレンダラークライアント拡張機能を正常に使用できました。 次に、 のその他のタイプのフロントエンドクライアント拡張機能 について学びます。

Frontend Data Set Cell Renderer YAML Reference