ユニバーサルエディター（WYSIWYG）での AEM Forms の Edge Delivery Services の基本を学ぶ

AEM プロジェクトの GitHub リポジトリを作成します。 リポジトリを作成するには：

1. https://github.com/adobe-rnd/aem-boilerplate-forms に移動します。

   

2. 「このテンプレートを使用」オプションをクリックし、「新しいリポジトリを作成」オプションを選択します。

   

   新しいリポジトリを作成 ​画面が開きます。

3. 新しいリポジトリを作成 ​画面で、所有者 ​を選択し、リポジトリ名 ​を指定します。アドビでは、リポジトリを​ パブリック ​に設定することをお勧めします。したがって、「パブリック」オプションを選択し、「リポジトリを作成」をクリックします。

   

AEM Code Sync GitHub アプリをリポジトリにインストールします。 インストールするには：

1. https://github.com/apps/aem-code-sync/installations/new に移動します。
2. AEM Code Sync をインストール ​画面で、「リポジトリのみを選択」オプションを選択し、新しく作成したリポジトリを選択します。「保存」をクリックします。

次に、AEM Forms ボイラープレートを使用して作成した GitHub リポジトリを AEM プロジェクトオーサリング環境にリンクします。接続する手順は、次のとおりです。

1. AEM Forms ボイラープレートを使用して以前に作成した GitHub リポジトリに移動します。

2. fstab.yaml ファイルを編集用に開きます。

   

3. fstab.yaml ファイルを編集して、プロジェクトのマウントポイントを更新します。URL を AEM as a Cloud Service オーサリングインスタンスの URL に置き換えます。
   https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main

   

4. 参照を更新し、すべてが正しく表示されたら、更新された fstab.yaml ファイルをコミットします。

   

   ビルドの問題が発生した場合は、GitHub ビルド問題のトラブルシューティングを参照してください。

新しい AEM プロジェクトを作成するには：

1. AEM as a Cloud Service オーサリングインスタンスにログインし、「Sites」を選択します。

   

2. 作成／テンプレートからサイト ​をクリックします。

   

3. Edge Delivery Services サイトテンプレートを選択し、「次へ」をクリックします。

   

   note note
   NOTE
   オーサリングインスタンスで Edge Delivery Services サイトテンプレートが使用できない場合は、「読み込み」ボタンをクリックしてテンプレートをアップロードします。 Edge Delivery Services サイトテンプレートは、GitHub からダウンロードできます。

4. 新しい AEM プロジェクトを作成するには、次の詳細を入力します。

   • サイトのタイトル - サイトを説明するタイトルを追加します。
   • サイトのタイトル - 前の手順で定義した site-name を使用します。
   • GitHub URL - 前の手順で作成した GitHub プロジェクトの URL を使用します。

   

5. サイトを作成 ​ダイアログが表示されたら、「OK」をクリックします。

   

   わずか数分で、新しい AEM プロジェクトが作成されます。

6. Sites コンソールで新しく作成した AEM プロジェクトに移動し、「編集」をクリックします。
   この場合、説明のために index.html ページを使用しています。

   

   AEM プロジェクトがユニバーサルエディターの新しいタブで開き、WYSIWYG オーサリングが可能になります。これで、AEM プロジェクトを編集できます。

   

作成した AEM プロジェクトの公開

AEM プロジェクトの編集が完了したら、プロジェクトを公開します。公開するには：

1. Sites コンソールで、すべての AEM プロジェクトページを選択し、「クイック公開」をクリックします。

   

2. クイック公開 ​確認ダイアログが表示されたら、「公開」をクリックして公開プロセスを開始します。

   

   または、ユニバーサルエディターのユーザーインターフェイスから AEM プロジェクトページを直接公開することもできます。

   

これで完了です。 https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/ で新しい web サイトを実行しています。

• <branch> は、GitHub リポジトリのブランチを指します。
• <repository> は GitHub リポジトリを示します。
• <owner> は、GitHub リポジトリをホストする GitHub アカウントのユーザー名を指します。
• <site-name> は、作成したサイト名の名前を指します。

例えば、分岐名が main、リポジトリが edsforms、所有者が wkndforms、site-name が eds-forms の場合、web サイトは https://main--edsforms--wkndforms.aem.page/content/eds-forms/ で稼動しています。

必要なファイルとフォルダーを追加

