統一インターフェイスのパフォーマンス面でのメリット

(当ブログは、2019年12月11日に米国で公開されたブログの抄訳をベースにしています）

モデル駆動型の Power Apps や Dynamics 365 アプリの表示には、先日廃止が発表された従来の Web クライアントに替わる統一インターフェイス (統一クライアント インターフェイス (UCI) とも呼ばれる) が使用されます。統一インターフェイスは最新の Web アプリで、クライアント上で動的に UI が生成されます。従来の Web クライアントはサーバー側で Web ページがレンダリングされ、クライアント コードも古いブラウザー向けのものでした。統一インターフェイスの新しいアーキテクチャは、レイテンシが大きいネットワークでのパフォーマンス向上を狙って、ページ読み込み時のネットワーク ラウンドトリップ数を抑えるように最適化されています。この強化により、お客様の運用環境でグリッドの読み込み時間が最大 63%、フォームの読み込み時間が 37%、アプリの起動時間が 27% 短縮されました。この結果は現行アプリを Web クライアントと UCI で比較したもので、実際のパフォーマンスはカスタマイズ内容、クライアント ハードウェア、ネットワーク条件により異なります。

この記事では、統一インターフェイスで高速なアプリを構築する方法と新機能をフル活用する方法についてご説明します。

最新ブラウザーを最大限に活用

統一インターフェイスでは、ES6 コードの実装や ServiceWorker によるキャッシュの改良など、最新ブラウザーの機能を最大限に活用してパフォーマンスを向上させています。各ブラウザーでこれらの最新機能への最適化が進められているため、ブラウザーの更新によって速度が向上します。

開発者への推奨事項: 最新バージョンの Edge または Chrome を使用してください。これらのブラウザーは更新のたびに高速化されていきます。また、キャッシュを無効化したりセッション終了時にキャッシュをクリアしたりするとアプリの速度が大幅に低下するため、そのような設定はなるべく避けてください。

効率的なカスタム UI

PowerApps Component Framework は、統一インターフェイスのディープ リンクに対応しています。この機能では、効率的に UI を更新したり、データをすばやくフェッチしたり、依存関係をキャッシュしてパフォーマンスやオフラインのサポートを強化したりできます。これを実現できた理由の 1 つは、このフレームワークで構築されたコントロールに広範な Web テクノロジを含めず、統一インターフェイスの API の一部に限定したことです。また、コントロールが明示的なデータ バインディングを使用するため、必要なデータやメタデータを事前に準備できるのでアプリが高速化されます。さらに、アプリのデータやその他の依存関係が変更された場合にのみコントロールが更新されるため、プロセッサの負荷も軽減されます。

開発者への推奨事項: Web リソースを使用して iframe コンテンツを追加するのではなく、できるだけ PowerApps Component Framework でカスタム UI を構築するようにしてください。パフォーマンス強化が常に行われているため、ブラウザーを最新状態に維持しているとその恩恵を自動的に受けられます。また、新規ウィンドウを開かないようにしてください。アプリ内のページやダイアログを使用すればアプリをゼロから読み込む必要がないため、はるかに高速に動作します。

画面表示に応じた最適化

統一インターフェイスでは、画面の移動、タブの切り替え、スクロールなどに応じてオンデマンドでインターフェイス要素が作成されます。このため、数百ものコントロールが含まれる複雑な作りのページでも、ごく単純なページと同じようにすばやく読み込むことができます。しかも各コントロールは実際に表示される直前に作成されますが、関連するデータやメタデータはプリフェッチされるため、遅延は発生しません (詳細は後述)。

また、要素がオンデマンドで読み込まれるため、デバイス間のパフォーマンス格差が軽減されます。たとえば、スマートフォンのプロセッサは低速ですが、画面が小さいので一度に読み込まれるのはページ内の狭い範囲のみとなり、短時間で読み込まれます。

開発者への推奨事項: 最も大切なのは、ページ設計時に、ユーザーがアクセスしやすいように重要な要素をページ トップに配置することです。使用頻度の低いコンポーネントをフォーム内の他のタブに移動したり、コンポーネントの表示/非表示ではなくロールベースのフォームを使用したり、ワークフローごとに専用のダッシュボードやビューを使用したりします。また、コントロールの整理にはセクションを自由に使用できます。これにより速度が低下することはありません。

ページ作成時には、重要なコンテンツをトップに配置することが重要

柔軟なアプリケーション メタデータ

統一インターフェイス アプリは、ページやビューの内容を含み、アプリの表示を制御するアプリケーション メタデータで記述されます。従来、このメタデータは一貫してキャッシュされることがなく、また大量のデータが一括してダウンロードされていたため、アプリの速度が大幅に低下する原因となっていました。

統一インターフェイスではメタデータが細かく分割されているため、該当ページで必要なメタデータのみが読み込まれます。また、セッション全体を通じてキャッシュされるので、必要なメタデータを事前にダウンロードできます。

開発者への推奨事項: アプリの更新版を公開すると、ユーザーがダウンロードしていたメタデータはすべて無効化され、読み込み時間が一時的に長くなることを覚えておいてください。更新版を必要以上に頻繁に公開せず、公開する場合は終業時間に合わせるようにして、ユーザーへの影響を最小限に抑えます。

モジュール化されたコード

統一インターフェイスでは、カスタマイズを含む各ページのコードは、ユーザーが表示するときに 1 回だけ読み込まれます。これは、ダイアログやオプトインされた機能など、各ユーザー独自の各種コンポーネントでも同様です。このようにして不要なコードのダウンロード、解析、コンパイルを避け、アプリの初回読み込み時の負荷を軽減しています。

開発者への推奨事項: JavaScript コードの読み込み速度は遅いため、カスタマイズや Power Apps コンポーネントはできるだけ小規模に抑えるようにしてください。可能であれば、Power Automate やビジネス ルールを使用してロジックを記述します。

ソリューション チェッカー

カスタマイズがアプリの速度低下の原因となることは珍しくありません。ソリューション チェッカーを使用すると、クライアント側の JavaScript やサーバー側のプラグインの問題を検出したり、パフォーマンスに関する一般的な問題をチェックしたりできます。

たとえば、ブラウザーがフリーズする原因となっている同期的なネットワーク呼び出しを特定できます。また、最新サーバーのパフォーマンス強化のメリットが得られないような古いサーバー エンドポイントが使用されている場合は、これを検出します。

開発者への推奨事項: ソリューション チェッカーを定期的に実行してください。マイクロソフトは今後、このツールでさらに多くの問題を認識できるようにしていきます。

ソリューション チェッカーでは、パフォーマンスに関する問題を自動検出できる

次のステップ

マイクロソフトは、Power Platform で構築されたすべてのアプリがスムーズに動作するように、今後も統一インターフェイスの強化を進めていきます。この記事が皆様のアプリの改良のお役に立てることを願っています。

-Joris Urbaitis