基本的なカスタム要素を作成する¶
Liferay 7.4以降で利用可能
カスタム要素は、Liferayのフロントエンドのインフラストラクチャを使用して、外部のリモートアプリケーションをLiferayプラットフォームに登録し、ウィジェットとしてレンダリングするクライアント拡張機能の一種です。
警告
カスタム要素やIFrameを他のタイプのクライアント拡張と同じようにデプロイすることは、Liferay 7.4のベータ版機能です。 このチュートリアルでは、カスタム要素のリモートアプリケーションを展開するための別の方法を使用していますが、将来のアップデートまでは、この方法が推奨されます。
ここでは、Liferay の create_remote_app.sh スクリプトを使用して、基本的なリモートアプリケーションを作成します。 アプリケーションが生成されたら、そのコードをコンパイルし、.jsと.cssファイルをホストします。 ホストされたら、各ファイルのURLをコピーして、カスタム要素を作成するために使用します。 最後に、アプリケーションをウィジェットとしてサイトのページに配置することができます。
注釈
カスタム要素クライアント拡張は、アプリケーションがどのように構築され、パッケージ化され、ホストされているかには関係ありません。 このチュートリアルは、カスタム要素アプリケーションのサンプルを作成する便利な方法のみを提供します。
create_remote_app.sh を実行するには、最新版の Node.JS 、 NPM 、および 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-foo、 hello-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
次に、以下の手順に従います。
サイトメニュー(
) を開き、 ［コンテンツ & データ］ を展開して、 ［ドキュメントとメディア］ へ移動してください。追加 ボタン（
）をクリックし、 ［複数ファイルのアップロード］ を選択します。.js</0と<code>.cssファイルをアップロードエリアにドラッグ＆ドロップしてください。または、 ［Select Files］ を使用してアップロードしてください。
［Publish］ をクリックします。
これにより、ファイルがドキュメントライブラリに追加され、リモートアプリケーションを作成するために使用する一意のURLが割り当てられます。
各ファイルのURLを表示するには、 Info アイコン (
) をクリックし、ファイルを選択してください。 各ファイルの WebDAV URL をコピーし、次のステップで使用するために保存してください。
例えば、
http://localhost:8080/webdav/guest/document_library/main.114dde4a.jshttp://localhost:8080/webdav/guest/document_library/main.9877909d.css
Liferayにアプリケーションを登録する¶
グローバルメニュー(
) を開き、 ［アプリケーション］ タブをクリックし、 ［Remote Apps］ へ移動します。追加 ボタン（
）をクリックします。次の値を入力します。
項目
値
名前
H5V7-Remote-App
Type (Automatic Copy)
カスタム要素
HTML 要素名
h5v7-remote-appURL
.jsファイルのWebDAV URLCSS の URL
.cssファイルのWebDAV URLポートレットのカテゴリ名
リモートアプリケーション
［保存］ をクリックします。
保存すると、LiferayはH5V7-Remote-Appという名前のウィジェットを作成し、他のページウィジェットのようにサイトのページに配置することができるようになります。 選択したポートレットカテゴリ名の下に表示されるウィジェットです。
