Documentation

基本のリモートアプリケーションによるルーティングの使用

リモートアプリケーションは、Liferayのフロントエンド基盤を利用して、外部アプリケーションをLiferayプラットフォームに登録し、ウィジェットとして描画します。 複数のルーティングを含むアプリケーション(例: React Router)では、実行時にウィジェットに使用するルーティングを決定するために、リモートアプリケーションのプロパティを定義することができます。 これらのプロパティは、リモートアプリケーションまたはデプロイされたのウィジェットの設定オプションを使用して、アプリケーションに設定することができます。

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

代替ルートを持つ単純なリモートアプリケーションを作成し、ルートプロパティを使用して、どちらが描画されるかを設定します。

注釈

Liferayリモートアプリケーションは、アプリケーションの構築、パッケージ化、ホスティングの方法にとらわれません。 このチュートリアルでは、リモートアプリケーションのサンプルを作成するための便利な方法のみを紹介します。

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

Reactアプリケーションの作成、構築、ホスティング

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

    docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u29
    
  2. 別のターミナルでこのコマンドを実行し、Reactアプリケーションを生成します。

    curl -Ls https://github.com/liferay/liferay-portal/raw/master/tools/create_remote_app.sh | bash -s j1v3-remote-app react
    
  3. アプリケーションが正常に作成されたことを確認します。

    スクリプトは、以下の要素を含むj1v3-remote-appという新しいReactアプリケーションを作成する必要があります。

    j1v3-remote-app
    ├── 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-remote-appフォルダに移動し、アプリケーションをビルドします。

    cd j1v3-remote-app
    
    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. メールアドレス(test@liferay.com)とパスワード(test)を使って、<http://localhost:8080>でLiferayにサインインします。 プロンプトが表示されたら、パスワードを learn に変更します。

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

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

  9. .js</0と<code>.cssファイルをアップロードエリアにドラッグ&ドロップしてください。

    .js と .css ファイルを Liferayドキュメントライブラリにアップロードします。

  10. Publish] をクリックします。

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

ちなみに

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

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

各ファイルのWebDAV URLをコピーします。

例:

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

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

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

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

  2. 追加 ボタン(Add Button)をクリックします。

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

    項目

    名前

    J1V3-Remote-App

    Type (Automatic Copy)

    カスタム要素

    HTML 要素名

    j1v3-remote-app

    URL

    .jsファイルのWebDAV URL

    CSS の URL

    .cssファイルのWebDAV URL

    インスタンス化可能

    ポートレットのカテゴリ名

    リモートアプリケーション

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

保存すると、LiferayはJ1V3-Remote-Appという名前のウィジェットを作成し、他のページウィジェットのようにサイトページにデプロイすることができるようになります。 選択したポートレットカテゴリ名の下に表示されます。

J1V3-Remote-Appはインスタンス化可能なので、1つのページに多数追加して、それぞれ独立した設定にすることができます。 このチュートリアルでは,1つのページに2回ウィジェットを追加します.

J1V3-Remote-Appウィジェットの2つのインスタンスをデプロイします。

ルートプロパティを使用する場合

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

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

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

  2. J1V3-Remote-App を選択します。

    J1V3-Remote-Appを選択します。

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

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

  4. 公開] をクリックします。

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

    両方のウィジェットがHelloFooルートを使用することを確認します。

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

  1. J1V3-Remote-Appウィジェットが含まれるページを編集します。

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

    オプションボタンをクリックし、[設定]を選択します。

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

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

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

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

    設定されたウィジェットがHelloBarルートを使用していることを確認します。

ルートコードの分析

import React from 'react';
import ReactDOM from 'react-dom';

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 <HelloWorld />;
};

class WebComponent extends HTMLElement {
	connectedCallback() {
		ReactDOM.render(
			<App route={this.getAttribute("route")} />,
			this
		);
	}
}

const ELEMENT_ID = 'j1v3-remote-app';

if (!customElements.get(ELEMENT_ID)) {
	customElements.define(ELEMENT_ID, WebComponent);
}

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

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

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

HelloWorld.js

import React from 'react';

const HelloWorld = () => (
	<div className="hello-world">
		<h1>Hello World</h1>
	</div>
);

export default HelloWorld;

HelloFoo.js

import React from 'react';

const HelloFoo = () => (
	<div className="hello-foo">
		<h1>Hello Foo</h1>
	</div>
);

export default HelloFoo;

HelloBar.js

import React from 'react';

const HelloBar = () => (
	<div className="hello-bar">
		<h1>Hello Bar</h1>
	</div>
);

export default HelloBar;