AEM Edge Delivery ServicesのFormsの概要

これはプレリリース機能で、プレリリースチャネルを通してアクセスできます。

このガイドは、Adobe Experience Manager(AEM)Edge Delivery Services(EDS)を使用してフォームを理解し、実装するのに役立ちます。 単純な連絡先フォームを作成する場合でも、複雑なデータ収集ツールを作成する場合でも、このページではオプションを順を追って説明します。

Edge Delivery ServicesのFormsについて

Edge Delivery Servicesは、優れたパフォーマンスと俊敏性を備え、フォームを含む web コンテンツを配信するためのAdobeの最新のソリューションです。 フォームにEdge Delivery Servicesを使用すると、次のことができます。

  • より高速なエクスペリエンスの提供: Formsは、ユーザーに近いエッジサーバー(CDN)のグローバルネットワークから提供されるので、読み込みが非常に高速になります。 これにより、ユーザーの満足度が向上し、フォームの完了率が向上します。
  • Formsをより簡単に更新: Edge Delivery Servicesのアプローチにより、多くの場合、開発サイクルとコンテンツ更新を高速化し、フォームを迅速に適応させることができます。
  • 最新のレスポンシブなFormsを構築: あらゆるデバイスで、見た目が美しくシームレスに動作するフォームを作成します。
  • スケーラビリティと信頼性のメリット: フォームは、基盤となるエッジインフラストラクチャと同じくらい堅牢で拡張性があります。

このガイドでは、次の内容を説明します。

  • Edge Delivery Sites 用のフォームを作成する方法を説明します。
  • ユーザーがフォームを送信した後の動作(送信アクション)を設定する方法を示します。
  • 特定のニーズやチームスキルに最適な方法を選択するのに役立ちます。
  • アーキテクチャ図とベストプラクティスを説明します。

知っておくべき重要な用語

  • Edge Delivery Services(EDS):CDN を介してAdobe コンテンツを配信するための、AEMのパフォーマンスファーストのアーキテクチャを します。 プロジェクトフランクリンとも呼ばれます。
  • AEM Forms: フォームの作成、管理、処理を行うためのAdobeのソリューションです。
  • ユニバーサルエディター(UE): フォームを含むAEM コンテンツ用の視覚的なWYSIWYG エディター。
  • ドキュメントベースのオーサリング: Microsoft Word またはGoogle Docs/Sheets を使用してフォームを作成します。
  • ドキュメントオーサリング(DA): Adobeのコンテンツ(フォームをホストできるページを含む)をオーサリングするための、Edge Delivery Servicesでホストされたサービス。
  • Forms送信サービス (FSS): フォームデータをスプレッドシートやメールに簡単に送信できるAdobe サービスです。
  • AEM パブリッシュインスタンス: 複雑なフォーム送信を処理できるライブ AEM環境です。
  • CORS (クロスオリジンリソース共有): 異なるドメインからフォームを埋め込む際に設定が必要なブラウザーセキュリティ機能。
  • CDN (コンテンツ配信ネットワーク): 地理的な場所に基づいてユーザーに web コンテンツをすばやく配信するサーバーのネットワーク。

Edge Delivery Services フォームインタラクションの概念図

フォームの統合
次の図は、CDN 経由で迅速に配信されたフォームをユーザーがやり取りする様子を示しています。 その後、送信されたデータはバックエンドシステムで処理されます。

FormsのEdgeでの動作

EDS を使用すると、AEM as a Cloud Service、SharePoint、Google Drive、Document Authoring (DA)サービスなど、様々なソースから、web サイトコンテンツ(フォームの構造を含む)を作成できます。 その後、このコンテンツはグローバル CDN に公開されます。 ユーザーがサイトを訪問すると、コンテンツは最も近い CDN エッジサーバーから直接提供され、最高速度が確保されます。

FormsによるEdge Delivery Services アーキテクチャのシンプル化

アーキテクチャ
次の図に、ジャーニーを示します。フォームはオーサリングシステムで定義され、エッジに公開され、ユーザーに提供され、送信されたデータがバックエンドで処理されます。

フォームのオーサリング方法の選択

Edge Delivery Services サイト用のフォームを作成する主な方法は 3 つあります。 選択する内容は、チームのスキル、フォームの複雑さ、プロジェクトのニーズによって異なります。

最適なオーサリングアプローチはどれですか?

このデシジョンツリーを使用して、次の項目を選択します。

フォームオーサリングのデシジョンツリー

適切なプラットフォームの選択

このデシジョンツリーでは、チームおよびフォームのニーズに基づいてオーサリング方法を選択できます。

ドキュメントを使用したFormsの作成(Word/Google Docs)

この方法は、 チームがMicrosoft Word やGoogle Docs/シートに慣れている場合は、フォームをすばやく作成するのに最適です。

仕組み:ドキュメントから Web フォームへ

フォームのフィールド、ラベル、および種類は、特殊な表形式または「フォームブロック」を使用して、Word 文書またはGoogle シートで直接定義します。 このドキュメントを公開すると、Edge Delivery Servicesによって、ユーザーがサイト上でやり取りできる web 対応のHTML フォームに自動的に変換されます。

