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

1. AEM Forms ボイラープレートテンプレートにアクセス

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

   
   図：事前設定済みのアダプティブフォームブロックを使用した AEM Forms ボイラープレートリポジトリ

2. リポジトリを作成

   • このテンプレートを使用／新規リポジトリを作成 ​をクリックします

   
   図：テンプレートを使用した新規リポジトリの作成

3. リポジトリ設定を指定

   • 所有者：GitHub アカウントまたは組織を選択します
   • リポジトリ名：わかりやすい名前（例：my-forms-project）を選択します
   • 表示：「パブリック」（Edge Delivery Services の場合に推奨）を選択します
   • 「リポジトリを作成」をクリックします

   
   図：パブリック表示を使用した新規リポジトリの設定

検証： AEM Forms ボイラープレートテンプレートに基づく新規 GitHub リポジトリがあることを確認します。

AEM コード同期は、AEM オーサリング環境と GitHub リポジトリ間でコンテンツの変更を自動的に同期します。

1. GitHub アプリをインストール

   • https://github.com/apps/aem-code-sync/installations/new に移動します

2. アクセス権限を設定

   • 「選択したリポジトリのみ」を選択します
   • 新しく作成したリポジトリを選択します
   • 「保存」をクリックします。

   
   図：リポジトリ固有の権限を持つ AEM コード同期のインストール

チェックポイント： AEM コード同期がインストールされ、リポジトリにアクセスできるようになりました。

fstab.yaml ファイルは、GitHub リポジトリを AEM オーサリング環境に接続し、コンテンツを同期します。

1. リポジトリに移動

   • 新しく作成した GitHub リポジトリに移動します
   • AEM Forms ボイラープレートファイルが表示されます

2. fstab.yaml ファイルを作成

   • ルートディレクトリで​ ファイルを追加／新規ファイルを作成 ​をクリックします
   • ファイル名を fstab.yaml にします

   
   図：fstab.yaml 設定ファイルの作成

3. AEM 接続の詳細を追加

   次の設定をコピー＆ペーストして、プレースホルダーを置き換えます。

   code language-yaml
   mountpoints: /: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main

   置換：

   • <aem-author>：AEM as a Cloud Service オーサー URL（例：author-p12345-e67890.adobeaemcloud.com）
   • <owner>：GitHub ユーザー名または組織
   • <repository>：自分のリポジトリ名

   例：

   code language-yaml
   mountpoints: /: https://author-p12345-e67890.adobeaemcloud.com/bin/franklin.delivery/mycompany/my-forms-project/main

   
   図：AEM 統合用のマウントポイントの設定

4. 設定をコミット

   • 「AEM 統合設定を追加」コミットメッセージを追加します
   • 「新規ファイルをコミット」をクリックします

   
   図：fstab.yaml 設定のコミット

検証： AEM への GitHub リポジトリ接続を確認します。

<div class="extension メモ">
<div>メモ</div>
<div>
<p>ビルドに問題がありますか？ <a href="#troubleshooting-github-build-issues">GitHub ビルドの問題のトラブルシューティング</a>を参照してください。</p>
</div>
</div>

1. AEM Sites コンソールにアクセス

   • AEM as a Cloud Service オーサリングインスタンスにログインします
   • Sites に移動します

   
   図：AEM Sites コンソールへのアクセス

2. サイトの作成を開始

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

   
   図：テンプレートからの新しいサイトの作成

3. Edge Delivery Services テンプレートを選択

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

   
   図：Edge Delivery Services サイトテンプレートの選択

   note note
   NOTE
   テンプレートが使用できませんか？ Edge Delivery Services テンプレートが表示されない場合は、次の手順に従います。
   「読み込み」をクリックして、テンプレートをアップロードします GitHub リリースからテンプレートをダウンロードします

4. サイトを設定

   次の情報を入力します。

   table 0-row-3 1-row-3 2-row-3 3-row-3
   フィールド	値	例
   サイトのタイトル	サイトのわかりやすい名前	「マイ Forms プロジェクト」
   サイト名	URL のわかりやすい名前	「my-forms-project」
   GitHub URL	自分のリポジトリ URL	https://github.com/mycompany/my-forms-project

   
   図：GitHub 統合を使用した新しい AEM サイトの設定

5. サイト作成を完了

   • 設定をレビューします
   • 「作成」をクリックします。

   
   図：サイト作成の確認

   成功です。 AEM サイトが作成され、GitHub に接続されました。

6. ユニバーサルエディターで開く

   • Sites コンソールで、新しいサイトを見つけます
   • index ページを選択します。
   • 「編集」をクリックします

   
   図：編集用にサイトを開く

   ユニバーサルエディターが新しいタブで開き、WYSIWYG オーサリング機能が表示されます。

   
   図：WYSIWYG 編集用にユニバーサルエディターで開いたサイト

検証： AEM サイトでフォームオーサリングの準備が整ったことを確認します。

