HTML5 フォームのベストプラクティス best-practices-for-html-forms
概要 overview
AEM Forms には、HTML5 フォームと呼ばれるコンポーネントがあります。これは、既存の XFA ベースの PDF フォーム（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 構造を生成できます。
- キャプションプロパティを使用してフィールドにラベルを追加します。別個の Text 要素を使用せずにラベルを追加します。余分な負荷が減り、パフォーマンスの向上につながります。また、レイアウトの問題を回避するのにも役立ちます。
- フォーム上の Draw text 要素の数を最小限に抑えます。Draw 要素は、読みやすさと外観を向上させるのに役立ちますが、情報を保存する機能がありません。複数の Draw text 要素を 1 つの Draw text 要素にまとめることをお勧めします。あらゆる手段を講じてフォームのサイズを減らしてください。
軽量なフォームはパフォーマンスが良い：リソースを圧縮する lite-forms-perform-better-keep-the-resources-compressed
HTML5 フォームには複数の外部リソース（画像、JavaScript、CSS ファイルなど）を含めることができます。外部リソースは、ブラウザーがフォームを要求するたびにネットワーク経由で送信されます。ネットワーク経由での送信にかかる時間は、ファイルのサイズに正比例します。
したがって、フォームのパフォーマンスを向上させるには、外部リソースのサイズを減らし、どうしても必要なリソースのみを使用することをお勧めします。XFA フォームに対して以下の最適化を行うことにより、フォームの外部リソースのサイズを減らすことができます。
- 圧縮された画像を使用します。フォームをレンダリングするのに必要なネットワークアクティビティとメモリ量が減少します。これにより、フォームの読み込み時間が大幅に短縮されます。
- AEM Configuration Manager（Day CQ HTML Library Manager）の縮小オプションを使用して、JavaScript と CSS ファイルを圧縮します。詳しくは、OSGi 設定を参照してください。
- Web 圧縮を有効にします。フォームから送信されるリクエストと応答のサイズが減少します。詳しくは、AEM Forms サーバーのパフォーマンス調整を参照してください。
興味を維持する：必要なフィールドのみを表示する keep-the-interest-alive-show-only-required-fields
1 つの HTML5 フォームが数百ページに達することもあります。多数のフィールドを含むフォームは、ブラウザーでの読み込みが遅くなります。XFA フォームに対して以下の最適化を行うことにより、多数のフィールドとページを含むフォームを最適化できます。
- 大規模なフォームを複数のフォームに分割できるかどうか判定します。フォームセットを使用して小規模なフォームをグループ化し、1 つの単位として提示することもできます。フォームセットでは、必要なフォームのみが読み込まれます。さらにフォームセットでは、異なるフォーム内の共通するフィールドでデータバインディングが共有されるように設定することができます。データバインディングを使用すると、ユーザーが共通する情報を一度入力すれば、その後のフォームでは情報が自動的に入力されるので、パフォーマンスの大幅な向上につながります。フォームセットについて詳しくは、AEM Forms におけるフォームセットを参照してください。
- セクションを分割し、各セクションを異なるページに移動することを検討します。HTML5 フォームでは、ページスクロールのリクエスト時に各ページが動的に読み込まれます。スクロールされたページ（現在表示されているページとそれ以前に表示されたページ）のみがメモリに格納され、残りのページはオンデマンドで読み込まれます。このため、セクションを分割して独立したページに移動することにより、フォームの読み込みにかかる時間が短縮されます。フォームの先頭ページをランディングページとして使用することもできます。これは、本の目次（TOC）に似ています。フォームのランディングページには、フォームの他のセクションへのリンクのみを含めます。これにより、フォームの先頭ページの読み込み時間が大幅に短縮され、ユーザーエクスペリエンスが向上します。
- 条件付きのセクションをデフォルトで表示しないようにします。特定の条件が満たされたときのみ、これらのセクションを表示します。これは、DOM のサイズを最小限に抑えるのに役立ちます。タブナビゲーションを使用して、一度に 1 つのセクションのみを表示することもできます。
ページの数を減らして最適化する less-is-more-reduce-the-number-of-pages
HTML5 フォームには、データ駆動型のフィールド（テーブルやサブフォーム）を含めることができます。これらのフィールドを使用すると、実行時にフォームのサイズが増大します。例えば、HTML5 フォーム内のデータ駆動型テーブルは数千行に達する場合があります。このようなテーブルは、レイアウトの悪化やパフォーマンスの低下の原因になります。以下のように最適化すると、データ駆動型のフィールドを含む HTML5 フォームの読み込み時間を短縮できます。
-
XFA スクリプティングを使用してページによるナビゲーションを実現し、データ駆動型のフィールド（テーブルやサブフォーム）を表示します。ページによるナビゲーションでは、1 つのページに特定のデータのみが表示されます。ブラウザーのペイント操作が一度に表示されるフィールドに限定されるので、フォームのナビゲーションが簡単になります。また、モバイルデバイスのユーザーはデータのサブセットにのみ関心を持っています。優れたユーザーエクスペリエンスを提供できるようになり、必要なデータを読み込むのにかかる時間も短縮されます。1 つの対策で 2 重の効果が得られます。また、ページナビゲーションはそのままでは使用できないことに注意してください。ページによるナビゲーションは、XFA スクリプティングを使用して作成できます。
-
複数の読み取り専用列を 1 つの列にまとめることができるかどうかを判断します。これにより、フォームの表示に必要なメモリが減少します。また、ユーザーの入力を必要としない列を表示しないようにします。
-
上述の推奨事項を実践しても十分に改善されない場合は、データ駆動型のフォームをフォームセットに分割できるかどうかを判断します。例えば、テーブルが 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 フォームに加えて、AEM の一般的なベストプラクティスについて、以下をお読みになることもお勧めします。
クイックリファレンスカード quick-reference-card
以下のカード（カードをクリックすると、高解像度のバージョンがダウンロードされます）を印刷し、クイックリファレンスとして手元に置いておくことができます。