機能と特徴

  • 使い慣れたツール(Word、Google Docs、Google Sheets)でオーサリングします。
  • フィールドの定義:テキスト入力、メール、ドロップダウン、チェックボックス、ラジオボタン、テキスト領域。
  • ラベル、プレースホルダーおよびヘルプメッセージを追加します。
  • 基本的な検証ルール(必須フィールド、メールフォーマット)を設定します。
  • スパム対策として reCAPTCHA を統合します。
  • ファイルのアップロードを許可します。
  • 即座に公開:ドキュメント内の変更は、ライブサイトに素早く反映されます。
  • カスタムコードを使用した拡張:上級ユーザーは、GitHub を使用してカスタムフォームコンポーネントとスタイルを追加できます。

検討事項

  • チームはコンテンツに Word またはGoogle Docs/シートを定期的に使用している。
  • シンプルなフォームから適度に複雑なフォームをすばやく作成する必要があります。
  • 最小限の設定で、フォームデータをスプレッドシートまたはメールアドレスに直接送信する場合。

送信の仕組み(主にForms送信サービス)

Formsは、通常、この方法で作成されました データをAEM Forms送信サービスに送信します。 これは(多くの場合、ソースドキュメント自体で)Google シート、OneDrive/SharePoint上の Excel ファイル、またはメールにデータを送信するように設定します。

ドキュメントベースのオーサリングの概念

ドキュメントベース
次の図は、ドキュメント内で定義されたフォームが、ライブ web フォームになる仕組みを示しています。

ユニバーサルエディターを使用したFormsのビジュアル化

ユニバーサルエディターは、Web ブラウザーで直接フォームを作成するための、最新のドラッグ&ドロップインターフェイスを提供します。

仕組み:フォーム作成をドラッグ&ドロップする

ビジュアルインターフェイスを使用して、入力フィールド、ボタン、ドロップダウンなどのフォームコンポーネントをページにドラッグできます。 プロパティパネルを使用して各コンポーネントのプロパティ(ラベル、検証など)を設定できます。 ユニバーサルエディターは、フォームのリアルタイムプレビューを表示します。

機能と特徴

  • 事前定義済みコンポーネントのライブラリを使用したビジュアルフォームの作成。
  • リアルタイム検証とビジネスロジックを設定します(例:選択に基づいてフィールドを表示/非表示)。
  • 様々なデバイス(デスクトップ、モバイル)のライブプレビューを参照してください。
  • と、コンテンツフラグメント、AEM ワークフロー、ユーザー権限などのAEM機能を統合します。
  • 「Experience Builder」を使用して、プロンプトを使用したフォームの作成または編集に関する AI の支援を受けることができます。

検討事項

  • 条件付きロジック、複数手順のパネルまたはパーソナライゼーションを使用して複雑なフォームを作成する必要があります。
  • 担当のチーム(マーケター、ビジネスユーザーなど)がビジュアルツールを好んでいる。
  • ガバナンス、ワークフロー、またはフォームでAEM as a Cloud Service アセットを使用するには、AEMとの強力な統合が必要です。

送信の仕組み(Forms送信サービスまたはAEM公開)

ユニバーサルエディターで構築されたFormsは、次のことが可能です。

  • シンプルな Forms送信サービス(スプレッドシートまたはメールへのデータ送信用)を使用します。
  • より高度な処理(AEM ワークフローの開始、フォームデータモデルの使用、他のエンタープライズシステムとの統合など)を行うために、AEM パブリッシュインスタンスにデータを送信します。

ユニバーサルエディターの概念

ユニバーサルエディター

次の図は、フォームの作成に使用されるユニバーサルエディターの主要な部分を示しています。

ドキュメントオーサリング(DA)でのFormsの使用

ドキュメントオーサリング(DA)は、Adobeをホストするサービスで、Edge Delivery Servicesを介して配信される主な web サイトコンテンツ(ページ、記事)を作成および管理します。 Edge Delivery Services ソースコンテンツにSharePointまたはGoogle Drive を使用する代わりに使用できます。

Edge Delivery Services コンテンツのドキュメントオーサリング(DA)について

ドキュメントオーサリングは、Adobeのデザインシステム(Spectrum)とAEMのドキュメントモデル(ブロック、セクション)を使用した、エンタープライズクラスのオーサリング環境を提供します。 EDS 向けの構造化されたコンテンツ管理向けに設計されています。

DA によるFormsの処理方法(ダイレクトオーサリングではなく埋め込み)

