ページ表示を早めるコツ

UI部品　基本編

本記事はForguncy製品サイトで公開しているリストビュー概要資料における、各機能の実装方法を解説したものです。
リストビュー概要資料は下記リンクからご覧いただけます。

＞お役立ち資料 – リストビュー概要

1.プロジェクトを確認する

今回の演習で使用するプロジェクトを確認します。

手順1-1.テーブルを確認 

プロジェクトには複数のテーブルが内蔵されています。
今回は社員マスタと部署マスタを使用します。 

手順1-2.ページを確認  

プロジェクトには複数のページが内蔵されています。
そのうち、今回使用するページは「ページ表示を早めるコツ」フォルダに含まれている「対策前」「対策後」という2つのページです。
「対策前」ページはそのままデバッグをして動作を早める処理を実装する前のページ表示速度を試すために内蔵しています。
実際に作業を行うのは「対策後」ページとなりますので、ここでは「対策後」ページのみご紹介します。 

2.ページ表示が重くなる原因 

Forguncyのページが重くなる原因はいくつか存在します。
ネットワーク速度やPCスペックなども一因ではありますが、Forguncyでの実装方法を検討することで改善するものもあります。
以下にForguncyでの実装が原因でページ表示が遅くなる代表的なものと、その要因・対策を簡潔にご紹介いたします。 

・日付やコンボボックスなどのセル型を多用している 

日付型セルやコンボボックス型セルは内部構造が複雑なため、多用するとページの表示に時間がかかることがあります。
この場合の対策方法は本記事の3.日付型セルの使用を減らす および4.コンボボックスのデータをテーブルから取得する で解説します。 

・ページでクエリーを何度も行っている 

リストビューにおいては、あらかじめページで使用するレコードを絞り込んでおくことで速度を改善できる可能性があります。 
こちらは本記事の5.リストビューにあらかじめクエリーを設定する で解説します。 

・リストビューのレコード件数が膨大 

リストビューのレコード件数が多いほど、最初の画面表示にかかる時間は多くなります。
こちらは下記の記事にて別途対策方法をご紹介しています。 

＞Forguncyドリル – データの読み込みを任意のタイミングにする 

3.日付型セルの使用を減らす 

日付型セルは、ページの表示時にカレンダーを内部で作成します。
そのため、同一ページ内に複数配置するとページロード時に大幅に時間がかかることがあります。
これは、日付型セルの指定が必要ない箇所(例えば入力項目の見出しといった文字)では、直接セルに文字を書き込むと表示速度を改善できる可能性があります。 

手順3-1.日付型セルを減らす 

日付型セルは、5つ以上ページに配置されていると動作が重いと感じやすくなります。
そのため本演習では値の変更が可能な日付型セル1つを残し、そのほかの読み取り専用指定がされているセルをセル型指定なしに戻し、セルの書式設定で対応します。
日付型のまま残すセルはM7セルです。 

まずE7セルを選択し、リボンの[ホーム]>[セル型]のドロップダウンから（なし）を選択します。 

E7セルを右クリックし、[セルの書式設定…]をクリックします。
セルの書式設定ウィンドウが開くので、「分類」を「日付」、「種類」を「2001/3/14」に変更します。 

U7セル、E10セル、M10セル、U10セルでも同様の操作を行います。 

4.コンボボックスのデータをテーブルから取得する 

コンボボックス型セルは内部構造が複雑なセルです。 
コンボボックス型セルに表示するデータをテーブルから取得する場合は、最初にドロップダウンを表示するときにデータを読み込みます。
この場合、ページ表示時のスピードも早く、同じテーブルがデータソースのコンボボックスが複数存在する際には内部的なデータソースが共有されダウンロードサイズも節約できるという利点があります。 

一方で、コンボボックス型セルに表示するデータをテーブルを使わずに入力して定義する場合は、ページ表示までのスピードが若干遅くなります。
そのうえ同じ内容のドロップダウンを持つコンボボックスが複数ある場合でも、内部的なデータソースは全て個別に管理され、ページ表示時のダウンロードサイズが増大してしまいます。
そのため、リストビューに表示しているデータの抽出など、既存のテーブルのデータを使用してコンボボックスを作成できる場合は、リスト項目の設定時にテーブルからデータを取得するようにすると動作が改善することがあります。 

手順4-1.リスト項目のデータをテーブルから取得する 

I14セルを選択します。
現在は右ペインの[リスト項目]欄に、空欄、第１システム課、第２システム課、営業１課、企画課の5項目がセットされています。
これらのデータは部署マスタに存在しているデータのため、入力値ではなくテーブルからデータを取得するように変更します。 

また、「未選択項目の追加」にもチェックを入れておきます。 

5.リストビューにあらかじめクエリーを設定する 

リストビューにデータを表示する際に、特定の部署のデータや特定の年月のデータのみが表示できればよいなど、テーブルデータを全件使用する必要がない場合には、あらかじめクエリーを設定しておくことでページロード時の負荷を軽減することができます。 

手順5-1.リストビューにクエリーを設定する 

リストビューを選択した状態でリボンの[リストビュー]>[デザイン]>[クエリー]をクリックします。 
クエリー条件ウィンドウが開きます。
既にI14セルに設定済みのコンボボックスでユーザーが表示データを任意のタイミングで絞り込めるような設定がしてあります。 

今回はページロード時、つまり既存のクエリーよりも早いタイミングで作動するクエリーの設定をしたいので、既存のクエリーよりも上に新しいクエリーを追加します。
新しい条件ボタンを押下し、▲ボタンを押下することでクエリーの順番の入れ替えができます。
クエリー条件は下記の通りに指定します。 

これで設定は完了です。 

6.デバッグを実行する 

デバッグを行うには、動作確認したいページを開いた状態でリボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。 

プロジェクトを実行すると、ページが表示されます。

対策前ページ、対策後ページをそれぞれデバッグ実行し、ページが開くまでの時間を確認してください。
例としてGoogle Chromeブラウザをお使いの場合は、デバッグ実行時にGoogle Chromeを指定し、F12キーを押下してNetworkタブを開き、以下の画像のような手順を踏むことでページロードにかかるおおよその時間を知ることができます。 

下図は本演習でご紹介した手順を1つずつ実装し、表示までにかかった時間の比較です。
実際の表示時間はネットワーク環境やPCスペックにより異なりますので、参考としてご覧ください。

ForguncyのUI部品についてもっと知る

Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。
こちらもぜひご活用ください。

＞開発スタートガイド – Forguncyで機能的なUIを作成する

＞Forguncyヘルプ – Forguncyの仕様と制限

＞Forguncyヘルプ – リストビュー

＞Forguncyヘルプ – リストビューの操作

＞Forguncyヘルプ – ロードオンデマンド機能の設定

＞ナレッジベース – [V8] ページの表示に時間がかかります

＞Forguncyヘルプ – アプリケーション