Show Menu
トピック×

HTML5 フォームのベストプラクティス

概要

AEM Forms には、HTML5 フォームと呼ばれるコンポーネントがあります。これは、既存の XFA ベースの PDF フォーム(XDP ファイル)を HTML5 形式でレンダリングするのに役立ちます。このドキュメントでは、モバイルデバイス上で HTML5 フォームの読み込み時間を短縮し、パフォーマンスを向上させるために必要なガイドラインや推奨事項を紹介します。
ほとんどのモバイルデバイスは、処理能力やメモリ容量が限られています。これは、モバイルデバイスの待機時間の向上に役立っています。モバイルデバイス上で動作する Web ブラウザーは、利用できるリソース(メモリや処理能力)が制限されています。制限に達すると、ブラウザーの動作速度は低下します。このドキュメントでは、HTML5 フォームのサイズを抑制するための推奨事項を紹介します。フォームのサイズを小さくすると、デバイスのメモリや処理能力の制限に達しないので、スムーズなエクスペリエンスを提供できます。
この記事で説明する推奨事項は HTML5 フォームを対象としていますが、XFA ベースの PDF フォームにも同じように適用できます。これらのベストプラクティスは、まとめてHTML5フォームの全体的なパフォーマンスに貢献します。 効率的で生産的なフォームを開発するためには、入念な計画が必要です。 それでは、始めましょう。

ノードは HTML5 フォームの通貨:ノードを有効活用する

一般に、XFA フォームには複数の要素が含まれています。例えば、テーブル、テキストフィールド、画像などです。どの要素にも、要素の動作や外観を制御する複数のプロパティがあります。XFA フォームを HTML5 形式でレンダリングすると、すべての XFA 要素とそれに対応するプロパティがモデル(HTML DOM)ノードに変換されます。これらのノードによって DOM のサイズと複雑さが増大します。HTML5 フォームのレンダリング速度も低下します。
DOM のサイズが小さいほど、ブラウザーでのレンダリングが簡単になります。そこで、XFA フォームに対して以下の最適化を行うことにより、ノードの数を減らすことができます。これにより、小規模な DOM 構造を生成できます。
  • キャプションプロパティを使用してフィールドにラベルを追加します。別個の Text 要素を使用せずにラベルを追加します。余分な負荷が減り、パフォーマンスの向上につながります。また、レイアウトの問題を回避するのにも役立ちます。
  • フォーム上の Draw text 要素の数を最小限に抑えます。Draw 要素は、読みやすさと外観を向上させるのに役立ちますが、情報を保存する機能がありません。複数の Draw text 要素を 1 つの Draw text 要素にまとめることをお勧めします。あらゆる手段を講じてフォームのサイズを減らしてください。

軽量なフォームはパフォーマンスが良い:リソースを圧縮する

HTML5 フォームには複数の外部リソース(画像、JavaScript、CSS ファイルなど)を含めることができます。外部リソースは、ブラウザーがフォームを要求するたびにネットワーク経由で送信されます。ネットワーク経由での送信にかかる時間は、ファイルのサイズに正比例します。
したがって、フォームのパフォーマンスを向上させるには、外部リソースのサイズを減らし、どうしても必要なリソースのみを使用することをお勧めします。XFA フォームに対して以下の最適化を行うことにより、フォームの外部リソースのサイズを減らすことができます。
  • 圧縮された画像 を使用します。フォームをレンダリングするのに必要なネットワークアクティビティとメモリ量が減少します。これにより、フォームの読み込み時間が大幅に短縮されます。
  • AEM Configuration Manager(Day CQ HTML Library Manager)の縮小オプションを使用して、JavaScript と CSS ファイルを圧縮します。詳しくは、「 OSGi 設定 」を参照してください。
  • Web 圧縮を有効にします。フォームから送信される要求と応答のサイズが減少します。詳しくは、「 AEM Forms サーバーのパフォーマンス調整 」を参照してください。

興味を維持する:必要なフィールドのみを表示する