DA 自体は フォームをゼロから作成するためのツールではありません。 代わりに、DA を使用して web ページを作成し、(ドキュメントベースのオーサリングまたはユニバーサルエディターを使用して作成された フォームを 埋め込み」します。

DA ページにFormsを埋め込む手順

  1. フォームを作成する: 次のいずれかを使用してフォームを作成します。

    • ドキュメントベースのオーサリング(Word/Google Docs)
    • ユニバーサルエディター
  2. フォームを公開: このフォームが公開され、独自のEdge Delivery URL (例:https://your-eds-project.hlx.page/forms/contact-us)を使用してアクセスできることを確認します。

  3. DA でページを作成する: フォームを表示するドキュメントのオーサリングでページを作成または編集します。

  4. フォームを埋め込む: DA ページ内の特定の「ブロック」またはコンポーネントを使用して、その URL からフォームを参照および埋め込みます。 DA ページは、この外部で作成されたフォームを取得して表示します。

埋め込みフォームを使用したドキュメントオーサリング

ドキュメントのオーサリング

次の図は、最初に UE またはドキュメントを使用してフォームを作成し、次にドキュメントオーサリングで作成するページに埋め込むことを示しています。

オーサリングオプションの比較

条件
ドキュメントベースのオーサリング
ユニバーサルエディター(WYSIWYG)
ドキュメントオーサリング (DA)におけるForms
プライマリ オーサリング ツール
Word/Google Docs/Sheets
ブラウザー(AEM Universal Editor)
該当なし(Formsは 埋め込み
チームスキルレベル
ドキュメントエディターに精通している
ビジュアル Web ツールの操作に慣れている
ページコンテンツに DA を使用
一般的なフォームの複雑さ
シンプルから中程度
中規模から複雑、エンタープライズ・クラス
埋め込まれたフォームに依存
送信オプション 1 (シンプル)
Forms送信サービス (シート/メールへ)
Forms送信サービス (シート/メールへ)
埋め込みフォームの設定に従う
送信オプション 2 (詳細)
該当なし
AEMの公開(ワークフロー、FDM など)
埋め込みフォームの設定に従う
AEMのバックエンドの統合
最小
高(AEM パブリッシュ送信付き)
間接的(埋め込みユニバーサルエディターフォーム経由)
次の場合に最適…
コンテンツチームによるシンプルなフォームの迅速な作成、迅速なデータキャプチャ。
視覚的な制御、複雑なフォーム、AEMの深い統合を必要とするマーケターやビジネスユーザー。
プライマリコンテンツが DA で管理され、他のソースからのフォームが必要なサイト。

強化されたデシジョンツリー

デシジョンツリー

オーサリングメソッドの機能比較

次の表は、様々な AEM フォームオーサリング方法の主な機能の詳細な比較を示し、要件に最も適したアプローチを選択するのに役立ちます。

機能
ユニバーサルエディター(WYSIWYG)
ドキュメントベースのオーサリング
ドキュメントオーサリング(DA)
Sites との統合構成
✅ (埋め込みフォームを使用)
埋め込みフォームのサポート
✅ (ユニバーサルエディターまたはドキュメントから埋め込み)
ルール(動的動作)
カスタム関数を備えた高度なルールエディター
限定的:表示/非表示、値を計算、カスタム関数
埋め込みフォームに依存
添付ファイルのサポート
ℹ️(早期アクセス)
埋め込みフォームに依存
CAPTCHA サポート
reCAPTCHA Enterprise
reCAPTCHA Enterprise
埋め込みフォームに依存
送信機能
REST, メール,FDM, ワークフロー,SharePoint, OneDrive, Azure Blob, Power Automate, Workfront Fusion (EA)
スプレッドシートのみ
埋め込みフォームの設定に従う
データスキーマ
FDM、カスタム
カスタム
埋め込みフォームに基づく
事前入力
💡 (ウィザード経由)
埋め込みフォームに依存
フラグメント
埋め込みフォームに依存
ビジュアルルールエディター
ローカライゼーション
💡 (Sites 経由)
ℹ️(Excel/Sheets マニュアル)
埋め込みフォームに依存
データスキーマ(データツリー)
💡 (UI 拡張機能を使用)
テンプレートのサポート
初期コンテンツのみ
ポータル
テーマ
ℹ️(プロジェクトレベルで)
ℹ️(プロジェクトレベルで)
ℹ️(ホスティングサイトをベース)
カスタムコンポーネント
✅ (埋め込みコンポーネントがサポートしている場合)
OOTB およびカスタム関数
✅ (埋め込み形式)
フラグメント参照
Sign との統合
実験
埋め込みコンテキストに依存
Workfront 経由でのタスク管理
パーソナライゼーション拡張機能
💡
エディターのカスタマイズ
✅ (UI 拡張機能を使用)
送信アクション
スプレッドシートのみ
埋め込みフォームに基づく

学習した内容を踏まえて、進め方を次に示します。

送信方法を選択プロジェクトにForms送信サービスのシンプルさ(スプレッドシートやメールの出力に最適)が必要か、AEM公開送信アクションの柔軟なバックエンド統合が必要かを判断します。

効果的でアクセスしやすく、使いやすいフォームを設計する方法については、Formsを作成するためのベストプラクティスの記事を参照してください。

次の手順

このガイドでは、AEM Edge Delivery Servicesでのフォームの使用の概要について説明しました。 具体的な設定の詳細な手順については、次のAdobe Experience Managerの公式ドキュメントを参照してください。

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