none
処理中のマウスカーソル制御について

    質問

  • お世話になります。

    以下の環境で開発した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日 8:57

すべての返信

  • 30秒以上を要するのはUIとして異常です。非同期に処理することを強くお勧めします。例えば3秒以内に表示できればマウスカーソルを変更する処理そのものが不要になると思います。

    <form id="frmWebReport">~</form>となっていると思いますが、この閉じタグ以降であれば「document.getElementById('frmWebReport').style.cursor」の式は有効です。この方法を使えばPage_Load()が実行されるよりも前に変更できます。

    アニメーションGIFでなくアニメーションカーソル(.ani)形式を使用したらどうなりますか?

    2012年5月17日 9:31
  • 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月20日 11:22
  • 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日 1:45
  • まずは生のタグで100桁×1000行のレンダリングにどれほどかかり
    そういうことだったんですね。理解しました。申し訳ありません。

    上記について次の2環境にて確認を行いました。1000x100です。

    ①Win7 & IE9
    Core i7(3.07GHz)
    →結果は1秒未満

    ②Win7 & IE8(vmware)
    →結果は2秒前後

    tableまで含めてスクラッチとすると、十分な改善の見込みがありそうです。
     

    ところでcursorには.ANIが使えると書かれていますが、ダメでしたか?もっとも「Windows7標準の青色でくるくる回るマウスカーソル」を実現するなら wait を指定した方が効率いいでしょう。

    うーん。ダメ?でした。なんだか、なったりならなかったり、勝手に元に戻ったりしませんかね?
    このカーソルが変わる(または元に戻る)条件は結構複雑そうに思えました。

    2012年5月21日 13:59