Documentation

基本的なカスタム要素を作成する

Liferay 7.4以降で利用可能

カスタム要素は、Liferayのフロントエンドのインフラストラクチャを使用して、外部のリモートアプリケーションをLiferayプラットフォームに登録し、ウィジェットとしてレンダリングするクライアント拡張機能の一種です。

警告

カスタム要素やIFrameを他のタイプのクライアント拡張と同じようにデプロイすることは、Liferay 7.4のベータ版機能です。 このチュートリアルでは、カスタム要素のリモートアプリケーションを展開するための別の方法を使用していますが、将来のアップデートまでは、この方法が推奨されます。

ここでは、Liferay の create_remote_app.sh スクリプトを使用して、基本的なリモートアプリケーションを作成します。 アプリケーションが生成されたら、そのコードをコンパイルし、.js.cssファイルをホストします。 ホストされたら、各ファイルのURLをコピーして、カスタム要素を作成するために使用します。 最後に、アプリケーションをウィジェットとしてサイトのページに配置することができます。

create remote app.shスクリプトを使用して、簡単なReactアプリケーションを作成します。

注釈

カスタム要素クライアント拡張は、アプリケーションがどのように構築され、パッケージ化され、ホストされているかには関係ありません。 このチュートリアルは、カスタム要素アプリケーションのサンプルを作成する便利な方法のみを提供します。

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

create_remote_app.shスクリプトを実行します。

create_remote_app.shを呼び出す場合、有効なHTML要素名を指定し、目的のJavaScriptフレームワーク(例:ReactもしくはVue)を指定する必要があります。

このコマンドを実行すると、Reactアプリケーションのコードが生成されます。

curl -Ls https://github.com/liferay/liferay-portal/raw/master/tools/create_remote_app.sh | bash -s h5v7-remote-app react

これは、カスタムHTML要素名(h5v7-remote-app)と目的のJavaScriptフレームワーク(react)の2つの引数を使用してスクリプトを呼び出します。

実行が終了すると、これらの要素を含む新しいReactアプリケーションが、 h5v7-remote-appという名前のフォルダーに自動的に作成されます。

h5v7-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
│       │   ├── components
│       │   └── pages
│       │       └── HelloBar.js
│       ├── hello-foo
│       │   ├── components
│       │   └── pages
│       │       └── HelloFoo.js
│       └── hello-world
│           ├── components
│           └── pages
│               └── HelloWorld.js
└── yarn.lock

index.jsファイルを理解する

生成された index.js ファイルには、アプリケーションを Liferay カスタム要素リモートアプリケーションとして使用するために必要な 2 つのカスタマイズが含まれています。

  • WebComponent: 21行目で、アプリケーションは WebComponent と宣言され、Liferayのフレームワークに接続できるようになっています。

  • ELEMENT_ID: 30行目、 ELEMENT_ID に、従来の <div id="root" />ではなく、 h5v7-remote-appが設定されています。 これは、リモートアプリケーションのHTML Element Nameは、アプリケーションの ELEMENT_IDと一致しなければならず、 <div id="root" /> はこの目的には使えないからです。

Reactルーティングを理解する

生成されたコードには、hello-world(デフォルト)、hello-foohello-barの3つのルーティングが含まれています。 ルーティングは、アプリケーションを実行する際に使用できる代替コードのセットです。 基本的な例として、 カスタム要素でルートを使用する を参照してください。

Reactアプリケーションの構築

create_remote_app.shを実行後、新しいh5v7-remote-appフォルダに移動し、アプリケーションをビルドします。

cd h5v7-remote-app
yarn build

このコマンドは、アプリケーションの実行に必要な.js.cssファイルを含む最適化された本番環境用ビルドを作成します。

先に進む前に、コードが正常にコンパイルされたことを確認し、アプリケーションの.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

これらのファイルは、Liferayからアクセス可能な場所に ホストされている 必要があります。これらは、リモートサーバーや、静的リソースの提供に最適化されたデータストレージシステムでホストすることができます。デモの目的で、この例ではLiferayのドキュメントライブラリにアップロードし、WebDAV URLを使ってホストしています。

Tip

ビルドごとに一意のファイル名が生成されます。 カスタムアプリケーションをテストするときは、ビルド後に .js.css ファイルを更新するのを忘れないようにしてください。

アプリケーションファイルのホスティング

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

{include} /_snippets/run-liferay-dxp.md

次に、以下の手順に従います。

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

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

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

    または、 [Select Files] を使用してアップロードしてください。

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

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

これにより、ファイルがドキュメントライブラリに追加され、リモートアプリケーションを作成するために使用する一意のURLが割り当てられます。

各ファイルのURLを表示するには、 Info アイコン (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

Liferayにアプリケーションを登録する

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

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

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

    項目

    名前

    H5V7-Remote-App

    Type (Automatic Copy)

    カスタム要素

    HTML 要素名

    h5v7-remote-app

    URL

    .jsファイルのWebDAV URL

    CSS の URL

    .cssファイルのWebDAV URL

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

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

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

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

H5V7-Remote-Appウィジェットをサイトページに配置する。

追加情報