IFrameクライアントエクステンションを使う

IFrameクライアントエクステンションを使う

7.4+

IFrameクライアント拡張は、Liferayのフロントエンドインフラを利用して、外部アプリケーションを <iframe> HTML要素として登録します。 Liferayのページにはウィジェットとして追加されます。 他のフロントエンドクライアント拡張機能とは異なり、IFrameは静的なリソースを提供するものではありません。

warning

IFrameクライアント拡張は開発中であり、現在Liferay 7.4では未サポートです。

サンプルワークスペース のクライアントエクステンションから始めます。

前提条件

クライアントエクステンションの開発を始めるために、

  1. Java(JDK8またはJDK11)をインストールします。

    note

    対応する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
    

これで、IFrameクライアント拡張を展開するためのツールが揃いました。

IFrame Client Extensionを読み込むためのURLを指定する。

client-extensions/liferay-sample-iframe-1/client-extension.yaml ファイルは、サンプルワークスペースの IFrame クライアント拡張プロジェクトを定義しています:

liferay-sample-iframe-1-counter-app:
    name: Counter App
    type: iframe
    url: https://arnab-datta.github.io/counter-app

このクライアント拡張は、 liferay-sample-iframe-1 という ID を持ち、 name, type および IFrame として取り込むアプリの URL を含む IFrame クライアント拡張のキーコンフィギュレーションを含みます。 例の url で動作するカウンターアプリ は、ショッピングカートに商品を追加することをシミュレートする基本的な React アプリである。 クライアントエクステンションをデプロイした後、他のウィジェットと同じようにLiferayのページにアプリを追加することができます。

利用可能なプロパティの詳細については、 IFrame YAML設定リファレンス を参照してください。

IFrame Client Extensionを導入する

note

クライアント拡張を Liferay Experience Cloud にデプロイするには、Liferay Cloud Command-Line Tool を使って lcp deploy を実行します。

新しいLiferay インスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.75-ga75。

http://localhost:8080でLiferayへのサインインします。 メールアドレス[email protected]_とパスワード_test_を使用してください。 プロンプトが表示されたら、パスワードを _learn_に変更します。

Next, go to the client extension’s folder in the sample workspace and run

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

これはクライアント拡張をビルドし、Liferay の /deploy フォルダに zip をデプロイします。

tip

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

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

STARTED liferay-sample-iframe-1_1.0.0 [1592]

クライアントエクステンションがデプロイされたので、それを使用するようにLiferayを設定します。

IFrame Client ExtensionをWidgetとして追加する。

IFrameは、ウィジェットとしてページに追加されます。

  1. 任意のページの上部にある 編集(Edit) をクリックします。

  2. ウィジェットをページに追加します。 フラグメントとウィジェット」サイドバー(Fragments and Widgets)で、「ウィジェット」 をクリックします。

  3. Client Extensions → Counter App ウィジェットを探し、ページ上にドラッグします。 [Publish] をクリックします。

    Counter Appをページ上にドラッグします。

アイテムを追加して、カウンターアプリが動作することを確認します。

追加情報