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

最終更新日： 2024年7月15日
  • 適用対象：
  • Experience Manager 6.5
  • トピック：

作成対象：

  • 管理者
  • ユーザー
  • 開発者

概要

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 つのセクションのみを表示することもできます。