1 つの HTML5 フォームが数百ページに達することもあります。多数のフィールドを含むフォームは、ブラウザーでの読み込みが遅くなります。XFA フォームに対して以下の最適化を行うことにより、多数のフィールドとページを含むフォームを最適化できます。
  • 大規模なフォームを複数のフォームに分割できるかどうか判定します。フォームセットを使用して小規模なフォームをグループ化し、1 つの単位として提示することもできます。フォームセットでは、必要なフォームのみが読み込まれます。さらにフォームセットでは、異なるフォーム内の共通するフィールドでデータバインディングが共有されるように設定することができます。データバインディングを使用すると、ユーザーが共通する情報を一度入力すれば、その後のフォームでは情報が自動的に入力されるので、パフォーマンスの大幅な向上につながります。フォームセットについて詳しくは、「 AEM Forms におけるフォームセット 」を参照してください。
  • セクションを分割し、各セクションを異なるページに移動することを検討します。HTML5 フォームでは、ページスクロールの要求時に各ページが動的に読み込まれます。スクロールされたページ(現在表示されているページとそれ以前に表示されたページ)のみがメモリに格納され、残りのページはオンデマンドで読み込まれます。このため、フォーム自体のページ上のセクションを分割して移動することにより、フォームの読み込みにかかる時間が短縮されます。フォームの先頭ページをランディングページとして使用することもできます。これは、本の目次(TOC)に似ています。フォームのランディングページには、フォームの他のセクションへのリンクのみを含めます。フォームの先頭ページの読み込み時間が大幅に短縮され、ユーザーエクスペリエンスの向上につながります。
  • 条件付きのセクションをデフォルトで表示しないようにします。特定の条件が満たされたときのみ、これらのセクションを表示します。DOM のサイズを最小限に抑える効果があります。タブによるナビゲーションを使用して、一度に 1 つのセクションのみを表示することもできます。

少ないほど豊かである:ページの数を減らす

HTML5 フォームには、データ駆動型のフィールド(テーブルやサブフォーム)を含めることができます。これらのフィールドを使用すると、実行時にフォームのサイズが増大します。例えば、HTML5 フォーム内のデータ駆動型テーブルの行は数千個に達する可能性があります。このようなテーブルは、レイアウトの悪化やパフォーマンスの低下の原因になります。以下に示す最適化は、データ駆動型のフィールドを含む HTML5 フォームの読み込み時間を短縮するのに役立ちます。
  • XFA スクリプティングを使用してページによるナビゲーションを実現し、データ駆動型のフィールド(テーブルやサブフォーム)を表示します。ページによるナビゲーションでは、1 つのページに特定のデータのみが表示されます。ブラウザーのペイント操作を一度に表示されるフィールドに制限し、フォーム内を移動しやすくします。 また、モバイルデバイス上のユーザは、データのサブセットにのみ関心を持つ。 優れたユーザーエクスペリエンスを提供できるようになり、必要なデータを読み込むのにかかる時間も短縮されます。1 つの対策で 2 重の効果が得られます。また、ページナビゲーションは初期設定では使用できません。 ページによるナビゲーションは、XFA スクリプティングを使用して作成できます。
  • 複数の読み取り専用列を 1 つの列にまとめることができるかどうか判定します。フォームを表示するのに必要なメモリが減少します。また、ユーザーの入力を必要としない列を表示しないようにします。
  • 上述の推奨事項によって十分に改善されない場合は、データ駆動型のフォームを フォームセット に分割できるかどうか判定します。例えば、テーブルの行が 1000 個を超える場合は、100 行ずつ異なるフォームに移動します。フォームの読み込み時間とパフォーマンスを改善する効果があります。また、フォームセットでは、すべてのフォームに対して統合送信XMLが生成されます。 各フォームのデータを区別するには、異なるデータルートを使用します。詳しくは、「 AEM Forms におけるフォームセット 」を参照してください。

Power of two for Document of Record (DOR)

XFA フォームには、レコードのドキュメント(DOR)専用のセクションを数多く含めることができます。ノード数を減らし、フォームのパフォーマンスを向上させるために、フォームの異なるコピー(1つはフォームに入力するコピー、もう1つはサーバー上でレコードのドキュメントを生成するコピー)を維持できます。 XFA フォームに記入するためのコピーには、データを取得するのに必要なフィールドのみを表示します。レコードのドキュメントを生成する XFA フォームには、フォームの印刷出力に必要なフィールドのみを保持します。この推奨事項を採用する場合は、事前にパフォーマンスの向上とメンテナンスのオーバーヘッドを評価してください。

クイックリファレンスカード

次のカードを印刷(高解像度版をダウンロードするには「カード」をクリック)し、デスクに保存しておくと、簡単な参照が可能です。