Edge Delivery Services Formsのルールエディター

• 条件 → アクション（When／Then）

  code language-text
  WHEN Gross Salary > 50000 THEN Show "Additional Deduction"

  条件付き表示とプログレッシブ開示に最適です。

• アクション ← 条件（If／Only If を設定）

  code language-text
  SET Taxable Income = Gross Salary - Deductions IF Deductions are applicable

  計算とデータ変換に最適です。

• If → Then → Else（代替アクション）

  code language-text
  IF Income > 50000 THEN Show "High Income" fields ELSE Show "Standard Income" fields

  分岐ロジックと相互に排他的なフローに最適です。

• 条件：「総給与が 50,000 ドルを超える」
• プライマリアクション：「追加控除」を表示します
• 代替アクション：「追加控除」を非表示にします
• 結果：ユーザーには、適用されるフィールドのみが表示されます

基本的な権限と設定：

• AEM as a Cloud Service：フォーム編集権限を持つオーサリングへのアクセス
• ユニバーサルエディター：環境にインストールおよび設定済み
• ルールエディター拡張機能：Extension Manager 経由で有効化
• フォーム編集権限：ユニバーサルエディターでフォームコンポーネントを作成および変更する機能

検証手順：

1. AEM Sites コンソールからユニバーサルエディターにアクセスできることを確認します
2. フォームコンポーネントを作成および編集できることを確認します
3. フォームコンポーネントを選択した際に、ルールエディターアイコン が表示されることを確認します

必要な知識とスキル：

• ユニバーサルエディターの熟練度：テキスト入力、ドロップダウン、基本的なフィールドプロパティを含むフォームの作成エクスペリエンス
• ビジネスロジックの理解：特定のユースケースに対する条件付き要件と検証ルールを定義する能力
• フォームコンポーネントの知識：フィールドタイプ（テキスト、数値、ドロップダウン）、プロパティ（必須、表示可能、読み取り専用）、フォーム構造に関する知識

高度な使用のためのオプション：

• JavaScript の基本：カスタム関数（データタイプ、関数、基本構文）の作成にのみ必要
• JSON に対する理解：複雑なデータ操作や API 統合に役立ちます

評価に関する質問：

• ユニバーサルエディターで、テキスト入力と送信ボタンを備えた基本フォームを作成できますか？
• ビジネスコンテキストにおいて、フィールドが必須の場合とオプションの場合を理解していますか？
• ユースケースで、条件付き表示が必要なフォーム要素を特定できますか？

重要：ユニバーサルエディター環境では、ルールエディター拡張機能はデフォルトで有効になっていません。

アクティベーション手順：

1. AEM 環境の Extension Manager に移動します
2. 使用可能な拡張機能リストで、「ルールエディター」拡張機能を見つけます
3. 「有効にする」をクリックして、アクティベーションを確認します
4. システムが更新されるまで待機します（1～2 分かかる場合があります）

検証：

• 有効にすると、フォームコンポーネントを選択した際に、ルールエディターアイコン が表示されます

図：フォームコンポーネントを選択した際に、ルールエディターアイコンが表示される

ルールエディターを開くには：

1. ユニバーサルエディターでフォームコンポーネントを選択します。
2. ルールエディターアイコンをクリックします。
3. ルールエディターがサイドパネルで開きます。

図：コンポーネントルール編集用のルールエディターインターフェイス

ルールエディターインターフェイスの概要

図：番号付きコンポーネントを含む完全なルールエディターインターフェイス

1. コンポーネントのタイトルとルールタイプ：選択したコンポーネントとアクティブなルールタイプを確認します。

2. フォームオブジェクトと関数パネル：

   • フォームオブジェクト：ルールで参照するフィールドとコンテナの階層ビュー
   • 関数：組み込みの数学、文字列、日付、検証ヘルパー

3. パネルの切り替え：オブジェクトと関数のパネルを表示／非表示にしてワークスペースを増やします

4. ビジュアルルールビルダー：ドラッグ＆ドロップ、ドロップダウン駆動型のルールコンポーザー

5. コントロール：完了（保存）、キャンセル（破棄）。保存前に常にルールをテストします。

コンポーネントに既にルールがある場合は、次の操作を実行できます。

• 表示：ルールの概要とロジックを表示します
• 編集：条件とアクションを変更します
• 並べ替え：実行順序を変更します（上から下へ）
• 有効／無効：テスト用にルールを切り替えます
• 削除：ルールを安全に削除します

• When：複雑な条件付き動作の基本ルール（条件 → アクション ± Else）
• 非表示／表示：条件に基づいて表示を制御します（プログレッシブ開示）。
• 有効／無効：フィールドがインタラクティブかどうかを制御します（例：必須フィールドが有効になるまで「送信」を無効にする）

