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

WYSIWYG オーサリングのルールエディターの概要

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

作成対象：

  • 管理者
  • 開発者

この機能は、早期アクセスプログラムを通じて使用できます。アクセスをリクエストするには、GitHub 組織名とリポジトリ名を記載したメールを公式アドレスから aem-forms-ea@adobe.com に送信してください。 例えば、リポジトリ URL が https://github.com/adobe/abc の場合、組織名は adobe で、リポジトリ名は abc になります。

ルールを作成できるルールエディターを使用して、動的なフォームの動作を追加できます。これらのルールにより、条件付きフィールドの表示が有効になり、ユーザー入力に基づいて計算が自動化され、全体的なユーザーエクスペリエンスが向上します。ルールエディターは、フォーム入力プロセスを効率化することで、正確性と効率性の両方を確保するのに役立ちます。

ルールエディターには、ルールを作成および管理する直感的で視覚的なインターフェイスが用意されています。わかりやすいアプローチにより、広範な技術的専門知識を持たないユーザーも含め、すべてのユーザーがアクセスでき、フォーム内にロジックを簡単に実装できます。

ルールについて

ルールは、特定の条件下でユーザーが実行するアクションをガイドする手順です。

  • 条件：条件とは、対象が true または false かどうかを評価する確認またはルールです。「これは要件を満たしていますか？」という質問にに回答します。

  • アクション：アクションとは、条件が true の場合に実行される動作を示します。条件の評価に基づいてトリガーされるタスクまたは動作です。

一般的なルールは、次のいずれかの構文に従います。

  • 条件=アクション：最初に条件を確認してから、アクションを実行します。ルールエディターで When ルールタイプを使用することで、condition-action の構文が適用されます。
  • アクション=条件：最初にアクションを実行してから、条件を確認します。ルールエディターの Set Value Of と Validate のルールタイプでは、action-condition 構文が適用されます。
  • アクション=条件=代替アクション：アクションを実行し、条件を確認してから、条件に基づいてメインアクションまたは代替アクションを実行します。例えば、デフォルトでは、Show の代替アクションは Hide、Enable の代替アクションは Disable です。

例えば、条件では、ユーザーがフィールドに特定の値を入力したかどうかを確認し、アクションではフィールドを表示または非表示にすることができます。

  • 条件：収入が 50,000 ドルを超えているかどうかを確認します。
  • アクション：条件が true の場合は、Additional Deduction フィールドを表示します。それ以外の場合は、代替アクションを実行して、Additional Deduction フィールドを非表示にします。

手順について詳しくは、条件付きルールの追加を参照してください。

ルールエディター拡張機能を有効にする方法

ユニバーサルエディターでは、ルールエディター拡張機能はデフォルトで有効になっていません。ルールエディター拡張機能を有効にするには、公式メール ID から aem-forms-ea@adobe.com までご連絡ください。

お使いの環境でルールエディター拡張機能が有効になると、エディターの右上隅に ルールを編集 アイコンが表示されます。

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

ルールを記述するフォームコンポーネントを選択し、 ルールを編集 アイコンをクリックします。ルールエディターのユーザーインターフェイスが表示されます。

ルールエディターのユーザーインターフェイス

この記事では、form object と form component が同じ意味で使用されています。

これで、ルールエディターで使用可能なルールタイプを使用して、選択したフォームフィールドのルールまたはビジネスロジックの記述を開始できます。

ルールエディターのユーザーインターフェイスについて

ルールを編集 アイコンをクリックすると、ルールエディターのエディターが開きます。

ルールエディターのユーザーインターフェイス

ルールエディターのコンポーネント
説明
1. タイトル
フォームコンポーネントのタイトルと、選択したルールタイプを表示します。例えば、「総給与を入力」は、「条件」ルールタイプが選択されたテキストボックスコンポーネントです。
2. フォームオブジェクトと関数
「フォームオブジェクト」タブには、フォームに含まれているコンポーネントがすべて階層表示されます。「関数」タブには、ルールエディターの一連の組み込み関数が含まれます。
3. フォームオブジェクトと関数の切り替え
切替スイッチボタンを使用すると、フォームオブジェクトパネルと関数パネルが交互に表示または非表示になります。
4. ビジュアルルールエディター
ビジュアルルールエディターは、フォームコンポーネントのルールを作成できるインターフェイスです。
5. 「完了」ボタンと「キャンセル」ボタン
ルールを保存するには、「完了」ボタンを押します。「キャンセル」ボタンは、ルールに加えた変更を破棄し、ルールエディターを閉じます。

コンポーネントを選択すると、フォームコンポーネント上に既存のルールが一覧表示されます。ルールエディターでタイトルを表示し、ルール概要をプレビューできます。さらに、ルールの順序変更、ルールの編集、ルールの有効化／無効化、ルールの削除を行うことができます。

フォームオブジェクトの使用可能なルールを表示

使用可能なルールタイプ

ルールエディターでは、以下の表に示すように、ルールを記述する事前定義された一連のルールタイプを利用できます。

ルールタイプ
説明
次の値を設定
指定した条件に応じてフォームコンポーネントの値を設定します。
次の値をクリア
指定したフォームコンポーネントの値がクリアします。
非表示／表示
条件を満たしているかどうかに基づいて、フォームコンポーネントを表示または非表示にします。
有効／無効
条件を満たしているかどうかに基づいて、フォームコンポーネントを有効または無効にします。
検証
条件に基づいてフォーム コンポーネントを確認し、条件が満たされない場合はエラーを表示します。
条件
評価の条件を指定し、その後に条件が満たされた場合にトリガーするアクションを指定します。「条件=アクション=代替」アクションのルール構文または「条件=アクション」のルール構文に従います。
形式
フォームコンポーネントの値を変更した際に、指定された式を使用してフォームコンポーネントの表示値を変更します。
サービスを呼び出す
外部 API、フォームデータモデルまたは RESTful web サービスを使用して設定されたサービスを呼び出します。
プロパティを設定
条件に基づいて、指定したフォームコンポーネントのプロパティの値を設定します。
フォーカスを設定
指定したフォームコンポーネントにフォーカスを設定します。
フォームを保存
これにより、ユーザーはドラフトと送信フォームポータルコンポーネントを使用してフォームをドラフトとして保存できます。
フォームを送信
フォームを送信します。
フォームをリセット
フォームをリセットします。
インスタンスを追加／削除
指定した繰り返し可能なパネルまたはテーブル行のインスタンスを追加または削除します。
次に移動
他のアダプティブフォーム、画像やドキュメントフラグメントなどの他のアセット、または外部 URL に移動します。
イベントのディスパッチ
事前定義済みの条件またはイベントに基づいて、特定のアクションをトリガーします。
パネル間を移動
フォーム内の様々なパネル間でフォーカスをシフトできます。

次に、ルールエディターでルールを記述する方法を見てみましょう。

ルールの記述

ビジュアルルールエディターでルールを記述する方法を理解するには、税金計算フォームの簡単な例を考えます。

ルールエディターの例

上記のフォームでは、ユーザーは総給与を入力します。この入力に基づいて条件付きフィールドが表示され、支払税が計算されます。

フォームフィールド：

  • 総給与（ユーザー入力）
  • 追加控除（条件付きフィールド）
  • 課税所得（計算済みフィールド）
  • 支払税（計算済みフィールド）

条件付きルール：

  • 条件：総給与が 50,000 ドルより上
  • アクション：「追加控除」フィールドを表示

計算ルール：

  • 課税所得 = 総給与 – 追加控除（該当する場合）
  • 支払税 = 課税所得 × 税率（簡単にするため、固定税率を 10％と仮定）

ルールを記述するには、次の手順を実行します。

1. フォームを作成

ユニバーサルエディターでフォームを作成するには：

  1. 編集用にユニバーサルエディターでフォームを開きます。

  2. 次のフォームコンポーネントを追加します。

    • 税金計算フォーム（タイトル）
    • 総給与（数値入力）
    • 追加控除（数値入力）
    • 課税所得（数値入力）
    • 支払税（数値入力）
    • 送信（「送信」ボタン）

  3. Properties を開いて、Additional Deduction フォームフィールドを非表示にします。

    ルールエディターの例

2. フォームフィールドの条件付きルールを追加

フォームを作成したら、総給与が 50,000 ドルを超える場合にのみ「Additional Deduction」フィールドを表示する最初のルールを記述します。条件付きルールを追加するには：

  1. 編集用にユニバーサルエディターでフォームを開き、コンテンツツリーで「総給与」フィールドを選択して、「 ルールを編集 」を選択します。または、フォームオブジェクト ​パネルから「総給与」フィールドを直接選択することもできます。
    ルールエディターの例 1
    ビジュアルルールエディターのインターフェイスが表示されます。
  2. 「作成」をクリックして、ルールを作成します。
    ルールエディターの例 2
    デフォルトでは、Set Value Of ルールタイプが選択されます。選択したオブジェクトを変更または修正できませんが、ルールドロップダウンを使用して別のルールタイプを選択できます。
    ルールエディターの例 3
  3. ルールタイプドロップダウンリストを開き、When ルールタイプを選択します。
    ルールエディターの例 4
  4. 状態の選択 ​ドロップダウンを選択し、「次の値より大きい」を選択します。「数値を入力」フィールドが表示されます。
    ルールエディターの例 5
  5. ルールの「数値を入力」フィールドに 50000 を入力します。
    ルールエディターの例 6
    条件を When Gross Salary is greater than 50000 と定義しました。次に、この条件が True の場合に実行するアクションを定義します。
  6. Then ステートメントで、アクションを選択 ​ドロップダウンから「表示」を選択します。
    ルールエディターの例 7
  7. 「オブジェクトをドロップするか、または次から選択」フィールドの「フォームオブジェクト」タブから「追加控除」フィールドをドラッグ＆ドロップします。あるいは、「オブジェクトをドロップするか、または次から選択」フィールドを選択し、ポップアップメニューから「追加控除」フィールドを選択します。この中には、フォーム内のすべてのフォームオブジェクトが一覧表示されます。
    ルールエディターの例 8
  8. 50000 未満の給与を入力した場合は、「Else セクションを追加」をクリックして、「総給与」フィールドに別の条件を追加します。
    ルールエディターの例 9
  9. Else ステートメントの​ アクションを選択 ​ドロップダウンから「非表示」を選択します。
    ルールエディターの例 10
  10. 「オブジェクトをドロップするか、または次から選択」フィールドの「フォームオブジェクト」タブから「追加控除」フィールドをドラッグ＆ドロップします。あるいは、「オブジェクトをドロップするか、または次から選択」フィールドを選択し、ポップアップメニューから「追加控除」フィールドを選択します。この中には、フォーム内のすべてのフォームオブジェクトが一覧表示されます。
    ルールエディターの例 11
  11. 「完了」を選択し、ルールを保存します。
    ルールエディターでは、ルールが次のように表示されます。
    ルールエディターの例 12
NOTE
または、「総給与」フィールドに When ルールを記述する代わりに、「追加控除」フィールド上に Show ルールを記述して、同じ動作を実装することもできます。

3. フォームフィールドの計算ルールを追加

次に、Gross Salary と Additional Deduction の差である Taxable Income を計算するルールを記述します（該当する場合）。「課税所得」フィールドに計算ルールを追加するには、次の手順を実行します。

  1. オーサリングモードで「課税所得」フィールドを選択し、 ルールを編集 アイコンを選択します。または、フォームオブジェクト ​パネルから「課税所得」フィールドを直接選択することもできます。

  2. 次に、「作成」を選択して、ルールを作成します。
    ルールエディターの例 13

  3. 「オプションの選択」を選択し、「数式」を選択します。数式記述用のフィールドが開きます。
    ルールエディターの例 14

  4. 数式フィールドで、次の操作を行います。

    • 最初の「オブジェクトをドロップまたは次から選択」フィールドの「総給与」フィールドで、「フォームオブジェクト」タブから選択またはドラッグ＆ドロップします。

    • 「演算子を選択」フィールドから「減算」を選択します。

    • 他の「オブジェクトをドロップまたは次から選択」フィールドの「追加控除」フィールドで、「フォームオブジェクト」タブから選択またはドラッグ＆ドロップします。

      ルールエディターの例 15

  5. 「完了」を選択し、ルールを保存します。

    次に、課税所得に税率を乗算して決定される「Tax Payable 」フィールドにルールを追加します。簡素化して固定税率を 10% と仮定します。

  6. オーサリングモードで「支払税」フィールドを選択し、 ルールを編集 アイコンを選択します。次に、「作成」を選択して、ルールを作成します。
    ルールエディターの例 16

  7. 「オプションの選択」を選択し、「数式」を選択します。数式記述用のフィールドが開きます。
    ルールエディターの例 17

  8. 数式フィールドで、次の操作を行います。

    • 最初の「オブジェクトをドロップまたは次から選択」フィールドの「課税所得」フィールドで、「フォームオブジェクト」タブから選択またはドラッグ＆ドロップします。

    • 「演算子を選択」フィールドから「乗算」を選択します。

    • 「オプションを選択」フィールドから「数値」を選択し、「数値を入力」フィールドに 10 のように値を入力します。

      ルールエディターの例 18

  9. 次に、式フィールドの周りのハイライト表示された領域を選択し、「拡張式」を選択します。
    ルールエディターの例 19

  10. 拡張式フィールドでは、「演算子を選択」フィールドから「割り算」を選択し、「オプションを選択」フィールドから「数字」を選択します。次に、数値フィールドに 100 を指定します。
    ルールエディターの例 20

  11. 「完了」を選択し、ルールを保存します。

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

これで、フォームをプレビューし、総給与 ​を 60,000 として入力すると、「追加控除」フィールドが表示され、それに応じて「課税所得」と「支払税」が計算されます。

フォームをプレビュー

「関数出力」の下にリストされている「合計」、「平均」などの標準の関数に加え、カスタム関数を記述して複雑なビジネスロジックを実装することもできます。

ルールエディターでのカスタム関数

Edge Delivery Services のフォームでは、ユーザーが複雑なビジネスルールを実装する JavaScript 関数を定義できるカスタム関数をサポートしています。カスタム関数は、指定された要件を満たすエントリ済みデータの操作と処理を容易にすることで、フォームの機能を拡張します。

カスタム関数の作成

カスタム関数を作成するには、../[blocks]/form/functions.js ファイルを編集します。作成プロセスには通常、次の手順が含まれます。

  • 関数宣言：関数名とそのパラメーター（受け入れる入力）を定義します。
  • ロジック実装：関数で実行される特定の計算や操作の概要を説明するコードを書き込みます。
  • 関数の書き出し：関連ファイルから関数を書き出して、ルール内で関数にアクセスできます。

次の例では、getFullName と days という 2 つのカスタム関数を示します。

/**
 * Get Full Name
 * @name getFullName Concats first name and last name
 * @param {string} firstname in Stringformat
 * @param {string} lastname in Stringformat
 * @return {string}
 */
function getFullName(firstname, lastname) {
  return `${firstname} ${lastname}`.trim();
}

/**
 * Calculate the number of days between two dates.
 * @param {*} endDate
 * @param {*} startDate
 * @name days Calculates the numebr of days between two dates
 * @returns {number} returns the number of days between two dates
 */
function days(endDate, startDate) {
  const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
  const end = typeof endDate === 'string' ? new Date(endDate) : endDate;

  // return zero if dates are valid
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return 0;
  }

  const diffInMs = Math.abs(end.getTime() - start.getTime());
  return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}

// eslint-disable-next-line import/prefer-default-export
export { getFullName, days };

カスタム関数の追加

ルールエディターでのカスタム関数の使用

ルールエディターでカスタム関数を使用するには：

  1. 関数を追加：カスタム関数を ../[blocks]/form/functions.js ファイルに含めます。必ず、ファイル内の export ステートメントに追加します。

  2. ファイルをデプロイ：更新された functions.js ファイルを GitHub プロジェクトにデプロイし、ビルドが成功したことを確認します。

  3. 関数の使用：「アクションを選択」フィールドの「Function Output」オプションを選択して、フォームのルールエディター内の関数にアクセスします。

    ルールエディターでのカスタム関数

  4. フォームをプレビュー：新しく実装された関数でフォームをプレビューします。

追加情報

NOTE
ユニバーサルエディターでは、カスタム関数スクリプトで静的および動的の読み込みはサポートされません。完全なコードを ../[blocks]/form/functions.js ファイルに追加する必要があります。

この記事では、ユニバーサルエディターで使用できるルールエディターに関する限定的な情報を提供します。ルールエディターとカスタム関数について詳しくは、次の記事を参照してください。

関連トピック

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