アダプティブフォームのコアコンポーネントの有効化 enable-headless-adaptive-forms-on-aem-forms-cloud-service
AEM Forms as a Cloud Service のアダプティブフォームのコアコンポーネントを有効にすると、AEM Forms Cloud Service インスタンスを使用して、複数のチャネルへのコアコンポーネントベースのアダプティブフォームとヘッドレスフォームの作成、公開、配信を開始できます。ヘッドレスアダプティブフォームを使用するには、アダプティブフォームコアコンポーネントが有効な環境が必要です。
検討事項
-
新しい AEM Forms as a Cloud Service プログラムを作成すると、アダプティブフォームコアコンポーネントとヘッドレスアダプティブフォームが、お使いの環境で既に有効になっています。
-
古い Forms as a Cloud Service プログラム(コアコンポーネントが有効になっていない)がある場合は、アダプティブフォームコアコンポーネントの依存関係を追加し、そのリポジトリを Cloud Service 環境にデプロイしてヘッドレスアダプティブフォームを有効にすることができます。
-
既存の Cloud Service 環境にコアコンポーネントベースのアダプティブフォームを作成するオプションがある場合、アダプティブフォームのコアコンポーネントとヘッドレスアダプティブフォームはお使いの環境で既に有効になっています。また、コアコンポーネントベースのアダプティブフォームを、アダプティブフォームのヘッドレス表現を必要とするチャネル(モバイル、web、ネイティブアプリ、サービスなど)に、ヘッドレスフォームとして提供できます。
アダプティブフォームコアコンポーネントとヘッドレスアダプティブフォームを有効にする enable-headless-forms
AEM Forms as a Cloud Service 環境でアダプティブフォームコアコンポーネントとヘッドレスアダプティブフォームを有効にするには、以下の手順をリスト順に実行します。
1. AEM Forms as a Cloud Service Git リポジトリを複製 clone-git-repository
-
Cloud Manager にログインし、組織とプログラムを選択します。
-
プログラムの概要 ページから パイプライン カードに移動し、「リポジトリ情報にアクセス」ボタンをクリックして、Git リポジトリにアクセスして管理します。このページには以下の情報が含まれます。
- Cloud Manager Git リポジトリへの URL。
- Git リポジトリの資格情報(ユーザー名とパスワード)Git ユーザー名。
「パスワードを生成」をクリックして、パスワードを表示または生成します。
-
ローカルコンピューターでターミナルまたはコマンドプロンプトを開いて、次のコマンドを実行します。
code language-shell git clone [Git Repository URL]
プロンプトが表示されたら、資格情報を入力します。リポジトリがローカルコンピューターに複製されます。
2. Git リポジトリにアダプティブフォームコアコンポーネントの依存関係を追加 add-adaptive-forms-core-components-dependencies
-
プレーンテキストコードエディターで Git リポジトリフォルダーを開きます。例:VS Code。
-
[AEM Repository Folder]\pom.xml
ファイルを編集用に開きます。 -
core.forms.components.version
、core.forms.components.af.version
およびcore.wcm.components.version
コンポーネントのバージョンを、コアコンポーネントのドキュメントで指定されているバージョンに置き換えます。コンポーネントが存在しない場合は、これらのコンポーネントを追加します。code language-xml <!-- Replace the version with the latest released version at https://github.com/adobe/aem-core-forms-components/tags --> <properties> <core.wcm.components.version>2.22.10</core.wcm.components.version> <core.forms.components.version>2.0.18</core.forms.components.version> <core.forms.components.af.version>2.0.18</core.forms.components.af.version> </properties>
-
[AEM Repository Folder]\pom.xml
ファイルの依存関係セクションに次の依存関係を追加し、ファイルを保存します。code language-xml <!-- WCM Core Component Examples Dependencies --> <dependency> <groupId>com.adobe.cq</groupId> <artifactId>core.wcm.components.examples.ui.apps</artifactId> <type>zip</type> <version>${core.wcm.components.version}</version> </dependency> <dependency> <groupId>com.adobe.cq</groupId> <artifactId>core.wcm.components.examples.ui.content</artifactId> <type>zip</type> <version>${core.wcm.components.version}</version> </dependency> <dependency> <groupId>com.adobe.cq</groupId> <artifactId>core.wcm.components.examples.ui.config</artifactId> <version>${core.wcm.components.version}</version> <type>zip</type> </dependency> <!-- End of WCM Core Component Examples Dependencies --> <!-- Forms Core Component Dependencies --> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-core</artifactId> <version>${core.forms.components.version}</version> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-apps</artifactId> <version>${core.forms.components.version}</version> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-core</artifactId> <version>${core.forms.components.version}</version> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-apps</artifactId> <version>${core.forms.components.version}</version> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-examples-apps</artifactId> <type>zip</type> <version>${core.forms.components.version}</version> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-examples-content</artifactId> <type>zip</type> <version>${core.forms.components.version}</version> </dependency> <!-- End of AEM Forms Core Component Dependencies -->
-
[AEM Repository Folder]/all/pom.xml
ファイルを編集用として開きます。次の依存関係を<embeddeds>
セクションに追加し、ファイルを保存します。code language-xml <!-- WCM Core Component Examples Dependencies --> <!-- inside plugin config of filevault-package-maven-plugin --> <!-- embed wcm core components examples artifacts --> <embedded> <groupId>com.adobe.cq</groupId> <artifactId>core.wcm.components.examples.ui.apps</artifactId> <type>zip</type> <target>/apps/${appId}-vendor-packages/content/install</target> </embedded> <embedded> <groupId>com.adobe.cq</groupId> <artifactId>core.wcm.components.examples.ui.content</artifactId> <type>zip</type> <target>/apps/${appId}-vendor-packages/content/install</target> </embedded> <embedded> <groupId>com.adobe.cq</groupId> <artifactId>core.wcm.components.examples.ui.config</artifactId> <type>zip</type> <target>/apps/${appId}-vendor-packages/content/install</target> </embedded> <!-- embed forms core components artifacts --> <embedded> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-apps</artifactId> <type>zip</type> <target>/apps/${appId}-vendor-packages/application/install</target> </embedded> <embedded> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-core</artifactId> <target>/apps/${appId}-vendor-packages/application/install</target> </embedded> <embedded> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-examples-apps</artifactId> <type>zip</type> <target>/apps/${appId}-vendor-packages/content/install</target> </embedded> <embedded> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-examples-content</artifactId> <type>zip</type> <target>/apps/${appId}-vendor-packages/content/install</target> </embedded>
note note NOTE ${appId}
を appId に置き換えます。${appId}
を見つけるには、[AEM Repository Folder]/all/pom.xml
ファイル内で-packages/application/install
用語を検索します。-packages/application/install
用語の前のテキストが${appId}
です。例えば、次のコードはmyheadlessform
が${appId}
です。code language-none com.myheadlessform myheadlessform.ui.apps zip /apps/myheadlessform-packages/application install
-
[AEM Repository Folder]/all/pom.xml
ファイルの<dependencies>
セクションに、次の依存関係を追加し、ファイルを保存します。code language-xml <!-- Other existing dependencies --> <!-- wcm core components examples dependencies --> <dependency> <groupId>com.adobe.cq</groupId> <artifactId>core.wcm.components.examples.ui.apps</artifactId> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.cq</groupId> <artifactId>core.wcm.components.examples.ui.config</artifactId> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.cq</groupId> <artifactId>core.wcm.components.examples.ui.content</artifactId> <type>zip</type> </dependency> <!-- forms core components dependencies --> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-apps</artifactId> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-examples-apps</artifactId> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-examples-content</artifactId> <type>zip</type> </dependency>
-
[AEM Repository Folder]/ui.apps/pom.xml
を開いて編集します。af-core bundle
依存関係を追加し、ファイルを保存します。code language-xml <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-core</artifactId> </dependency>
note note NOTE 次のアダプティブフォームのコアコンポーネントアーティファクトがプロジェクトに含まれていないことを確認します。 <dependency>
<groupId>com.adobe.aem</groupId>
<artifactId>core-forms-components-apps</artifactId>
</dependency>
および <dependency>
<groupId>com.adobe.aem</groupId>
<artifactId>core-forms-components-core</artifactId>
</dependency>
-
ファイルを保存して閉じます。
3. 更新したコードをビルドしてデプロイ
更新したコードをローカルの開発環境と Cloud Service 環境にデプロイして、両方の環境でコアコンポーネントを有効にします。
更新したコードをローカル開発環境にビルドしてデプロイ core-components-on-aem-forms-local-sdk
-
コマンドプロンプトまたはターミナルを開きます。
-
Git リポジトリプロジェクトのルートディレクトリに移動します。
-
次のコマンドを実行して、環境用のパッケージをビルドします。
code language-shell mvn clean install
パッケージが正常にビルドされたら、[Git リポジトリフォルダー(]\all\target[appid].all-[version].zip)で見つけることができます。
-
パッケージマネージャーを使用して、[AEM アーキタイププロジェクトフォルダー(]\all\target[appid].all-[version].zip)パッケージをローカル開発環境にデプロイします。
AEM Forms as a Cloud Service 環境で更新したコードをビルドしてデプロイ core-components-on-aem-forms-cs
-
ターミナルまたはコマンドプロンプトを開きます。
-
[AEM Repository Folder]
に移動し、次のコマンドをリスト順に実行します。code language-shell git add pom.xml git add all/pom.xml git add ui.apps/pom.xml git commit -m "Added dependencies for Adaptive Forms Core Components" git push origin
-
ファイルが Git リポジトリにコミットされた後、パイプラインを実行します。
パイプラインが正常に実行されると、対応する環境でアダプティブフォームのコアコンポーネントが有効になります。また、アダプティブフォーム(コアコンポーネント)テンプレートと Canvas 3.0 テーマが、Forms as a Cloud Service 環境に追加され、コアコンポーネントベースのアダプティブフォームをカスタマイズして作成するオプションが提供されます。
よくある質問 faq
コアコンポーネントとは core-components
コアコンポーネントは、AEM で web サイトの開発時間を短縮しメンテナンスコストを削減するための、標準化された web コンテンツ管理(WCM)コンポーネントのセットです。
コアコンポーネントの有効化に関しては、どのような機能が追加されますか? core-components-capabilities
お使いの環境でアダプティブフォームのコアコンポーネントを有効にすると、空白のコアコンポーネントベースのアダプティブフォームテンプレートと Canvas 3.0 テーマが環境に追加されます。お使いの環境でアダプティブフォームのコアコンポーネントを有効にすると、次の操作を実行できます。
アダプティブフォームのコアコンポーネントは、自分の環境で有効になっていますか? enable-components
お使いの環境でアダプティブフォームのコアコンポーネントが有効になっていることを確認するには:
-
AEM Forms Cloud Service Git リポジトリの
[AEM Repository Folder]/all/pom.xml
ファイルを開きます。 -
次の依存関係を検索します。
- core-forms-components-af-core
- core-forms-components-core
- core-forms-components-apps
- core-forms-components-af-apps
- core-forms-components-examples-apps
- core-forms-components-examples-content
依存関係が存在する場合、お使いの環境でアダプティブフォームのコアコンポーネントが有効になります。