• 次の値を設定：値（例：日付、合計、コピー数）を自動入力します
• 次の値を消去：条件変更時にデータを削除します
• 書式設定：保存された値を変更せずに、表示の書式設定（通貨、電話番号、日付）を変換します

• 検証：クロスフィールドチェックやビジネスルールを含むカスタム検証ロジック

• 数式：リアルタイムで値（合計、税、比率）を計算します

• フォーカスを設定：特定のフィールドにフォーカスを移動します（慎重に使用します）
• プロパティを設定：コンポーネントのプロパティ（プレースホルダー、オプションなど）を動的に変更します

• フォームを送信：プログラムでフォームを送信します（検証に合格した場合のみ）
• フォームをリセット：フォームを消去して初期状態にリセットします（使用前に確認します）
• フォームを保存：後で使用するためにドラフトとして保存します（長いフォーム、複数セッション）

• サービスを呼び出し：外部 API／サービスを呼び出します（読み込みとエラーを処理します）
• インスタンスを追加／削除：繰り返し可能なセクション（例：扶養家族、住所）を管理します
• 移動先：他のフォーム／ページへルーティングします（ナビゲーション前にデータを保持します）
• パネル間を移動：ウィザードの手順のナビゲーションとスキップを制御します
• イベントをディスパッチ：統合または分析用のカスタムイベントをトリガーします

この例では、条件付き表示と自動計算を示します。

図：インテリジェントな条件付きフィールドを備えた税金計算フォーム

次の機能を備えたフォームを作成します。

1. 関連するフィールドを表示してユーザー入力に適応する
2. リアルタイムで値を計算する
3. データを検証して精度を向上させる

• ルール 1：条件付き表示

  code language-text
  WHEN Gross Salary > 50,000 THEN Show "Additional Deduction" ELSE Hide "Additional Deduction"

• ルール 2：課税所得の計算

  code language-text
  SET Taxable Income = Gross Salary - Additional Deduction (Only when Additional Deduction applies)

• ルール 3：支払税の計算

  code language-text
  SET Tax Payable = Taxable Income × 10% (Simplified flat rate)

目的：すべてのフィールドと初期設定を含むベースフォームを作成します。

1. ユニバーサルエディターを開く：

   • AEM Sitesコンソールに移動し、ページを選択して「編集」をクリックします
   • ユニバーサルエディターが適切に設定されていることを確認します

2. フォームコンポーネントを次の順序で追加：

   • タイトル（H2）：「税金計算フォーム」
   • 数値入力：「総給与」（必須：はい、プレースホルダー：「年収を入力」）
   • 数値入力：「追加控除」（必須：いいえ、プレースホルダー：「追加控除を入力」）
   • 数値入力：「課税所得」（読み取り専用：はい）
   • 数値入力：「支払税」（読み取り専用：はい）
   • 「送信」ボタン：「税金を計算」

3. 最初のフィールドのプロパティを設定：

   • 「追加控除」を非表示にします（プロパティパネルで「表示：いいえ」に設定します）。
   • 「課税所得」と「支払税」を「読み取り専用：はい」に設定します

図：基本コンポーネントが設定された最初のフォーム構造

チェックポイント：「追加控除」が非表示で、計算フィールドが読み取り専用のすべての必須フィールドを含むフォームが必要です。

目的：総給与が 50,000 ドルを超える場合にのみ「追加控除」フィールドを表示します。

1. 「総給与」フィールドを選択 ​し、ルールエディターアイコン をクリックします

2. 新しいルールを作成：

   • 「作成」をクリックします。
   • ルールタイプを「次の値を設定」から​ 「When」 ​に変更します

3. 条件を設定：

   • ドロップダウンから​ 「次より大きい」 ​を選択します
   • 数値フィールドに 50000 と入力します

4. Then アクションを設定：

   • アクションを選択ドロップダウンから​ 「表示」 ​を選択します
   • フォームオブジェクトから​ 「追加控除」 ​フィールドをドラッグまたは選択します

5. Else アクションを追加：

   • 「Else セクションを追加」 ​をクリックします
   • アクションを選択ドロップダウンから​ 「非表示」 ​を選択します
   • 「追加控除」 ​フィールドを選択します

6. ルールを保存：「完了」をクリックします

目的：ユーザー入力に基づいて「課税所得」と「支払税」を自動計算します。

課税所得の計算を設定：

1. 「課税所得」フィールドを選択 ​し、ルールエディターを開きます

2. 数式を作成：

   • 「作成」をクリック → 「数式」を選択します
   • 式を作成：総給与 - 追加控除
   • 「総給与」を最初のフィールドにドラッグします
   • 「減算」 ​演算子を選択します
   • 「追加控除」を 2 番目のフィールドにドラッグします

