Documentation

リモートアプリケーションの種類について

リモートアプリケーションは、Liferayのフロントエンド基盤を利用して、外部のアプリケーションを登録し、ページウィジェットとして描画します。 リモートアプリケーションのエントリーを作成する際、 IFrameカスタム要素 のいずれかのタイプを選択することができます。 これは、外部アプリケーションがLiferay DXPに登録され、サイトページでレンダリングされる方法を決定するものです。

どちらのタイプのリモートアプリケーションも、レンダーページのライフサイクル中にウィジェットとしてページに統合されます。 エントリーを作成すると、Liferayはウィジェットを生成し、OSGiサービスレジストリに追加します。 必要であれば、エントリーまたはウィジェットレベルで追加のプロパティを設定し、IFrameとカスタム要素の両方のアプリケーションのレンダリング方法を設定することができます。

ただし、IFrameとカスタム要素のアプリケーションは、ホストとレンダリングが異なります。 また、Liferayサービスとランタイムデータへのアクセスレベルも異なります。

Tip

カスタム要素 タイプは、Liferayプラットフォームとの統合がより進み、より複雑なシナリオをサポートします。

IFrameタイプの使用

IFrameタイプは、外部アプリケーションを別の <iframe> 要素にレンダリングし、LiferayのクライアントSDK APIを使用してホストページとの限定的な連携を可能にします。 IFrameアプリケーションのアーキテクチャは、Liferayサーバー、Liferayホストページ、そしてアプリケーションをホストする外部サーバーの3つの主要な部分を含んでいます。

IFrameアーキテクチャーには、Liferayサーバーのリモートアプリケーションエントリー、外部サーバーにホストされているアプリケーション、およびリモートアプリケーションウィジェットを持つLiferayページが含まれています。

各IFrameエントリーは、通常外部サーバーから提供されるアプリケーションにリンクするIFrame URLを格納します。 その結果、アプリケーションは、マークアップ、スクリプト、スタイル、および(オプションで)クライアントSDKを含むHTMLドキュメントを提供する必要があります。

リモートアプリケーションのウィジェットをページに追加すると、LiferayはエントリーのURLを使用して、外部アプリケーションのコンテンツを入力した <iframe> タグをレンダリングします。 エントリーやウィジェットのインスタンスにプロパティが含まれている場合、それらは追加のURL属性(<iframe (+properties)/>)としてアプリケーションに渡され、アプリケーションはプログラム的にそれらにアクセスすることができます。

注釈

IFrameアプリは、独自のマークアップを組み立てて、ウィジェットの <iframe> 要素を埋めるためにブラウザに送信できるように、サーバーにデプロイする必要があります。 これに対して、 カスタム要素アプリ は、マークアップを生成するためのサーバーを必要としません。 ブラウザはアプリのウィジェットとJSコードを介して必要なロジックを実行する責任があるため、URLを介してアプリケーションのコードを利用できるようにする必要があります。

デフォルトでは、すべてのブラウザはIFrameアプリケーションに対して「同一生成元」ポリシーを課し、ホストページとその外部アプリケーション間の情報フローを防止しています。 Liferayは、IFrame要素とLiferayページとの間の限定的な通信を可能にするクライアントSDKスクリプトを提供します。 postMessage()APIを介して、ページとの通信プロトコルを実装することで機能します。 このスクリプトを使用するには、アプリケーションのマークアップに含める必要があります。

IFrameアプリがクライアントSDKを使用する場合、Liferayページは現在のログインユーザーとして、アプリケーションに代わって特定のアクションを実行する指示を受け取ります。 これには、DXPサーバーへのサービス呼び出しや、ステータスの詳細へのアクセス(例:ホストページのトーストのオープン、Headless APIの呼び出し、GraphQLクエリの実行、スタイルプロパティへのアクセス)などがあります。

カスタム要素タイプの使用

カスタム要素タイプは、外部アプリケーションコードを個別のHTML <custom-element> にレンダリングし、Liferayホストページとの完全な統合を提供します。 カスタム要素アプリケーションのアーキテクチャーは、Liferayサーバー、Liferayホストページ、そしてアプリケーションを格納する外部サーバーの3つの主要な部分を含んでいます。 Liferayはこれらのファイルを使用して、ブラウザでアプリケーションを作成します。

カスタム要素のアーキテクチャーには、Liferayサーバーのリモートアプリケーションエントリー、サーバーに保存されたアプリケーションコード、リモートアプリケーションウィジェットを持つLiferayページが含まれています。

各カスタム要素のエントリーには、HTML要素名と、必要なJavaScriptおよびCSSファイルのURLが含まれます。 また、実行時にアプリケーションと一緒にレンダリングされるプロパティも含められます。

ページに追加されると、LiferayはリモートアプリケーションのJavaScriptとCSSファイルを<script><link> 要素を介して直接ページに挿入します。 読み込まれると、JavaScriptがアプリケーションを宣言してインスタンス化し、CSSファイルがそれをスタイル設定します。

重要

リモートアプリケーションのコードは、カスタム要素を宣言し、リモートアプリケーションエントリーの名前と一致するHTML要素名を提供する必要があります。 このため、アプリのコードが読み込まれると同時にブラウザでカスタム要素宣言が実行されるように、 IIFE を使用する必要があります。

リモートアプリケーションのウィジェットがページに追加されると、まず提供されたHTML要素名を持つタグを生成し、要素のコードで定義されたロジックを実行することで、アプリケーションマークアップがレンダリングされます。 エントリーまたはウィジェットインスタンスにプロパティが含まれる場合、それらは生成されたカスタム要素マークアップ(<custom-element (+props)/>)に追加されます。

いったんレンダリングされると、アプリケーションはLiferayページに完全に統合されるので、LiferayのパブリックJavaScript APIを使用し、ホストページですでに利用可能なスタイルクラスを再利用することができます。 しかし、カスタム要素をどのように構築するか、そのスタイルルールをどこに置くかによって、これを変更することができます。 例えば,アプリケーションのマークアップに Shadow DOM が使われている場合,カスタム要素のスタイルとホストページのスタイルを分離することができます。

注釈

カスタム要素ウィジェットの複数のインスタンスがページに追加された場合、LiferayはアプリケーションのURLを1回だけ含めます。

追加情報