公開すると、サイトがグローバルアクセス用の Edge Delivery Services で使用できます。

1. Sites コンソールからクイック公開

   • AEM Sites コンソールに戻ります
   • サイトページを選択します（または Ctrl+A キーですべて選択します）
   • 「クイック公開」をクリックします

   
   図：クイック公開用のページの選択

2. 公開を確認

   • 確認ダイアログで「公開」をクリックします

   
   図：公開アクションの確認

   代替：「公開」ボタンを使用して、ユニバーサルエディターから直接公開することもできます。

   
   図：ユニバーサルエディターからの直接公開

3. ライブサイトにアクセス

   現在、サイトは次の場所で運用されています。

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   URL 構造の説明：

   • <branch>：GitHub 分岐（通常は main）
   • <repo>：自分のリポジトリ名
   • <owner>：GitHub ユーザー名または組織
   • <site-name>：自分の AEM サイト名

   例：

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

検証： ​サイトが Edge Delivery Services で運用されていることを確認します。

次へ：最初のフォームの作成

1. ローカルプロジェクトに移動

   code language-bash
   cd /path/to/your/aem-project

2. AEM Forms ボイラープレートから必要なファイルをダウンロード

   これらのファイルを AEM Forms ボイラープレートリポジトリからコピーします。

   table 0-row-3 1-row-3 2-row-3 3-row-3
   ソース	宛先	目的
   blocks/form/	blocks/form/	コアフォーム機能
   scripts/form-editor-support.js	scripts/form-editor-support.js	ユニバーサルエディターの統合
   scripts/form-editor-support.css	scripts/form-editor-support.css	エディターのスタイル設定

3. エディターのサポートを更新

   • /scripts/editor-support.js ファイルを AEM Forms ボイラープレートの editor-support.js に置き換えます

検証： ​フォームブロックファイルがプロジェクト内にあることを確認します。

1. セクションモデルを更新

   /models/_section.json を開き、フィルターにフォームコンポーネントを追加します。

   code language-json
   { "filters": [ { "id": "section", "components": [ "text", "image", "button", "form", "embed-adaptive-form" ] } ] }

   この処理の内容： ​ユニバーサルエディターのコンポーネントピッカーでフォームコンポーネントを有効にします。

検証： ​フォームコンポーネントがユニバーサルエディターに表示されることを確認します。

この手順の理由： ​フォーム固有のファイルからのリンティングエラーを防ぎ、適切な検証ルールを設定します。

1. .eslintignore を更新

   /.eslintignore に次の行を追加します。

   code language-bash
   # Form block rule engine files blocks/form/rules/formula/* blocks/form/rules/model/* blocks/form/rules/functions.js scripts/editor-support.js scripts/editor-support-rte.js