3. 保存：「完了」をクリックします

支払税の計算を設定：

1. 「支払税」フィールドを選択 ​し、ルールエディターを開きます

2. 数式を作成：

   • 「作成」をクリック → 「数式」を選択します
   • 式を作成：課税所得 × 10 ÷ 100
   • 「課税対象」を最初のフィールドにドラッグします
   • 「乗算」 演算子を選択します
   • 数値として 10 を入力します
   • 「式を拡張」 ​をクリックします
   • 「除算」 ​演算子を選択します
   • 数値として 100 を入力します

3. 保存：「完了」をクリックします

フロー全体をテストして実装を検証：

1. フォームをプレビュー：ユニバーサルエディターでプレビューモードをクリックします

2. 条件ロジックをテスト：

   • 総給与 = 30000 と入力 → 「追加控除」は非表示のままにする必要があります
   • 総給与 = 60000 と入力 → 「追加控除」が表示されます

3. 計算をテスト：

   • 総給与 = 60000 の場合、追加控除 = 5000 と入力します
   • 課税所得 = 55000（60000 - 5000）であることを検証します
   • 支払税 = 5500（55000 × 10%）であることを検証します

図：条件付きフィールドと自動計算を備えた完成した税金計算ツール

成功条件：フォームは、ユーザーの入力に応じてフィールドを動的に表示／非表示にし、値をリアルタイムで計算する必要があります。

カスタム関数に最適なシナリオ：

• 複雑な計算：数式ルールでは容易に表現できない複数手順の計算
• ビジネス固有の検証：組織または業界固有のカスタム検証ロジック
• データ変換：形式変換、文字列操作、データ解析
• 外部統合：内部 API またはサードパーティサービスの呼び出し（制限あり）

カスタム関数のメリット：

• 再利用性：一度書き込むと、複数のフォームやルールで使用可能
• 保守性：更新とデバッグが容易な一元化されたロジック
• パフォーマンス：複雑なルールチェーンと比較して JavaScript の実行が最適化されている
• 柔軟性：標準ルールでは対応できないエッジケースや複雑なシナリオを処理

ファイルの場所：すべてのカスタム関数は、Edge Delivery Services プロジェクトの /blocks/form/functions.js に定義する必要があります。

開発ワークフロー：

1. 関数のデザイン

   • わかりやすいアクション指向の関数名を使用します
   • 明確なパラメータタイプと戻り値を定義します
   • エッジケースと無効な入力を適切に処理します

2. 実装

   • 簡潔でコメントが充実した JavaScript を書き込みます
   • 入力検証とエラー処理を含めます
   • 統合前に関数を個別にテストします

3. ドキュメント

   • 包括的な JSDoc コメントを追加します
   • 使用例とパラメーターの説明を含めます
   • 制限や依存関係を文書化します

4. デプロイメント

   • 名前付き書き出しを使用して関数を書き出します
   • プロジェクトリポジトリにデプロイします
   • テスト前にビルドの完了を確認します

実装例：

/**
 * Concatenates first and last name with proper formatting
 * @name getFullName
 * @description Combines first and last name, handles edge cases like missing values
 * @param {string} firstName - The person's first name
 * @param {string} lastName - The person's last name
 * @returns {string} Formatted full name or empty string if both inputs are invalid
 */
function getFullName(firstName, lastName) {
  // Handle null, undefined, or empty string inputs
  const first = (firstName || '').toString().trim();
  const last = (lastName || '').toString().trim();

  return `${first} ${last}`.trim();
}

/**
 * Calculates the number of days between two dates
 * @name days
 * @description Computes absolute difference in days, handles various date input formats
 * @param {Date|string} endDate - End date (Date object or ISO string)
 * @param {Date|string} startDate - Start date (Date object or ISO string)
 * @returns {number} Number of days between dates, 0 if inputs are invalid
 */
function days(endDate, startDate) {
  // Convert string inputs to Date objects
  const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
  const end = typeof endDate === 'string' ? new Date(endDate) : endDate;

  // Validate date objects
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return 0;
  }

  // Calculate absolute difference in milliseconds, then convert to days
  const diffInMs = Math.abs(end.getTime() - start.getTime());
  return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}

// Export functions for use in Rule Editor
export { getFullName, days };

図：functions.js ファイルへのカスタム関数の追加

統合手順：

1. プロジェクトに関数を追加

   • プロジェクトで /blocks/form/functions.js を作成または編集します
   • 書き出しステートメントに関数を追加します

2. デプロイとビルド

   • リポジトリに変更をコミットします
   • ビルドプロセスが正常に完了することを確認します
   • CDN キャッシュ更新の時間を許可します

3. ルールエディターでアクセス

   • 任意のフォームコンポーネントのルールエディターを開きます
   • アクションを選択 ​ドロップダウンで​ 「関数出力」 ​を選択します
   • 使用可能な関数リストからカスタム関数を選択します
   • フォームフィールドまたは静的な値を使用して関数パラメーターを設定します

4. 徹底的にテスト

   • フォームをプレビューして関数の動作を検証します
   • エッジケースを含む様々な入力の組み合わせでテストします
   • フォームの読み込みとインタラクションに対するパフォーマンスへの影響を検証します

図：ルールエディターインターフェイスでのカスタム関数の選択と設定

カスタムイベントベースのルール、動的変数のサポート、API 統合など、ルールエディターの機能強化は、Edge Delivery Services Formsでも利用できます。 これらの機能強化とその使用方法について詳しくは、 ルールエディターの機能強化とユースケースの記事を参照してください。

関数の使用に関するベストプラクティス：

• エラー処理：関数のエラー発生時に常にフォールバック動作を含めます
• パフォーマンス：現実的なデータ量で関数のプロファイルを作成します
• セキュリティ：セキュリティの脆弱性を防ぐために、すべての入力を検証します
• テスト：通常のケースとエッジケースを対象としたテストケースを作成します

• ルールの複雑さを最小限に抑え、大規模なロジックを小さく、焦点を当てたルールに分割します
• ルールを頻度順に並べます（最も頻繁に使用されるルールを先頭にします）
• コンポーネントごとのルールセットを管理しやすい状態に維持します
• ロジックを複製するよりも、再利用可能なカスタム関数を優先します

• 明確な検証とインラインフィードバックを提供します
• 視覚的な変化を目立たなくし、表示／/非表示を慎重に使用します
• デバイスとレイアウトをまたいでテストします

• エッジケースと既知の値でテストします
• ブラウザー間で検証します
• 複雑なルールの仕組みだけでなく、その背後にある意図を文書化します
• 大規模なフォームのルール在庫を維持します
• コンポーネントとルールに一貫性のある命名を使用します
• カスタム関数をバージョン管理し、実稼動以外の環境でテストします

• コンポーネント名と参照を検証します
• 実行順序を確認します（上から下へ）
• 既知の値で条件を検証します
• ブラウザーコンソールでブロックエラーが発生していないか検査します

• 演算子とグループ化（AND／OR）をレビューします
• 式フラグメントを個別にテストします
• データタイプ（数値と文字列）を確認します

• 深くネストされた条件を簡素化します
• カスタム関数をプロファイルを作成します
• ルール内の外部呼び出しを最小限に抑えます
• 特定のセレクターと参照を使用します

• ファイルパス（/blocks/form/functions.js）を確認します
• 名前付き書き出しが正しいことを確認します
• ビルドに変更が含まれていることを確認します
• デプロイメント後にブラウザーキャッシュを消去します
• パラメータータイプとエラー処理を検証します

• ルールエディター拡張機能が有効になっていることを確認します
• サポートされているコンポーネントを選択します
• サポートされているブラウザー（Chrome、Firefox、Safari）を使用します
• 必要な権限があることを検証します

重要な制限事項

概要

ユニバーサルエディターのルールエディターは、静的フォームを、ユーザー入力にリアルタイムで適応するインテリジェントでレスポンシブなエクスペリエンスに変換します。条件付きロジック、自動計算、カスタムビジネスルールを活用して、アプリケーションコードを記述せずに高度なフォームワークフローを作成できます。

学習した主な機能：

• 条件付きロジック：焦点を当てた関連性の高いエクスペリエンスを作成するために、ユーザー入力に基づいてフィールドを表示または非表示にします
• 動的計算：ユーザーがフォームを操作する際に、値（税金、合計、レート）を自動的に計算します
• データ検証：明確で実用的なフィードバックメッセージで、リアルタイム検証を実装します
• カスタム関数：複雑なビジネスロジックや統合向けに、JavaScript で機能を拡張します
• パフォーマンスの最適化：保守性と効率性に優れたルール開発用のベストプラクティスを適用します

提供される価値：

• ユーザーエクスペリエンスの向上：プログレッシブ開示とインテリジェントフォームフローにより、認知的負荷を軽減します
• エラーの削減：リアルタイム検証とガイド付き入力により、無効な送信を防ぎます
• 効率の向上：計算とデータ入力を自動化し、ユーザーの労力を最小限に抑えます
• 保守可能なソリューション：組織全体に拡大・縮小を行う、再利用可能で十分に文書化されたルールを作成します

ビジネスへの影響：

フォームは、データ収集、リード選定、ユーザーエンゲージメントのための強力なツールになります。ルールエディターを使用すると、技術に詳しくない作成者でも高度なビジネスロジックを実装できるので、開発コストを削減しながら、フォームの完了率とデータ品質を向上させることができます。