現在表示中:

最適なパフォーマンスが得られるように XFA ベースの 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 行ずつ異なるフォームに移動します。フォームの読み込み時間とパフォーマンスを改善する効果があります。フォームセットでは、すべてのフォームに対して 1 つの統合された送信 XML が生成される点にも注目してください。各フォームのデータを区別するには、異なるデータルートを使用します。詳しくは、「AEM Forms におけるフォームセット」を参照してください。

レコードのドキュメント(DOR)に対する 2 分割の手法

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

推奨参考資料

Adobe Experience Manager(AEM)Forms を使用すると、複雑なトランザクションを単純で使いやすいデジタルエクスペリエンスに変えることができます。ただし、効率の良い生産的なフォームを作成するには、多くの取り組みが必要です。HTML5 フォームに加えて、AEM の一般的なベストプラクティスについて、以下をお読みになることもお勧めします。

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

以下のカード(カードをクリックすると、高解像度のバージョンがダウンロードされます)を印刷し、クイックリファレンスとして手元に置いておくことができます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー