フィードバックを送信
Integrating External Applications
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。

IFrameクライアント拡張機能の使用

Liferay DXP 7.4+

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

サンプルワークスペースのクライアント拡張機能から開始します。

前提条件

クライアント拡張の開発を開始するには、

  1. サポートされているバージョンの Javaをインストールします。

    注

    サポートされている 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クライアント拡張機能をロードするための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

このクライアント拡張機能のIDは liferay-sample-iframe-1 で、 名前、 タイプ 、およびIFrameとして取り込むアプリのURLを含む、IFrameクライアント拡張機能の主要な構成が含まれています。 例の URL で実行されている カウンター アプリ は、ショッピング カートにアイテムを追加する動作をシミュレートする基本的な React アプリです。 クライアント拡張機能をデプロイしたら、他のウィジェットと同様に、Liferay のページにアプリを追加できます。

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

IFrameクライアント拡張機能をデプロイする

注

クライアント拡張機能をLiferay SaaSにデプロイするには、Liferay Cloud コマンドラインツール を使用して lcp deployを実行します。

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

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

http://localhost:8080でLiferayにサインインします。 メールアドレス test@liferay.com とパスワード testを使用してください。 プロンプトが表示されたら、パスワードを learnに変更します。

次に、サンプルワークスペースのクライアント拡張機能のフォルダに移動し、

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

これにより、クライアント拡張機能がビルドされ、zip が Liferay の /deploy フォルダーにデプロイされます。

ヒント

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

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

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

クライアント拡張がデプロイされたので、それを使用するためにLiferayを設定します。

IFrameクライアント拡張機能をウィジェットとして追加する

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

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

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

  3. クライアント拡張機能 → カウンター アプリ ウィジェットを見つけて、ページにドラッグします。 公開をクリックします。

    カウンター アプリをページにドラッグします。

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

IFrame YAML Configuration Reference