カスタム要素でルーティングを使用する

Liferay 7.4以降で利用可能

カスタムエレメントクライアント拡張は、Liferayのフロントエンド基盤を利用して、外部アプリケーションをLiferayプラットフォームに登録し、ウィジェットとしてレンダリングします。 複数のルーティングを含むアプリケーション(例： React Router ）では、実行時にウィジェットに使用するルーティングを決定するために、リモートアプリケーションのプロパティを定義することができます。 これらのプロパティは、Liferayのリモートアプリケーションメニュー、またはデプロイ後のウィジェットの設定オプションからアプリケーションに設定することができます。

warning

カスタムエレメントやIFrameを他のタイプのクライアントエクステンションのように展開することは、Liferay 7.4のベータ機能です。 このチュートリアルでは、カスタム要素のリモートアプリケーションを異なる方法で展開しますが、将来のアップデートまでは、この方法が推奨されます。

このチュートリアルでは、Liferay の create_custom_element.sh スクリプトを使って基本的な React アプリケーションを作成します。 hello-world, hello-foo, hello-barという 3 つのルートを持つサンプルアプリを生成します。 アプリケーションをコンパイルし、.jsと.cssファイルをホストしたら、アプリケーションをLiferayに登録して、ページウィジェットとしてデプロイします。 最後に、それぞれの代替ルーティングを使用するように設定します。

note

カスタムエレメントクライアントの拡張は、構築、パッケージ化、ホスティングの方法に関係なく、あらゆるテクノロジーを使用できます。 このチュートリアルでは、基本的なルーティングを行うカスタムエレメントアプリケーションのサンプルのみを提供しています。

create_custom_element.sh を実行するには、 Node.JS , NPM , YARN の最新版が必要です。 先に進む前に、これらのツールがインストールされていることを確認してください。

Reactアプリケーションの作成、ビルド、ホスティング

1. 新しいLiferay DXP 7.4以降のコンテナを起動します。 コンテナが起動する間、次のステップに進むことができます。

   docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u75
   

2. 別の端末でこのコマンドを実行し、Reactアプリケーションを生成します。

   curl -Ls https://github.com/liferay/liferay-portal/raw/master/tools/create_custom_element.sh | bash -s j1v3-custom-element react
   

3. アプリケーションが正常に作成されたことを確認します。

   スクリプトは、これらの要素で j1v3-custom-element という新しい React アプリケーションを作成します：

   j1v3-custom-element
   ├── node_modules
   ├── README.md
   ├── package.json
   ├── public
   │   └── index.html
   ├── src
   │   ├── common
   │   │   ├── services
   │   │   │   └── liferay
   │   │   │       ├── api.js
   │   │   │       └── liferay.js
   │   │   └── styles
   │   │       ├── hello-world.scss
   │   │       ├── index.scss
   │   │       └── variables.scss
   │   ├── index.js
   │   └── routes
   │       ├── hello-bar
   │       │   └── pages
   │       │       └── HelloBar.js
   │       ├── hello-foo
   │       │   └── pages
   │       │       └── HelloFoo.js
   │       └── hello-world
   │           └── pages
   │               └── HelloWorld.js
   └── yarn.lock
   

4. 新しい j1v3-custom-element フォルダに移動し、アプリケーションをビルドします。

   cd j1v3-custom-element
   

   yarn build
   

5. ビルドが成功したことを確認し、アプリケーションの .js と .css ファイルを確認します。

   Creating an optimized production build...
   Compiled successfully.
   
   File sizes after gzip:
   
   43.51 kB  build/static/js/main.114dde4a.js
   121 B     build/static/css/main.9877909d.css
   

6. メールアドレス([email protected]）とパスワード(test）を使って、<http://localhost:8080>でLiferayにサインインします。 プロンプトが表示されたら、パスワードを learn に変更します。

7. サイトメニュー() を開き、 ［コンテンツ & データ］ を展開して、 ［ドキュメントとメディア］ へ移動してください。

8. 追加() をクリックし、 複数ファイルのアップロード を選択します。

9. .js と .css のファイルをアップロードエリアにドラッグ＆ドロップしてください。

   

10. ［Publish］ をクリックします。

これは Liferayドキュメントライブラリにファイルを追加し、固有の WebDAV URL を割り当て、リモートアプリケーションを作成するために使用します。

tip

このチュートリアルでは、アプリケーションの静的リソースをデモ用にLiferayのドキュメントライブラリにホスティングします。 本番環境では、静的リソースをホストするために最適化されたサーバーでアプリケーションのファイルをホストする必要があります。

各ファイルのURLを表示するには、 Info icon ()をクリックし、ファイルを一つずつ選択してください。 各ファイルの WebDAV URL をコピーし、次のステップで使用するために保存してください。

例：

• http://localhost:8080/webdav/guest/document_library/main.114dde4a.js
• http://localhost:8080/webdav/guest/document_library/main.9877909d.css

アプリケーションの登録とデプロイ

1. グローバルメニュー() を開き、 ［アプリケーション］ タブをクリックし、 ［リモートアプリケーション］ へ移動します。

2. 追加(） をクリックします。

3. 次の値を入力します。

   項目	値
   名称	J1V3-カスタムエレメント
   タイプ	カスタム要素
   HTML要素名	j1v3-custom-element
   URL	.jsファイルのWebDAV URL
   CSSのURL	.cssファイルのWebDAV URL
   インスタンス化可能	✔
   ポートレットのカテゴリ名	リモートアプリケーション

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

保存すると、LiferayはJ1V3-Custom-Elementという名前のウィジェットを作成し、他のページウィジェットと同様にサイトページに配置することができます。 選択したポートレットカテゴリ名の下に表示されます。

J1V3-Custom-Elementはインスタンス化可能なので、1つのページに多数追加し、それぞれを独立した構成にすることが可能です。 この例では、ウィジェットを2回ページに追加します。

routeプロパティを使用する場合

自動生成されたアプリには、3つのルートが含まれています。 hello-world、hello-foo、hello-barです。 デフォルトでは、アプリケーションは hello-world のルートを使用します。 ただし、リモートアプリケーションのプロパティを使用して、別のルートを使用するように設定することができます。 これらのプロパティは、 リモートアプリケーション または ウィジェットの設定オプション で設定することが可能です。

リモートアプリケーションでルートプロパティを定義する

1. グローバルメニュー() を開き、 ［アプリケーション］ タブをクリックし、 ［リモートアプリケーション］ へ移動します。

2. 選択 J1V3-Custom-Element .

   

3. プロパティフィールドにroute=hello-fooと入力します。

   

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

5. デプロイされた両方のウィジェットがHelloFooルートを使用することを確認します。

   

ポートレット設定でルートプロパティを定義する

1. J1V3-Custom-Elementウィジェットを含むページを編集します。

2. ウィジェットの1つの オプション ボタン () をクリックし、 ［設定］ を選択します。

   

3. プロパティフィールドにroute=hello-barと入力します。

   

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

5. 設定されたウィジェットがhello-barルートを使用し、もう一方のウィジェットがhello-fooルートを使用したままであることを確認します。

   

ルートコードの分析

import React from 'react';
import {createRoot} from 'react-dom/client';

import api from './common/services/liferay/api';
import {Liferay} from './common/services/liferay/liferay';
import HelloBar from './routes/hello-bar/pages/HelloBar';
import HelloFoo from './routes/hello-foo/pages/HelloFoo';
import HelloWorld from './routes/hello-world/pages/HelloWorld';

import './common/styles/index.scss';

const App = ({route}) => {
	if (route === 'hello-bar') {
		return <HelloBar />;
	}

	if (route === 'hello-foo') {
		return <HelloFoo />;
	}

	return (
		<div>
			<HelloWorld />
		</div>
	);
};

class WebComponent extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		createRoot(this).render(

このindex.jsファイルはWebComponentクラスを作成し、HTMLElementインターフェイスを拡張します。 このクラスは、インターフェースの connectedCallback() 関数を実装し、Appをパラメータとして ReactDOM.render に呼び出します。 Appが呼び出されると、定義された"route"属性がないか調べ、その値と利用可能なルートを比較します。 hello-foo または hello-barのいずれかにマッチする場合、対応するルートを返し、レンダリングします。 そうでない場合は、hello-worldを返して描画します。

各ルートは、routesフォルダーからindex.jsファイルにインポートされます。

routes
├── hello-bar
│   └── pages
│       └── HelloBar.js
├── hello-foo
│   └── pages
│       └── HelloFoo.js
└── hello-world
    └── pages
        └── HelloWorld.js

HelloWorld.js

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT

HelloFoo.js

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT

HelloBar.js

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT

追加情報

• フロントエンドクライアント拡張機能
• カスタム要素とIFrameクライアント拡張機能を理解する
• 基本的なカスタム要素の作成
• リモートアプリケーションUIリファレンス

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center