1. 次のフォルダーとファイルを AEM Forms ボイラープレートから AEM プロジェクトにコピー＆ペーストします。

   • フォームブロックフォルダー
   • form-common フォルダー
   • form-components フォルダー
   • form-editor-support.js ファイル
   • form-editor-support.css ファイル

コンポーネント定義とモデルファイルを更新

1. AEM プロジェクト内の ../models/_component-definition.json ファイルに移動し、AEM Forms ボイラープレート内の _component-definition.json ファイルからの変更を使用して更新します。

2. AEM プロジェクト内の ../models/_component-models.json ファイルに移動し、AEM Forms ボイラープレート内の _component-models.json ファイルからの変更を使用して更新します。

エディタースクリプトにフォームエディターを追加

1. AEM プロジェクト内の ../scripts/editor-support.js ファイルに移動し、AEM Forms ボイラープレート内の editor-support.js file ファイルからの変更を使用して更新します。

ESLint 設定ファイルを更新

1. AEM プロジェクトの ../.eslintignore ファイルに移動し、次のコード行を追加して、フォームブロックルールエンジンに関連するエラーを防ぎます。

   code language-none
   blocks/form/rules/formula/* blocks/form/rules/model/*

これらの変更を GitHub 上の AEM プロジェクトリポジトリにコミットしてプッシュします。

AEM プロジェクトページに「アダプティブフォーム」セクションを追加します。追加するには：

1. Sites コンソールで AEM プロジェクトに移動し、編集するサイトページを選択して、「編集」をクリックします。編集用にユニバーサルエディターで AEM プロジェクトページが開きます。
   この場合、説明のために index.html ページを使用しています。
2. コンテンツツリーを開き、「アダプティブフォーム」セクションを追加するセクションに移動します。
3. 「追加」アイコンをクリックし、コンポーネントリストから​ アダプティブフォーム ​コンポーネントを選択します。

「アダプティブフォーム」セクションが追加されます。これで、AEM プロジェクトページへのフォームコンポーネントの追加を開始できます。

追加した「アダプティブフォーム」セクションにフォームコンポーネントを追加します。フォームコンポーネントを追加するには：

1. コンテンツツリーで、追加した「アダプティブフォーム」セクションに移動します。

   

2. 「追加」アイコンをクリックし、アダプティブフォームコンポーネント ​リストから目的のコンポーネントを追加します。

   

   また、ユニバーサルエディターには直感的なドラッグ＆ドロップ機能が用意されているので、必要なアダプティブフォームコンポーネントをドラッグ＆ドロップすることもできます。

3. 追加したアダプティブフォームコンポーネントを選択し、プロパティ ​を使用して、そのプロパティを更新します。

   

4. フォームをプレビューします。
   以下のスクリーンショットは、WYSIWYG オーサリングを使用して AEM プロジェクトで作成されたフォームを示しています。

   

   プレビューが完了したら、ユーザーはページの公開に進むことができます。

   note note
   NOTE
   変更を行った後は、AEM プロジェクトページを再度公開することが重要です。そうしないと、更新がブラウザーに表示されません。

AEM プロジェクトページを再公開します。

1. フォームを追加した後、「公開」をクリックして AEM プロジェクトページを再度公開します。

   

2. 画面に​ 公開 ​確認ダイアログが表示されたら、「公開」をクリックして公開を開始します。

   

   「公開」ボタンをクリックすると、Publish started successfully メッセージが表示されます。

   

これで、次の URL で Edge Delivery Services フォームが追加された AEM プロジェクトページを表示できます。
https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/。

例えば、分岐名が main、リポジトリが edsforms、所有者が wkndforms、サイト名が eds-forms の場合、URL は次のようになります。
https://main--edsforms--wkndforms.aem.page/content/eds-forms/

AEM CLI をインストールします。AEM CLI により、開発タスクが簡素化されます。npm を使用してグローバルにインストールしましょう。

    npm install -g @adobe/aem-cli

GitHub プロジェクトのクローンを作成します。次のコマンドを使用して、GitHub から AEM プロジェクトリポジトリのクローンを作成します。 リポジトリの所有者と リポジトリ名を置き換えます。

git clone https://github.com/<owner>/<repo>

ローカル環境を起動します。プロジェクトディレクトリに移動し、次の 1 つのコマンドでローカル AEM インスタンスを起動します。

cd <repo>
aem up