HTML5 フォームのベストプラクティス best-practices-for-html-forms
最適なパフォーマンスが得られるように XFA ベースの HTML5 フォームを調整します。
概要 overview
AEM Formsには、HTML5 フォームと呼ばれるコンポーネントがあります。 既存の XFA ベースのPDF forms（XDP ファイル）をHTML5 形式でレンダリングするのに役立ちます。 このドキュメントでは、読み込み時間を短縮し、モバイルデバイスでのHTML5 フォームのパフォーマンスを向上させるためのガイドラインと推奨事項を示します。
ほとんどのモバイルデバイスでは、処理能力とメモリ機能に制限があります。 これは、モバイルデバイスのスタンバイ時間を改善するのに役立ちます。 モバイルデバイス上で動作する Web ブラウザーは、限られたリソース（限られたメモリと処理機能）にアクセスできます。 制限に達すると、ブラウザーの動作が遅くなります。 このドキュメントでは、HTML5 のフォームのサイズを確認するための推奨事項を示します。 小さいフォームは、デバイスのメモリや処理能力の制限に違反せず、スムーズな操作を提供します。
この記事で説明する推奨事項は HTML5 フォームを対象としていますが、XFA ベースの PDF フォームにも同じように適用できます。これらのベストプラクティスをそれぞれ実行すると、HTML5 フォームの全体的なパフォーマンスが向上します。効率の良い生産的なフォームを作成するには、入念な計画が必要です。まず始めましょう：
ノードはHTML5 形式の通貨で、賢く使用します nodes-are-currency-of-html-forms-spend-them-wisely
一般に、XFA フォームには複数の要素が含まれます。 例えば、テーブル、テキストフィールド、画像などです。 各要素には、要素の動作と外観を制御するための多数のプロパティがあります。 XFA フォームがHTML5 形式でレンダリングされると、すべての XFA 要素と対応するプロパティがモデルまたはHTMLの DOM ノードに変換されます。 これらのノードは、DOM のサイズと複雑さに追加されます。 HTML5 フォームのレンダリングが遅くなる。
ブラウザーではより小さな DOM をより簡単にレンダリングできます。 このため、XFA フォームに対して次の最適化を実行して、ノード数を減らすことができます。 したがって、リーンな DOM 構造を生成します。
- フィールドにラベルを追加するには、 caption プロパティを使用します。 別のテキスト要素を使用してラベルを追加しないでください。 これは、余分な重みを減らし、パフォーマンスを向上させるのに役立ちます。 また、レイアウトの問題を回避するのにも役立ちます。
- フォーム上の Draw テキスト要素の数を最小限に抑えます。 Draw 要素は、読みやすさと外観を改善するのに役立ちますが、情報を保存する機能はありません。 複数の Draw テキスト要素を 1 つの Draw テキスト要素にマージすることをお勧めします。 フォームをリーナーにするには、石を返さないでください。
Lite フォームのパフォーマンスが向上し、リソースを圧縮したままにします lite-forms-perform-better-keep-the-resources-compressed
HTML5 フォームには、画像、JavaScript、CSS ファイルなど、複数の外部リソースを含めることができます。 ブラウザーがフォームをリクエストするたびに、外部リソースがネットワーク経由で送信されます。 ネットワーク経由での移動に要する時間は、ファイルのサイズに正比例します。
したがって、フォームのパフォーマンスを向上させるには、外部リソースのサイズを小さくし、必要なリソースのみを使用する方法が推奨されます。 XFA フォームに対して次の最適化を実行して、フォームの外部リソースのサイズを小さくすることができます。
- 用途 圧縮画像. これにより、フォームのレンダリングに必要なネットワークアクティビティとメモリ量が削減されます。 したがって、フォームの読み込み時間が大幅に短縮されます。
- AEM Configuration Manager(Day CQHTMLライブラリマネージャー ) の minify オプションを使用して、JavaScript ファイルと CSS ファイルを圧縮します。 詳しくは、 OSGi 設定.
- Web 圧縮を有効にします。 フォームから発生した要求と応答のサイズが小さくなります。 詳しくは、 AEM forms サーバーのパフォーマンス調整.
関心を維持し、必須フィールドのみを表示 keep-the-interest-alive-show-only-required-fields
HTML5 フォームは、数百ページに及ぶ場合があります。 多数のフィールドを含むフォームは、ブラウザーでの読み込みが遅くなります。 XFA フォームに対して次の最適化を実行すると、多数のフィールドやページを含むフォームを最適化することができます。
- 大きなフォームを複数のフォームに分割することを評価します。 また、フォームセットを使用して、すべての小さなフォームをグループ化し、1 つの単位として表示することもできます。 フォームセットは、必要なフォームのみを読み込みます。 さらに、フォームセットでは、データ連結を共有するように異なるフォーム内の共通フィールドを設定できます。 データ連結は、ユーザーが共通の情報を 1 回だけ入力する場合に役立ちます。その情報が後続のフォームで自動入力され、パフォーマンスが大幅に向上します。 フォームセットについて詳しくは、 AEM forms のフォームセット.
- セクションを分割し、各セクションを異なるページに移動することを検討します。 HTML5 フォームは、ページスクロールリクエストで各ページを動的に読み込みます。 スクロールされたページ（表示されているページとその前のページ）のみがメモリに保存されます。残りのページは、オンデマンドで読み込まれます。 したがって、ページ上のセクションを分割して移動すると、フォームの読み込みに要する時間が短縮されます。 また、フォームの最初のページをランディングページとして使用することもできます。 これは、本の目次 (TOC) に似ています。 フォームのランディングページには、フォームの他のセクションへのリンクのみが含まれます。 フォームの最初のページの読み込み時間が大幅に改善され、ユーザーエクスペリエンスが向上します。
- 条件付きセクションは、デフォルトで非表示のままにします。 特定の条件が満たされた場合にのみ、これらのセクションを表示します。 DOM のサイズを最小限に抑えるのに役立ちます。 また、タブナビゲーションを使用して、一度に 1 つのセクションのみを表示することもできます。
より少ないほど、ページ数を減らします less-is-more-reduce-the-number-of-pages
HTML5 のフォームには、データ駆動型のフィールド（テーブルとサブフォーム）を含めることができます。 これらのフィールドは、実行時にフォームのサイズを拡大します。 例えば、HTML5 フォームのデータ駆動型テーブルは、数千の行にまたがることができます。 このようなテーブルを使用すると、レイアウトやパフォーマンスが低下する可能性があります。 以下に示す最適化は、データ駆動型フィールドを使用したHTML5 フォームの読み込み時間を短縮するのに役立ちます。
-
XFA スクリプティングを使用してページナビゲーションを実現し、データ駆動型フィールド（テーブルおよびサブフォーム）を表示します。 ページナビゲーションでは、特定のデータのみがページに表示されます。 ブラウザーのペイント操作が一度に表示されるフィールドに限定されるので、フォームのナビゲーションが簡単になります。また、モバイルデバイスのユーザーはデータのサブセットにのみ関心を持っています。優れたユーザーエクスペリエンスを提供できるようになり、必要なデータを読み込むのにかかる時間も短縮されます。1 つの対策で 2 重の効果が得られます。また、ページナビゲーションはそのままでは使用できないことに注意してください。XFA スクリプティングを使用して、ページナビゲーションを開発できます。
-
複数の読み取り専用列を単一の列に結合することを評価します。 フォームの表示に必要なメモリを削減します。 また、ユーザーからの入力が不要な列は表示しないでください。
-
データ駆動型フォームを フォームセット上記の提案が多くの改善につながらない場合は、を参照してください。 例えば、テーブルの行数が 1000 を超える場合、100 行ごとに異なるフォームに移動します。 フォームの読み込み時間とパフォーマンスを改善する効果があります。フォームセットは、すべてのフォームに対して 1 つの統合された送信 XML を生成する点にも注目してください。各フォームのデータを区別するには、異なるデータルートを使用します。詳しくは、AEM Forms におけるフォームセットを参照してください。
レコードのドキュメント (DOR) に対する 2 の累乗 power-of-two-for-document-of-record-dor
XFA フォームには、レコードのドキュメント (DOR) 専用の多数のセクションを含めることができます。 このようなフォームのノードの数を減らし、パフォーマンスを向上させるため、フォームのコピーを複数保持することができます。1 つはフォームに記入するためのコピーで、もう 1 つはサーバー上でレコードのドキュメントを生成するためのコピーです。XFA フォームに入力するためのコピーには、データを取り込むためにのみ必要なフィールドが表示されます。 レコードのドキュメント XFA の生成元で、フォームの印刷出力でのみ必須フィールドを保持します。 推奨されるアプローチを選択する前に、パフォーマンスの向上とメンテナンスのオーバーヘッドを評価します。
推奨読み取り recommended-reads
Adobe Experience Manager（AEM）Forms を使用すると、複雑なトランザクションを単純で使いやすいデジタルエクスペリエンスに変えることができます。しかし、効率的で生産的なフォームを開発するには、共同の作業が必要です。 HTML5 Formsに加えて、一般的なAEMのベストプラクティスに関するお勧めの参考資料を以下に示します。
クイックリファレンスカード quick-reference-card
以下のカード（カードをクリックすると、高解像度のバージョンがダウンロードされます）を印刷し、クイックリファレンスとして手元に置いておくことができます。