フィードバックを送信
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 クライアント拡張機能のキー構成が含まれています。これには、 名前、 タイプ 、および IFrame として取り込むアプリの URL が含まれます。 例の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. 「クライアント拡張機能」→「カウンターアプリ」ウィジェットを見つけて、ページにドラッグします。 ［Publish（公開）］をクリックします。

    カウンターアプリをページにドラッグしてください。

カウンターアプリが正しく動作していることを確認するために、いくつかアイテムを追加してみてください。

IFrame YAML Configuration Reference