2. .eslintrc.js を更新

   /.eslintrc.js の rules オブジェクトに次のルールを追加します。

   code language-javascript

   { "rules": { // Existing rules... // Form component cell limits 'xwalk/max-cells': ['error', { '*': 4, // default limit form: 15, wizard: 12, 'form-button': 7, 'checkbox-group': 20, checkbox: 19, 'date-input': 21, 'drop-down': 19, email: 22, 'file-input': 20, 'form-fragment': 15, 'form-image': 7, 'multiline-input': 23, 'number-input': 22, panel: 17, 'radio-group': 20, 'form-reset-button': 7, 'form-submit-button': 7, 'telephone-input': 20, 'text-input': 23, accordion: 14, modal: 11, rating: 18, password: 20, tnc: 12 }], // Disable this rule for forms 'xwalk/no-orphan-collapsible-fields': 'off' } }

検証： ESLint がフォームコンポーネントで動作することを確認します。

1. 依存関係をインストールおよびビルド

   code language-bash
   # Install any new dependencies npm install # Build component definitions npm run build:json

   この処理の内容：

   • フォームコンポーネントを使用して component-definition.json を更新します
   • フォームモデルを使用して component-models.json を生成します
   • フィルタリングルールを使用して component-filters.json を作成します

2. 生成されたファイルを検証

   プロジェクトルート内の次のファイルにフォーム関連オブジェクトが含まれていることを確認します。

   • component-definition.json
   • component-models.json
   • component-filters.json

3. 変更のコミットとプッシュ

   code language-bash
   git add . git commit -m "Add Adaptive Forms Block integration" git push origin main

検証： ​フォームの機能がプロジェクトに含まれていることを確認します。

1. ユニバーサルエディターでページを開く

   • AEM の Sites コンソールに移動します
   • フォームを追加するページ（例：index）を選択します
   • 「編集」をクリックします

   WYSIWYG 編集用にユニバーサルエディターでページが開きます。

2. アダプティブフォームコンポーネントを追加

   • コンテンツツリー ​パネル（左側のサイドバー）を開きます
   • フォームを追加するセクションに移動します
   • 追加（+）アイコンをクリックします
   • コンポーネントリストから​ アダプティブフォーム ​を選択します

   
   図：ページへのアダプティブフォームブロックの追加

検証： 空のフォームコンテナがあることを確認します。

1. フォームブロックに移動

   • コンテンツツリーで、新しく追加したアダプティブフォームセクションを見つけます

   
   図：コンテンツツリーのアダプティブフォームブロック

2. フォームコンポーネントを追加

   コンポーネントを追加するには、次の 2 つの方法があります。

   方法 A：クリックして追加

   • フォームセクションの​ 追加（+）アイコンをクリックします
   • アダプティブフォームコンポーネント ​リストからコンポーネントを選択します

   方法 B：ドラッグ＆ドロップ

   • コンポーネントパネルからフォームに直接コンポーネントをドラッグします

   
   図：フォームへのコンポーネントの追加

   推奨されるスターターコンポーネント：

   • テキスト入力（名前、メール用）
   • テキスト領域（メッセージ用）
   • 送信ボタン

3. コンポーネントのプロパティを設定

   • 任意のフォームコンポーネントを選択します

   • プロパティ ​パネル（右側のサイドバー）を使用して、次を設定します。

     • ラベルとプレースホルダー
     • 検証ルール
     • 必須のフィールド設定

   
   図：コンポーネントのプロパティの設定

4. フォームをプレビュー

   フォームは次のようになります。

   
   図：ユニバーサルエディターで作成されたフォームの例

検証： ​フォームの公開準備が整っていることを確認します。

1. ユニバーサルエディターから公開

   • ユニバーサルエディターの「公開」ボタンをクリックします

   
   図：ユニバーサルエディターからのフォームの公開

2. 公開を確認

   • 確認ダイアログで「公開」をクリックします

   
   図：公開の確認アクション

   公開を確認する成功メッセージが表示されます。

   
   図：成功した公開の確認

3. ライブフォームを表示

   現在、フォームは次の場所で運用されています。

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   URL の例：

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

   
   図：Edge Delivery Services で公開されたフォームページ

おめでとうございます。 ​これで、フォームが運用され、送信を収集する準備が整いました。

1. AEM CLI をインストール

   AEM CLI は、ローカル開発タスクを簡素化します。

   code language-bash
   npm install -g @adobe/aem-cli

2. リポジトリを複製

   code language-bash
   git clone https://github.com/<owner>/<repo> cd <repo>

   <owner> と <repo> を実際の GitHub の詳細に置き換えます。

3. ローカル開発サーバーを起動

   code language-bash
   aem up

   これにより、ホットリロード機能を備えたローカル サーバーが起動します。

4. カスタマイズを実行

   • フォームのスタイルと動作については、blocks/form/ ディレクトリ内のファイルを編集します
   • スタイルについては、form.css を変更します
   • 動作については、form.js を更新します

   ブラウザーで http://localhost:3000 にアクセスして、変更をすぐに確認 ​します

5. 変更をデプロイ

   code language-bash
   git add . git commit -m "Custom form styling" git push origin main

   変更は、次の場所で確認できます。

   • プレビュー：  https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • 実稼動環境：  https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

問題： ​ビルドの失敗またはリンティングエラー

解決策 1：リンティングエラーを処理

リンティングエラーが発生した場合：

1. プロジェクトルートにある package.json を開きます

2. 次の lint スクリプトを見つけます。

   code language-json
   "scripts": { "lint": "npm run lint:js && npm run lint:css" }

3. 一時的に次のリンティングを無効にします。

   code language-json
   "scripts": { "lint": "echo 'skipping linting for now'" }

4. 変更をコミットしてプッシュします

解決策 2：モジュールパスエラー

「モジュール「/scripts/lib-franklin.js」へのパスを解決できません」と表示される場合：

1. blocks/form/form.js に移動します。

2. import 文を更新します。

   code language-javascript
   // Change this: import { ... } from '/scripts/lib-franklin.js'; // To this: import { ... } from '/scripts/aem.js';

問題： ​フォーム送信が機能しない

解決策：

• 送信ボタンコンポーネントがあることを確認します
• フォームアクションの URL 設定を確認します
• フォームの検証ルールを確認します
• 最初にプレビューモードでテストします

問題： スタイルの問題

解決策：

• blocks/form/ 内の CSS ファイルパスを確認します
• ブラウザーキャッシュを消去します
• CSS 構文を検証します
• ローカル開発環境でテストします

問題： ​ユニバーサルエディターにフォームコンポーネントが表示されない

解決策：

• AEM コード同期がインストールおよび実行されていることを検証します
• fstab.yaml に正しい AEM オーサー URL が含まれていることを確認します
• AEM インスタンスで早期アクセスが有効になっていることを確認します
• component-definition.json にフォームコンポーネントが含まれていることを確認します

問題： ​公開後に変更が表示されない

解決策：

• CDN キャッシュの更新を待機します
• ブラウザーキャッシュを確認します（匿名／プライベートモードを試します）
• 正しい URL 形式が使用されていることを検証します