カスタム要素とIFrameクライアント拡張機能を理解する
カスタムエレメントとIFrameクライアント拡張は、アプリケーションをLiferayに登録し、サイトページ上にウィジェットとしてレンダリングします。
これらのフロントエンド拡張の1つを作成すると、Liferayはウィジェットを生成してOSGiサービスレジストリに追加します。 アプリケーションのレンダリング方法を設定するために、エントリまたはウィジェットスコープで追加のプロパティを設定することができます。
カスタムエレメントとIFrameアプリケーションは、異なるホスト、異なるレンダリング、そしてLiferayサービスとランタイムデータへの異なるレベルのアクセスを持っています。
カスタム要素タイプは、Liferayプラットフォームとの統合性が高く、より複雑なシナリオをサポートします。
カスタム要素タイプの使用
カスタム要素クライアント拡張タイプは、外部アプリケーションコードを独立したHTML <custom-element> にレンダリングし、Liferayホストページとの完全な統合を提供します。 カスタム要素アプリケーションのアーキテクチャは、Liferayサーバー、Liferayホストページ、アプリケーションのコードを格納するサーバーの3つの主要な部分を含んでいます。 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回だけ含めるようにします。
IFrameタイプの使用
IFrameクライアント拡張タイプは、外部アプリケーションを別の <iframe> 要素にレンダリングし、LiferayのクライアントSDK APIを使用してホストページとの限定的な対話を可能にします。 IFrameアプリケーションのアーキテクチャは、Liferayサーバー、Liferayホストページ、そしてアプリケーションをホストする外部サーバーの3つの主要な部分を含んでいます。
各IFrameエントリーは、通常外部サーバーから提供されるアプリケーションにリンクするIFrame URLを格納します。 その結果、アプリケーションは、マークアップ、スクリプト、スタイル、および（オプションで）クライアントSDKを含むHTMLドキュメントを提供する必要があります。
クライアントの拡張機能のウィジェットをページに追加すると、LiferayはエントリーのURLを使用して、外部アプリケーションのコンテンツを入力した <iframe> タグをレンダリングします。 エントリーやウィジェットのインスタンスにプロパティが含まれている場合、それらは追加のURL属性（<iframe (+properties)/>）としてアプリケーションに渡され、アプリケーションはプログラム的にそれらにアクセスすることができます。
IFrameアプリは、独自のマークアップを組み立てて、ウィジェットの <iframe> 要素を埋めるためにブラウザに送信できるように、サーバーにデプロイする必要があります。 これに対して、 カスタム要素アプリ は、マークアップを生成するためにサーバーを必要としない。 ブラウザはアプリのウィジェットやJavaScriptのコードで必要なロジックを実行するため、アプリケーションのコードをURLで利用できるようにするだけです。
デフォルトでは、すべてのブラウザはIFrameアプリケーションに対して「同一生成元」ポリシーを課し、ホストページとその外部アプリケーション間の情報フローを防止しています。 Liferayは、IFrame要素とLiferayページの間の限定的な通信を可能にするクライアントSDKスクリプトを提供します。 postMessage() APIを介して、ページとの通信プロトコルを実装することで動作します。 このスクリプトを使用するには、アプリケーションのマークアップに含める必要があります。
IFrameアプリがクライアントSDKを使用する場合、Liferayページは現在のログインユーザーとしてアプリケーションに代わって特定のアクションを実行する指示を受け取ります。 これには、DXPサーバーへのサービス呼び出しや、状態の詳細へのアクセス（例：ホストページのトーストのオープン、ヘッドレスAPIの呼び出し、GraphQLクエリーの実行、スタイルプロパティのアクセス）が含まれます。