処理中のマウスカーソル制御について
-
2012年5月17日 8:57お世話になります。
以下の環境で開発したWebアプリケーションをIISに配置しています。
(開発環境)
ASP.NET3.5
C#.NET
OS:Windows 7 SP1
Memory:4G
CPU:Core i3
HDD:250GB
(WebServer)
OS:Windows Server 2008 R2
Memory:6G
CPU:Core i5
HDD:250GB
WebServer:IIS7.5
(Client)
OS:Windows 7 SP1
Memory:4G
CPU:Core i3
HDD:250GB
IE:8,9
(WebApplication)
・ブラウザで要求された表データを表示する機能のみ。
・同期通信のみ行う。Ajaxのような非同期通信は行わない。
・画面はスクラッチ開発。サードパーティ製コントロールの使用はない。
・表の表示の際、行ヘッダ・列ヘッダを固定する必要がある為、
superTableを用いて実現している。
・表データは1000行×100列以上を表示する。表示完了までに30秒以上を要する。
・CSSは画面の冒頭(</head>の直前)で実行している。
・javascriptは画面の最後部(</HTML>の直前)で実行している。
・ブラウザから表示要求があるとマウスカーソルを変更して
処理中であることを認識させている(Windows7標準の
青色でくるくる回るマウスカーソル)。
Page_Load()内で以下のコードをセットし、カーソルを変更している。
「this.frmWebReport.Style.Add(CCommonDataDefine.STR_CURSOR_TITLE, CCommonDataDefine.STR_CURSOR_WAIT);」
カーソルを戻す処理は、javascriptファイルに以下のコードをセットしている。
「document.getElementById('frmWebReport').style.cursor = "default";」
【やりたいこと】
ブラウザからWebサーバーに要求があった直後~表データのブラウザでのレンダリングが完了する間、
途切れることなくマウスカーソルを処理中の状態で表示させたい。
【現状】
・1000行×100列以上のデータを表示しようとすると、マウスカーソルが処理中になるまで数十秒以上を要するが、
マウスカーソルが「処理中→デフォルト→処理中」のように異なる状態を行き来する。
・マウスカーソルではなくアニメーションGIF実装で動作確認をしたところ、GIFが表示されなかったりGIFが表示されるものの
アニメーション効果がなく静止画のように表示される(動いていない)。
何かお分かりになる方いらっしゃいましたら、ご指摘等お願いします。
すべての返信
-
2012年5月17日 9:31
30秒以上を要するのはUIとして異常です。非同期に処理することを強くお勧めします。例えば3秒以内に表示できればマウスカーソルを変更する処理そのものが不要になると思います。
<form id="frmWebReport">~</form>となっていると思いますが、この閉じタグ以降であれば「document.getElementById('frmWebReport').style.cursor」の式は有効です。この方法を使えばPage_Load()が実行されるよりも前に変更できます。
アニメーションGIFでなくアニメーションカーソル(.ani)形式を使用したらどうなりますか?
-
2012年5月20日 11:22
fireclackerさん。こんにちは。
・1000行×100列以上のデータを表示しようとすると、マウスカーソルが処理中になるまで数十秒以上を要するが、
マウスカーソルが「処理中→デフォルト→処理中」のように異なる状態を行き来する。
限られた制限のなかで、
30秒の読み込みを感じさせないような、または緩和させる手段が欲しくて、
その対応案の1つとして、Page_LoadでfrmWebReport.Style.Add(おそらくstyle属性のcursorの変更)によってマウスカーソルを「処理中」に出来ないかとやってみると、
「処理中」でなく、「処理中」と「デフォルト」を行き来する動作になってしまうとのことですね。
・・・実装は知りませんが、UIスレッドがどうのこうのあって現状難しく、firecrackerさんの制限事項(非同期処理かプラグイン)を許可しないと無理かなと思ってます。
レイアウトに時間かかっていると考えられ、その場合カーソルもアニメgifも有効にならないという認識です。
google docsのスプレッドシートでも今の初期値は100x20となっており、一度にその50倍以上のセル数というのは難しいのかもしれませんね。(1セル=1要素としても)
アニメーションカーソルは手元では、アニメーション効果はありませんでした。
# 表示だけならImageMagic(.net)で1000x100の表自体を画像化とか? -
2012年5月21日 1:45
Google Docsを比較に持ち出すのはちょっと違うと思います。Google Docsは各セルを編集可能ですが、利用されているsuperTableは閲覧専用です。(´・ω・`)さんならお分かりだとは思いますが、閲覧専用と編集可能なものとでは、DOM構造やイベントハンドラなど異なってくるはずで、それにかかるコストもかなり違うかなと。
まずは生の<TABLE>タグで100桁×1000行のレンダリングにどれほどかかり、それに対してUIの利便性 : レンダリングコストを見ながら実装していくべきかなと。加えてsuperTableのサイトはここでいいのかな? 対象ブラウザーを見ると IE5.5+(Windows 2000を含まずWindows ME以降) その他と書かれています。それに対して質問者さんの環境はIE8、9です。IE5.5とIE8とでは環境にギャップがありすぎます。例えば使えるCSSセレクターやプロパティ(こっちはIE10も含むけど現時点ではいろいろ間違ってる)に違いがありすぎます。これではパフォーマンスも出ないでしょう。
ところでcursorには.ANIが使えると書かれていますが、ダメでしたか? もっとも「Windows7標準の青色でくるくる回るマウスカーソル」を実現するなら wait を指定した方が効率いいでしょう。
-
2012年5月21日 13:59
まずは生のタグで100桁×1000行のレンダリングにどれほどかかり
そういうことだったんですね。理解しました。申し訳ありません。
上記について次の2環境にて確認を行いました。1000x100です。
①Win7 & IE9
Core i7(3.07GHz)
→結果は1秒未満②Win7 & IE8(vmware)
→結果は2秒前後tableまで含めてスクラッチとすると、十分な改善の見込みがありそうです。
ところでcursorには.ANIが使えると書かれていますが、ダメでしたか?もっとも「Windows7標準の青色でくるくる回るマウスカーソル」を実現するなら wait を指定した方が効率いいでしょう。
うーん。ダメ?でした。なんだか、なったりならなかったり、勝手に元に戻ったりしませんかね?
このカーソルが変わる(または元に戻る)条件は結構複雑そうに思えました。

