30
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

OSSのノーコード・ローコード開発ツール「プリザンター」Advent Calendar 2024

Day 6

プリザンターで画面表示が遅いなと思ったら・・・

Last updated at Posted at 2024-12-05

概要

プリザンターを使い続けると画面表示が遅くなったように感じることがあるかもしれません。そんなパフォーマンスの課題について、対処策とまではいきませんが今までの経験を踏まえたTips的なことをお伝えしたいと思います。

1. エディタの設定

プリザンターは基本的な仕組みとしてサーバ側で表示するHTMLをすべて組み立ててクライアントに送信しています。そのため、組み立てるHTMLの簡素化を行うことでパフォーマンスの改善が期待できます。

1-1. 「検索機能を使う」をONにする

特に他テーブルをリンクした場合に有効な対処方法です。
分類項目の選択肢を設定すると通常はドロップダウンリストとなります。HTMLとしてはselectタグで選択肢の分だけoption要素が生成されます。
そのため、編集画面上に他テーブルリンクの分類項目が多い場合や、選択肢の数が多い(上限500件1)場合、selectタグを生成するためのデータ取得およびHTML生成の処理に時間がかかります。
「検索機能を使う」をONにすると、ドロップダウンリストではなく、検索ダイアログの表示となります。htmlとしてselectタグの生成は行わないため、選択肢生成のためのデータ取得処理などがスキップされますので、結果としてパフォーマンスが改善する可能性が高くなります。
なお、この設定は編集画面の他、一覧画面のフィルタでも有効ですので、編集画面と一覧画面両方のパフォーマンス改善が期待できます。
image.png

1-2. リンク情報を非表示にする

1-1.と同様に他テーブルをリンクした場合で、特にリンク元レコード(子レコード)の件数が多い場合に有効です。
デフォルトの設定では、リンク関係を設定し親テーブル、子テーブルにレコードを登録すると、画面下部に「リンク」としてリンク元/先のレコードが一覧で表示します。この表示を行うためにリンク元/先のテーブルからリンクしている/されているレコードを取得する処理とHTMLを生成する処理、またクライアント側でHTMLを描画する処理が実行されますので、リンクを非表示にすることでパフォーマンスが改善する可能性が高くなります。
リンク情報を非表示にするには「エディタの管理」の「リンクを表示しない」にチェックします。
image.png

1-3. テーブル構成をシンプルにする

こちらもリンクに関連した内容です。プリザンターの基本的な仕組みとしてテーブルを開く際にサイトの構成情報を読み込みますが、その際、リンク元/先の情報を読み込みます。この読み込みは「親の親の親の・・・」「子の子の子の・・・」とリンクがつながっているテーブルを全て探索する仕組みとなっています。そのため、テーブル構成が複雑なほど読み込みに時間がかかる傾向になりますので、可能な限りシンプルな構成にしたほうがパフォーマンス向上につながります。

2. スクリプトの設定

特に画面表示時点で $p.apiGet などで他テーブルに対するデータ操作を行う場合は注意が必要です。 $p.apiGet などは内部的にはプリザンター自身に対してAPIを実行するため、実装内容によってはサーバ側から処理結果が返ってくるまで画面表示が待たされる場合があります。

3. サーバスクリプトの設定

サーバスクリプトは一覧画面、編集画面の表示において下記の順序で各条件が呼び出されます。条件の設定次第で画面表示のタイミングで同じ処理が複数回呼び出される可能性もあり、その結果パフォーマンスに影響する場合があります。条件の呼び出し順序とそれぞれの条件で実行したい処理内容を適切に見極め、サーバスクリプトを設定することでパフォーマンス改善が期待できます。

一覧画面表示の実行順

  1. サイト設定の読み込み時
  2. ビュー処理時
  3. 画面表示の前
    ~以降はレコード件数分繰り返し実行~
  4. レコード読み込み時
  5. 行表示の前

編集画面表示時(新規登録時)

  1. サイト設定の読み込み時
  2. 計算式の前
  3. 計算式の後
  4. 画面表示の前

編集画面表示時(登録済みレコード表示時)

  1. サイト設定の読み込み時
  2. ビュー処理時
  3. レコード読み込み時
  4. ビュー処理時
  5. 画面表示の前

4. 基盤スペックの見直し

プリザンターはスモールスタートできる点がメリットですが、利用規模が拡大するにつれてスタート時点の基盤スペックでは不足してくる場合もあります。その際は基盤のスペックアップをご検討ください。
基盤の更改は多くの課題があるので画面設定など違い気軽に対応できるものではありませんが、システムを快適に利用するためにはユーザ数・データ量など利用規模に見合った基盤を準備することが大切です。

まとめ

以上記載した内容のまとめになります。
このTipsをやれば必ず改善するわけではありませんのでその点はご了承願います。

  • 「検索機能を使う」をONにする
  • 「リンク情報」を非表示にする
  • テーブル間のリンク関係をシンプルにする
  • スクリプト $p.apiGet などのAPI実行メソッドは画面表示のタイミングでは極力使用しない
  • サーバスクリプトは各条件で必要な処理が実行するように見極める
  • 基盤のスペックアップも検討する

最後に

今年もプリザンターご利用いただきありがとうございました。より皆様に使っていただける魅力のある製品にするべく取り組んでいきますので、ぜひご期待ください。
来年もプリザンターをよろしくお願いします。

  1. General.jsonの「DropDownSearchPageSize」で設定変更できます。

30
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?