ドキュメントAEM as a Cloud Serviceユーザーガイド

Edge Delivery Services を使用したアダプティブフォームの作成と公開

Last update: Thu Aug 28 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用対象：
  • Experience Manager as a Cloud Service

作成対象：

  • 初心者
  • ユーザー
  • 開発者

このドキュメントでは、AEMのEdge Delivery Services テンプレートを使用して、アダプティブFormsを作成、設定および公開する手順を順を追って説明します。 フォームの作成から実稼動デプロイメントまでの完全なワークフローについて説明します。

このガイドを最後まで読むと、以下の操作方法について学ぶことができます。

  • Edge Delivery Services テンプレートを使用したフォームの作成
  • ユニバーサルエディターを使用したフォームの作成
  • フォームの設定と Edge Delivery Services への公開
  • 公開済みフォームへのアクセスとデプロイメントの検証

前提条件

続行する前に、次の前提条件が満たされていることを確認します。

  • AEM Forms as a Cloud Service：Forms ライセンスを持つアクティブなオーサーインスタンス。

  • GitHub アカウント：リポジトリ管理のための個人用または組織用のアカウント。

  • リポジトリ設定：次のいずれかを選択します。

  • AEM と GitHub の接続：AEM インスタンスと GitHub リポジトリ間の接続を確立します。

  • Edge Delivery Services：リポジトリが自動デプロイメント用に設定されていることを確認します。

  • 権限：フォームの作成と公開に必要なアクセス権があることを確認します。

  • GitHub リポジトリにアダプティブフォームブロックが含まれていることを確認します。

フォームの作成と公開のワークフロー

このプロセスは、次の 3 つの主なフェーズで構成されます。

各フェーズには、正しい設定を確認するための検証手順が含まれます。

手順 1：フォームの作成

  1. フォームの作成にアクセス

    • AEM Forms as a Cloud Service オーサーインスタンスにログインします。
    • Adobe Experience Manager／Forms／フォームとドキュメント ​に移動します。
    • 作成／アダプティブフォーム ​の順にクリックします。

  2. テンプレートを選択

    • 「ソース」タブで、Edge Delivery Services ベースのテンプレート ​を選択します。

    • 「作成」ボタンが有効になります。

      EDS フォームを作成

  3. オプションを設定（オプション）

    • 「データソース」タブ：必要に応じて、データ統合を選択します。
    • 「送信」タブ：送信アクションを選択します（後で設定できます）。
    • 「配信」タブ：公開／非公開のスケジュールを設定します。

  4. フォーム設定を完了

    • 「作成」をクリックして、フォームの作成ウィザードを開きます。

    • 以下を入力します。

      • 名前：内部識別子（スペースなし、ハイフン使用）。
      • タイトル：フォームの表示名。
      • GitHub URL：リポジトリ URL（例：https://github.com/your-org/your-repo）。

    フォームを作成ウィザード

  5. 検証

    • 「作成」をクリックしたら、次を検証します。

      • ユニバーサルエディターでフォームが開く。
      • GitHub の URL が正しくリンクされている。
      • コンポーネントパレットが使用できる。
      • フォームキャンバスが表示される。

    ユニバーサルエディターのインターフェイス

結果：ユニバーサルエディターでフォームをオーサリングする準備が整いました。

手順 2：フォームのオーサリングとデザイン

  1. コンポーネントライブラリへのアクセス

    • ユニバーサルエディターでコンテンツブラウザーを開きます。
    • コンテンツツリーで、アダプティブフォーム ​コンポーネントに移動します。

    コンテンツツリーのナビゲーション

  2. フォームフィールドを追加

    • 追加 ​アイコンをクリックして、コンポーネントライブラリを開きます。
    • アダプティブフォームコンポーネント ​リストからコンポーネントを追加します。
    • コンポーネントをフォームキャンバスにドラッグ＆ドロップします。

    コンポーネントを追加

  3. フォームをデザイン

    • プロパティパネルでフィールドのプロパティを設定します。
    • 検証ルールと動作を設定します。
    • 必要に応じて、スタイル設定とレイアウトを調整します。

    完了した登録フォーム

検証

  • すべての必須フィールドが存在する。
  • フィールドプロパティが正しく設定されている。
  • レイアウトはレスポンシブでアクセス可能である。
  • 検証ルールが期待どおりに機能する。

次の手順

手順 3：設定と公開

Edge Delivery Servicesを設定してフォームを公開します。

設定： ​自動（手動設定は不要）。

  • フォームの作成中に、GitHub リポジトリ接続と Edge Delivery Services 設定が作成されます。
  • 公開エンドポイントは自動的に設定されます。

検証：

  • フォームの設定に設定が表示されていることを確認します。
  • GitHub URL が正しくリンクされていることを確認します。

自動 EDS 設定

フォームの公開

  1. ユニバーサルエディターで、「公開」ボタン（右上隅）をクリックします。

  2. ダイアログで公開の成功を確認します。

  3. ステージング済みバージョンとライブバージョン用に生成された URL に注意してください。

    ユニバーサルエディターの公開

フォーム URL

公開したフォームには、Edge Delivery Services の URL を通じてアクセスできます。

URL 構造

  • ステージング済み（プレビュー／テスト）：

    code language-none 
    https://<branch>--<repo>--<owner>.aem.page/content/forms/af/<form_name>

  • ライブ（実稼動）：

    code language-none 
    https://<branch>--<repo>--<owner>.aem.live/content/forms/af/<form_name>

URL パラメーター

  • <branch>：GitHub 分岐名（例：main、develop）
  • <repo>：GitHub リポジトリ名（例：my-forms-project）
  • <owner>：GitHub 組織またはユーザー名（例：company-name）
  • <form_name>：AEM で定義されたフォーム識別子（例：contact-us）

例

組織 acme-corp の下にあるリポジトリ forms-project のフォーム contact-us の例：

  • ステージング済み：  https://main--forms-project--acme-corp.aem.page/content/forms/af/contact-us
  • ライブ：  https://main--forms-project--acme-corp.aem.live/content/forms/af/contact-us

環境の違い

  • ステージング済み（.page）： ​テストの最新の変更。
  • ライブ（.live）： ​実稼動用に公開されたコンテンツ。

URL 構造
Edge Delivery Services フォーム URL 構造の分類

視覚的な例

Edge Delivery Services テンプレート：

  • ステージング済み： 登録フォームのステージング済みバージョン
  • ライブ： 登録フォームのライブバージョン

トラブルシューティング

Edge Delivery Services を使用した AEM Forms の一般的な問題と解決策を以下に示します。

フォームが読み込まれない

問題： ​フォーム URL が 404 または空白のページを返す。

解決策：

  • URL から .html 拡張子を削除します。
  • フォームが公開されていることを検証します。
  • アダプティブフォームブロックの GitHub リポジトリを確認します。
  • フォーム名が URL と一致することを確認します（大文字と小文字を区別）。
設定の問題

問題： Edge Delivery Services の設定が機能しない。

解決策：

  • GitHub の URL が https://github.com/owner/repository の形式であることを確認します。
  • 設定で正しい分岐名を使用します。
  • リポジトリへのアクセスを検証します（パブリックまたは認証済み）。
  • 正しい GitHub の詳細については、fstab.yaml を確認します。
公開の問題

問題： ​変更がライブサイトに表示されない。

解決策：

  • CDN キャッシュが更新されるまで 2～3 分待機します。
  • 公開ワークフローが完了したことを確認します。
  • まず、ステージング済みの（.page）環境でテストします。
  • GitHub リポジトリが更新されていることを確認します。
ユニバーサルエディターの問題

問題： フォームを編集できないか、コンポーネントが読み込まれない。

解決策：

  • サポートされているブラウザー（Chrome、Firefox、Safari）を使用します。
  • ブラウザーのキャッシュと Cookie を消去します。
  • ネットワーク接続を検証します。
  • 作成者の権限を確認します。
フォーム送信エラー

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

解決策：

  • フォームプロパティで送信アクションを設定します。
  • 送信エンドポイントを手動でテストします。
  • フォームを埋め込む場合は、CORS 設定を確認します。
  • 必須フィールドが設定されていることを確認します。
パフォーマンスの問題

問題： ​フォームの読み込みが遅いか、パフォーマンスが低い。

解決策：

  • 画像を最適化します。
  • 不要なコンポーネントを削除します。
  • Edge Delivery Services CDN を活用します。
  • カスタム JavaScript／CSS を最小限に抑えます。
ヘルプの表示

問題が解決しない場合：

  1. Adobe Experience Cloud サービスのステータスを確認してください。
  2. Edge Delivery Services ドキュメントを確認してください。
  3. Adobe Experience League コミュニティにアクセスしてください。
  4. アドビカスタマーケアにお問い合わせください。

次の手順

フォームの作成と公開を完了したら、次を考慮します。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab