WYSIWYG オーサリングでのカスタムコンポーネントの作成

新しいフォルダーとファイルを追加
AEM プロジェクトに新しいカスタムコンポーネント用の新しいフォルダーとファイルを追加します。

1. AEM プロジェクトを開き、../blocks/form/components/ に移動します。

2. ../blocks/form/components/<component_name> でカスタムコンポーネントの新しいフォルダーを追加します。この例では、range という名前のフォルダーを作成します。

3. ../blocks/form/components/<component_name> に新しく作成したフォルダーに移動します。例えば、../blocks/form/components/range に移動して、次のファイルを追加します。

   • /blocks/form/components/range/_range.json：カスタムコンポーネントの定義が含まれます。

   • ../blocks/form/components/range/range.css：カスタムコンポーネントのスタイル設定を定義します。

   • ../blocks/form/components/range/range.js：実行時にカスタムコンポーネントをカスタマイズします。

     

     note note
     NOTE
     JSON ファイルのファイル名に、プレフィックスとしてアンダースコア（_）が含まれていることを確認します。

/blocks/form/components/range/_range.json ファイルに移動し、カスタムコンポーネントのコンポーネント定義を追加します。

コンポーネント定義を追加

定義を追加するには、_range.json ファイルに次のフィールドを追加する必要があります。

• タイトル：ユニバーサルエディターに表示されるコンポーネントのタイトル。
• ID：コンポーネントの一意の ID。
• fieldType：Forms では、特定のタイプのユーザー入力を取り込む様々な fieldType をサポートしています。サポートされている fieldType は、追加バイトの節で確認できます。
• resourceType：各カスタムコンポーネントには、fieldType に基づいて関連付けられたリソースタイプがあります。サポートされている resourceType は、追加バイトの節で確認できます。
• jcr:title：タイトルに似ていますが、コンポーネントの構造内に保存されます。
• fd:viewType：カスタムコンポーネントの名前を表します。これはコンポーネントの一意の ID です。コンポーネントのカスタマイズされたビューを作成する必要があります。

/blocks/form/components/range/_range.json ファイルに移動し、カスタムコンポーネントのコンポーネントモデルを追加します。

コンポーネントモデルを追加

カスタムコンポーネントのコンポーネントモデルを定義するには、関連するフィールドを _range.json ファイルに追加する必要があります。

1. モデルを作成

   • モデル配列に新しいオブジェクトを追加し、コンポーネントモデルの id を、コンポーネント定義で以前に設定した fd:viewType プロパティと一致するように設定します。
   • このオブジェクト内にフィールド配列を含めます。

2. プロパティダイアログのフィールドを定義

   • フィールド配列内の各オブジェクトは、コンテナタイプのコンポーネントにする必要があり、プロパティ ​ダイアログにタブとして表示できます。
   • 一部のフィールドでは、models/form-common で使用できる再利用可能なプロパティを参照できます。

3. 既存のコンポーネントモデルを参照として使用

   • 選択した fieldType に対応する既存のコンポーネントモデルのコンテンツをコピーし、必要に応じて変更できます。例えば、number-input コンポーネントを拡張して​ 範囲 ​コンポーネントを作成すると、models/form-components/_number-input.json のモデル配列を参照として使用できます。

コンポーネントモデルを追加した後の _range.json ファイルは次のとおりです。

"models": [
{
  "id": "range",
  "fields": [
    {
      "component": "container",
      "name": "basic",
      "label": "Basic",
      "collapsible": false,
      "...": "../../../../models/form-common/_basic-input-fields.json"
    },
    {
      "...": "../../../../models/form-common/_help-container.json"
    },
    {
      "component": "container",
      "name": "validation",
      "label": "Validation",
      "collapsible": true,
      "...": "../../../../models/form-common/_number-validation-fields.json"
    }
  ]
}
]

また、カスタムコンポーネントにカスタムプロパティを追加して、機能を拡張することもできます。

スタイル設定を追加するには、/blocks/form/components/range/range.css ファイルに移動して次のコード行を追加します。

/** Styling for range */
main .form .range-widget-wrapper.decorated input[type="range"] {
margin: unset;
padding: unset;
appearance: none;
height: 5px;
border-radius: 5px;
border: none;
background-image: linear-gradient(to right, #ADD8E6 calc(100% * var(--current-steps)/var(--total-steps)), #C5C5C5 calc(100% * var(--current-steps)/var(--total-steps)));
}

main .form .range-widget-wrapper.decorated input[type="range"]:focus {
outline: none;
}

.range-widget-wrapper.decorated input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #00008B; /* Dark Blue */
border: 3px solid #00008B; /* Dark Blue */
cursor: pointer;
outline: 3px solid #fff;
}

.range-widget-wrapper.decorated input[type="range"]:focus::-webkit-slider-thumb {
border-color: #00008B; /* Dark Blue */
}

.range-widget-wrapper.decorated .range-bubble {
color: #00008B; /* Dark Blue */
font-size: 20px;
line-height: 28px;
position: relative;
display: inline-block;
padding-bottom: 12px;
font-weight: bold;
}

.range-widget-wrapper.decorated .range-min,
.range-widget-wrapper.decorated .range-max {
font-size: 14px;
line-height: 22px;
color: #494f50;
margin-top: 16px;
display: inline-block;
}

.range-widget-wrapper.decorated .range-max {
float: right;
}

このコードは、カスタムコンポーネントのスタイル設定と外観を定義するのに役立ちます。

機能を追加するには、/blocks/form/components/range/range.js ファイルに移動して次のコード行を追加します。

function updateBubble(input, element) {
const step = input.step || 1;
const max = input.max || 0;
const min = input.min || 1;
const value = input.value || 1;
const current = Math.ceil((value - min) / step);
const total = Math.ceil((max - min) / step);
const bubble = element.querySelector('.range-bubble');
// during initial render the width is 0. Hence using a default here.
const bubbleWidth = bubble.getBoundingClientRect().width || 31;
const left = `${(current / total) * 100}% - ${(current / total) * bubbleWidth}px`;
bubble.innerText = `${value}`;
const steps = {
    '--total-steps': Math.ceil((max - min) / step),
    '--current-steps': Math.ceil((value - min) / step),
};
const style = Object.entries(steps).map(([varName, varValue]) => `${varName}:${varValue}`).join(';');
bubble.style.left = `calc(${left})`;
element.setAttribute('style', style);
}

export default async function decorate(fieldDiv, fieldJson) {
console.log('RANGE DIV: ', fieldDiv);
console.log('RANGE JSON: fieldJson', fieldJson);
 const input = fieldDiv.querySelector('input');
// modify the type in case it is not range.
input.type = 'range';
input.min = input.min || 10;
input.max = input.max || 1000;
// create a wrapper div to provide the min/max and current value
const div = document.createElement('div');
div.className = 'range-widget-wrapper decorated';
input.after(div);
const hover = document.createElement('span');
hover.className = 'range-bubble';
const rangeMinEl = document.createElement('span');
rangeMinEl.className = 'range-min';
const rangeMaxEl = document.createElement('span');
rangeMaxEl.className = 'range-max';
rangeMinEl.innerText = `${input.min || 1}`;
rangeMaxEl.innerText = `${input.max}`;
div.appendChild(hover);
// move the input element within the wrapper div
div.appendChild(input);
div.appendChild(rangeMinEl);
div.appendChild(rangeMaxEl);
input.addEventListener('input', (e) => {
updateBubble(e.target, div);
});
updateBubble(input, div);
return fieldDiv;
}

これにより、カスタムコンポーネントがユーザー入力とやり取りし、データを処理し、ユニバーサルエディターのフォームブロックと統合する方法が制御されます。

カスタムのスタイル設定と機能を組み込むと、範囲コンポーネントの外観と動作が強化されます。更新されたデザインは適用されたスタイルを反映し、追加された機能は、より動的でインタラクティブなユーザーエクスペリエンスを実現します。
以下のスクリーンショットは、更新された範囲コンポーネントを示しています。