SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Curlで構築する長崎電子県庁システム(DBメンテナンスツール編)(AD)

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

第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

連載2回目の本稿では、DBのデータを表示する際に生じた描画の遅さについて、その原因と解消方法を解説します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 画面構成が複雑でコントロールが多くなると、どうしても画面表示に時間がかかります。今回は画面表示を早くするために工夫したことについて書いていきます。

前回の記事

レスポンスが問題となったデータ入力画面

 データ一覧で選択したデータの詳細を表示して編集する画面です。

DBメンテナンスツールデータ編集画面
DBメンテナンスツールデータ編集画面

 テーブルのカラム数が少ない場合は問題ないのですが、多くなると表示まで2~3秒ほどの待ち時間が発生してしまいます。

表示方法

Tableを使用した表示

 Curlにはhtmlのテーブルと同じレイアウトが可能な「Table」があります。これは、表形式の表示には便利なため、当初はこの方式を利用してデータを表示していました。

Tableを使用した画面の例
Tableを使用した画面の例
Tableのロジック
{value
  let t:Table =
      {Table
          border-width = 1pt,
          vertical-line-width = 1pt,
          horizontal-line-width = 1pt,
          cell-border-color="#cccccc",
          background="#ffffff"}

  {t.add {cell background="#dcdcdc",ヘッダー1}, row=0, column=0}||背景色を変えることで、ヘッダーにみせることができます。
  {t.add {cell background="#dcdcdc",ヘッダー2}, row=0, column=1}
  {t.add {cell background="#dcdcdc",ヘッダー3}, row=0, column=2}
    
  {t.add "(1,0)のセル", row=1, column=0}
  {t.add "(1,1)のセル", row=1, column=1}
  {t.add "(1,2)のセル", row=1, column=2}

  {t.add "(2,0)のセル右と結合",colspan=2, row=2, column=0}

  {t.add "(2,2)のセル下と結合", rowspan=2,row=2, column=2}

  {t.add "(3,0)のセル", row=3, column=0}
  {t.add "(3,1)のセル", row=3, column=1}

  t
}

 しかし、テーブルのカラム数が少ない場合は良いのですが、カラムが100を超えるものになってくると、レスポンスが悪くなります。ボトルネックがどこにあるのかを調査したところ、画面に表示する処理がその原因であることが分かりました。

 Curlでは(ほとんどの言語共通かもしれませんが)、コントロールを作成するのは瞬時でも、表示にはどうしても時間がかかってしまいます。このままでは「軽快に動く」を実現できないので、違う方法を試すことにしました。

次のページ
解決方法

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Curlで構築する長崎電子県庁システム(DBメンテナンスツール編)連載記事一覧

もっと読む

この記事の著者

株式会社ドゥアイネット 湯川栄太(ドゥアイネット ユカワエイタ)

【湯川栄太】株式会社ドゥアイネットに勤務するプログラマーです。CurlやFlexを使ってRIAの開発を担当しています。最近はマッシュアップに興味があります。開発日記http://blog.doinet.co.jp/CurlApplication Award2006http://www.curlap.com/award2006/index.htmlMashupAward4http://mashupaward.jp/entry_list/?posted=316

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3406 2009/01/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング