カスタムアプリケーションのデプロイ

カスタム要素クライアント拡張 を使用して、JavaScript アプリケーションを Liferay サイトページ上のウィジェットとしてレンダリングできます。 アプリケーションは Liferay によって提供され、 ヘッドレス APIを介して Liferay と対話します。

liferay-ticket-custom-element クライアント拡張機能をデプロイします。

1. 次のコマンドを実行します。

   ./gradlew :client-extensions:liferay-ticket-custom-element:deploy
   

2. Liferayで、 製品メニュー （）を選択し、 サイトビルダー → ページに移動します。

3. 追加 () をクリックし、 ページを選択します。

4. 空白 タイプ ページを選択します。 ページに名前を付けます (例: チケットシステム)。 追加をクリックします。

5. 左側のナビゲーションのフラグメントとウィジェットの下で、 ウィジェット タブをクリックします。

6. クライアント拡張タイプのウィジェットまで下にスクロールします。 Liferay チケットカスタム要素 ウィジェットをページにドラッグします。

7. 公開をクリックします。

カスタム チケット システム アプリケーションがサイト ページで実行されるようになりました。

注意： 新しいチケットの生成 ボタンをクリックすると、追加のランダムなチケットエントリが生成されます。 コントロール パネル → チケットから独自のチケット オブジェクト エントリを作成することもできます。

カスタム要素コードを調べる

client-extension.yaml ファイルの assemble ブロック セクションは次のようになります。

assemble:
    - from: build/assets
      into: static

注意: JavaScript アプリケーションの .js および .css ビルド ファイルは、 build/assets フォルダーからコピーされ、デプロイ可能なクライアント拡張 .zip ファイルに配置されます。

この liferay-ticket-custom-element は カスタム要素 タイプのクライアント拡張です。 client-extension.yaml ファイルでは次のように定義されています。

liferay-ticket-custom-element:
   cssURLs:
      - "*.css"
   friendlyURLMapping: current-tickets-custom-element
   htmlElementName: current-tickets-custom-element
   instanceable: false
   name: Current Tickets Custom Element
   portletCategoryName: category.client-extensions
   type: customElement
   urls:
      - "*.js"
   useESM: true

各プロパティの説明については、 カスタム要素 YAML 構成リファレンス を参照してください。

アプリケーションに関連する JavaScript ファイルは、 /src フォルダーに含まれています。 JavaScript コードの詳細な説明はこのチュートリアルの範囲外ですが、いくつか注意すべき点があります。

• /src/pages/TicketApp.tsx ファイルは、チケットシステム ページの全体的なレイアウトを定義します。
• /src/services/tickets.ts ファイルでは、 データ スキーマ が定義されたときに作成された j3y7ticket オブジェクトを使用して、チケットが作成および取得されます。 /src/ticket.jsファイルのgenerateNewTicket()関数は、ランダムなフィールド・エントリーを持つ追加チケット・エントリーを生成することに注意してください。
• /src/services/tickets.ts ファイルでは、オブジェクトのヘッドレス API 呼び出しは Liferay.authToken オブジェクトによって承認されます。 このオブジェクトは、Web コンポーネントが Liferay 上で実行されているときに使用でき、OAuth2 認証を簡素化します。
• package.json ファイルには、JavaScript アプリケーションの初期化とビルドを処理する scripts{ build: } 要素が含まれています。

次へ: ドキュメント参照システムを実装する。

関連概念

• 基本的なカスタム要素の作成
• 外部アプリケーションの統合