外部アプリケーションの統合
カスタム要素とIFrameクライアント拡張は、アプリケーションをLiferayに登録し、サイトページ上にウィジェットとして描画します。
これらのフロントエンド拡張機能のいずれかを作成すると、Liferay はウィジェットを生成し、OSGi サービス レジストリに追加します。 アプリケーションの描画方法を設定するために、エントリまたはウィジェットスコープで追加のプロパティを設定することができます。
カスタム要素とIFrameアプリケーションは、異なるホスト、異なる描画、そしてLiferayサービスとランタイムデータへの異なるレベルのアクセスを持っています。
カスタム要素 タイプは、Liferay プラットフォームとの統合を強化し、より複雑なシナリオをサポートします。
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 アプリケーションに対して ‘同一オリジン ポリシーを適用します。 [window.postMessage()] メソッドを使用して、IFrame とホスト ページ間の通信を確立することはできますが、これを効果的に使用して潜在的なセキュリティ リスクを回避するには、その動作を 理解する 必要があります。 この方法を適切に適用する方法の例については、 このサンプル リポジトリ を参照してください。
Liferay 7.3 における IFrame 通信
Liferay 7.3 では、セキュリティ上の脆弱性が生じるため、IFrame アプリケーションとそのホスト ページ間の通信はデフォルトで無効になっています。 このメカニズムを引き続き使用したい場合は、 システム設定で有効にします。
-
アプリケーション () → コントロール パネル → システム設定 → インフラストラクチャに移動します。
-
画面左側のメニューから リモート アプリ構成 をクリックします。
-
「Post メッセージ ハンドラーを有効にする」 チェックボックスをオンにします。
-
[保存]をクリックします。
カスタム要素タイプの使用
カスタム要素のクライアント拡張タイプは、外部アプリケーションコードを個別の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回だけ含めます。