CodeZine(コードジン)

特集ページ一覧

Curlで構築する長崎電子県庁システム(DBメンテナンスツール)
データ表示パフォーマンスの向上

第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

TableとRecordGridの速度比較

 下図のように1000行を表示するプログラムを「Table」、「RecordGrid」を使ってそれぞれ作成し、速度を比較してみました。

RecordGridを使用した画面
RecordGridを使用した画面
Tableを使った場合のロジック
||StopWatchクラスで処理時間計測開始
{let v_sw:StopWatch = {StopWatch}}
{v_sw.start}

{let v_tbl:Table = {Table
                     border-width = 1pt,
                     vertical-line-width = 1pt,
                     horizontal-line-width = 1pt,
                     cell-border-color="#cccccc",
                     background="#ffffff"}}

{for x:int=1 to 1001 do
  ||1行面は見出し
  {if x == 1 then
    {v_tbl.add
      {row-prototype height=20pt,
        {cell background="#B0D0FF",
          {TextFlowBox width = 150pt, "カラム名"}
        },
        {cell background="#B0D0FF",
          {TextFlowBox width = 150pt, "データ"}
        }
      }
    }
  else
    {v_tbl.add
      {row-prototype height=20pt,
        {cell
          {TextFlowBox width = 150pt, "カラム名" & (x - 1)}
        },
        {cell 
          {TextField width = 150pt}
        }
      }
    }
  }
}

{let v_box:ScrollBox = {ScrollBox width = 330,height = 300,v_tbl}}
{value v_box}
||処理時間出力
{output "Tableを使って作成:" & {v_sw.elapsed} & "で表示完了"}
RecordGridを使った場合のロジック
||RecordGridのセルにコントロールをセットするためのclass定義----------
{define-class public open anyCell {inherits StandardRecordGridCell}

  {constructor public {default}
     {construct-super}
     set self.margin =2pt
  }

  {method public open {refresh-data}:void
    {self.clear}
    let (data:any, valid?:bool) = {self.get-data}
    {self.add-internal data}
  }
}
||RecordGridのセルにコントロールをセットするためのclass定義----------END

||StopWatchクラスで処理時間計測開始
{let v_sw:StopWatch = {StopWatch}}
{v_sw.start}

{let v_box:VBox = {VBox}}

{let v_recFieldsArray:{Array-of RecordField} = {new {Array-of RecordField}}}

||RecordGridのフィールド(列)定義
{v_recFieldsArray.append
  {RecordField "colName",caption="列名", domain = any}
}
{v_recFieldsArray.append
  {RecordField "dataField",caption="データ", domain = any}
}

||RecordGridのフィールド(列)の型定義(ここのcell-specでカスタムセルを指定してコントロールを表示する)
{let v_recGridColumnArray:{Array-of RecordGridColumn} = {new {Array-of RecordGridColumn}}}

{v_recGridColumnArray.append
  {RecordGridColumn "colName", sort-spec=null,cell-spec=anyCell,width=150pt}
}
{v_recGridColumnArray.append
  {RecordGridColumn "dataField", sort-spec=null,cell-spec=anyCell,width=150pt}
}

||RecordFieldをもとにRecordSetを作成
{let v_recSet:RecordSet = {RecordSet {RecordFields {splice v_recFieldsArray}}}}

||RecordSetに1000件のデータを追加
{for x:int=1 to 1000 do

  let v_record:RecordData = {RecordData}

  {v_record.set
    "colName",
     {TextFlowBox width = 150pt, "カラム名" & x}
  }
  
  {v_record.set
    "dataField",
     {TextField width = 150pt}
  }
  
  {v_recSet.append v_record}
}

||RecordField,RecordGridColumn,RecordSetをもとにRecordGridを作成
{let v_recGrid:RecordGrid = {RecordGrid
                            grid-line-color = "#758294",
                            alternate-row-background = "#E1E1E1",
                            select-current-record? = false,
                            cells-take-focus? = false ,
                            width = 320,
                            height = 300,
                            header-options ={RecordGridRowOptions
                                              background = "#B0D0FF",halign = "left"},
                            background="white",
                            record-source = v_recSet,
                            display-navigation-panel? = false,
                            display-record-selectors? = false,
                            {splice v_recGridColumnArray}}
}

{value v_box}
{v_box.add v_recGrid}

||処理時間出力
{output "RecordGridを使って作成:" & {v_sw.elapsed} & "で表示完了"}

 この結果は、Tableを使った場合が「1.063秒」で、RecordGridの場合が「0.091s」でした。 次に、データ件数を100件に減らして試してみたところ、Tableが「0.093秒」、RecordGridの場合が「0.019s」でした。

 以上の結果から、RecordGridを使うと、データ件数の増減から受ける影響はさほどなく、ほぼ同じレスポンスで処理できることがわかります。

まとめ

 画面描画にかかる時間を短縮したい場合、配置するコントロールの数を少なくするのが1番ですが、そうもいかない場合は「TabContainer」や「RecordGrid」の利用を検討してみてはいかがでしょうか。また、よく確認すると「HBox」や「VBox」など必要のないコンテナが画面に含まれている場合もあります。こういったものもレスポンスを悪くする原因になるので、画面のコントロールを今一度見直してみると、改善につながるかもしれません。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

バックナンバー

連載:Curlで構築する長崎電子県庁システム(DBメンテナンスツール編)
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5