カスタムエレメントとIFrameクライアント拡張機能を理解する¶
カスタムエレメントとIFrameクライアント拡張は、Liferayのフロントエンドインフラを使用して、アプリケーションをLiferayに登録し、ページウィジェットとしてレンダリングします。 カスタム要素 と iframe のタイプは、アプリケーションが Liferay に登録され、サイトページでレンダリングされる方法を決定します。
これらの拡張の一つを作成すると、Liferayはウィジェットを生成し、OSGiサービスレジストリに追加します。 必要であれば、エントリまたはウィジェットレベルで追加のプロパティを設定し、カスタム要素とIFrameアプリケーションの両方がどのようにレンダリングされるかを設定することができます。
しかし、カスタム要素とIFrameアプリケーションは、異なるホストとレンダリングされます。 また、Liferayサービスとランタイムデータへのアクセスレベルも異なります。
Tip
カスタム要素 タイプは、Liferayプラットフォームとの統合がより進み、より複雑なシナリオをサポートします。
カスタム要素タイプの使用¶
カスタム要素クライアント拡張タイプは、外部アプリケーションコードを別のHTML <custom-element> にレンダリングし、Liferayホストページとの完全な統合を提供します。 カスタム要素アプリケーションのアーキテクチャは、Liferayサーバー、Liferayホストページ、そしてアプリケーションのコードを格納するサーバーの3つの主要な部分を含んでいます。 Liferayはこれらのファイルを使用して、ブラウザでアプリケーションを作成します。
各カスタム要素の項目には、HTML要素の名前と、必要なJavaScriptおよびCSSファイルのURLが含まれます。 また、実行時にアプリケーションと一緒にレンダリングされるプロパティも含めることができる。
ページに追加されると、Liferayはクライアント拡張のJavaScriptとCSSファイルを <script> と <link> 要素を介して直接ページに挿入します。 読み込まれると、JavaScriptがアプリケーションを宣言してインスタンス化し、CSSファイルがそれをスタイル設定します。
重要
アプリケーションのコードは、カスタム要素を宣言し、Remote Appsの項目にある名前と一致するHTML要素名を提供する必要があります。 このため、アプリのコードが読み込まれると同時にブラウザでカスタム要素宣言が実行されるように、 IIFE を使用する必要があります。
リモートアプリのウィジェットがページに追加されると、まず提供されたHTML要素名を持つタグを生成し、要素のコードで定義されたロジックを実行することで、アプリケーションマークアップがレンダリングされます。 エントリーまたはウィジェットインスタンスにプロパティが含まれる場合、それらは生成されたカスタム要素マークアップ（<custom-element (+props)/>）に追加されます。
いったんレンダリングされると、アプリケーションはLiferayのページに完全に統合されるので、LiferayのパブリックJavaScript APIを使用し、ホストページですでに利用可能なスタイルクラスを再利用することができます。 しかし、カスタム要素をどのように構築するか、そのスタイルルールをどこに置くかによって、これを変更することができます。 例えば，アプリケーションのマークアップに Shadow DOM が使われている場合，カスタム要素のスタイルとホストページのスタイルを分離することができます。
注釈
カスタム要素ウィジェットの複数のインスタンスがページに追加された場合、LiferayはアプリケーションのURLを1回だけ含めます。
IFrameタイプの使用¶
IFrameクライアント拡張タイプは、外部アプリケーションを別の <iframe> 要素にレンダリングし、LiferayのクライアントSDK APIを使用してホストページとの限定的なインタラクションを可能にします。 IFrameアプリケーションのアーキテクチャは、Liferayサーバー、Liferayホストページ、そしてアプリケーションをホストする外部サーバーの3つの主要な部分を含んでいます。
各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クエリの実行、スタイルプロパティへのアクセス）などがあります。