DataGridを自前実装する話

4,862 views

Published on

名古屋MS系秋祭り http://atnd.org/events/43243 のLT資料です、当日会場で1時間そこそこで書き上げたものなので、非常に雑です。

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,862
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
10
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

DataGridを自前実装する話

  1. 1. DataGridを自前実装する話 八木照朗 / terurou 2013/09/21
  2. 2. 自己紹介 • 無職です。 • 再来週ぐらいには社長になるらしいです。 • 定款の業務内容に飲食業を入れておく予定…
  3. 3. コミュニティ関係 • DSTokai • 東海地方のメタコミュニティ • http://go.dstokai.info/ • NGK2013B(2013/12/14開催) • 毎年恒例のクロスコミュニティ忘年会イベント • 昼の部:LT大会、夜の部:忘年会 • ここ数年は参加者100人前後 • スポンサー募集してます • 去年はなぜかCeBITさんもスポンサーに…
  4. 4. 技術背景 • クライアント技術が割と得意です。 • Silverlight, WPF, WinRT, HTML5/JavaScript, Android • 最近はHaxeの人みたいな扱いです。 • 分散システム, 分散KVSとかもできます。 • MSIL, ExpressionTreeをたしなむ程度に。 • 無職期間中にF#でHTTP/WebSocketサーバを 作って遊んでました。
  5. 5. DataGridと私 過去に4回ぐらい実装したことあります。 • HTML4/JavaScript, IE6, 1万行表示 • HTML4/JavaScript, IE6, Drag&Drop • Silverlight4, 1000列×100万行表示 • HTML5/JavaScript+Ext JS, 1000列×100万行表示
  6. 6. DataGridとは(おさらい 「Excelみたいな操作をしたいなー(はあと」
  7. 7. Excelみたいな機能? • セル直接入力 • Tabや入力確定で次のセルに飛ぶ • フィルタ, ソート • オートフィル • 条件付き書式 • 列の表示/非表示, 入れ替え • セル計算式 など
  8. 8. 「Excelみたいな操作がしたい」と言われたら 商用コンポーネントを使いましょう!!!
  9. 9. 商用コンポーネントのメリット • 「Excelみたいな」を9割ぐらいはカバー • どれだけ高くても100万円もあれば買える • 2人月より安い!!!
  10. 10. 商用コンポーネントではダメなケース • 政治的な理由 • 大本営が商用コンポーネントを使わない方針で確定 • 人月商売 • パフォーマンスの問題 • 1000行×100万行とか、対応できるものは皆無
  11. 11. 仕方ないので標準コントロールでどうにかする • WPF • 操作系のカスタムは必要だが割と悪くはない • Silverlight • パフォーマンスが壊滅的 • HTML/JavaScript • 標準コントロールってなんですか???
  12. 12. 仕方なく自前実装する際のポイント • マネジメント面 • 超ハイレベルなUIエンジニアを確保する • 開発期間は半年以上かかることを覚悟する • 意思決定が変更可能な時点での技術検証が必須 • 実装面 • データとビューは必ず分離する • 描画時の計算量を可能な限り減らす • データの遅延ロード・破棄
  13. 13. 超ハイレベルなUIエンジニアを確保する • 「Excelはどのように実装されているか」が ある程度は想像のつく人 • Observer, MVC(not Web)と言われてピンとくる • ダブルバッファリングと言われて… • セルの循環参照の検出と言わ… • 各プラットフォームの低レベル描画の知識必須 • HTML/JavaScript → DOMが遅い • XAML → UIの仮想化 • テキストの描画は遅い など
  14. 14. 開発期間は半年以上かかることを覚悟する 過去の経験から… • プロトタイプ+暫定APIの作成→3か月程度 • 安定化+APIの整備→3か月程度 ぐらいが最低ライン(当然、実装者に依存)
  15. 15. 意思決定が変更可能な時点での技術検証が必須 • プロジェクトが本格的に走り始めてからの 「やっぱりできません」は悲惨 • 最悪のケースでは人が死ぬ • 技術的・要員的に不可能だと分かった場合は 何らかの対応を取る
  16. 16. データとビューは必ず分離する • MVVC, DataBinding • ビューには低レベルな描画処理のみを記述
  17. 17. 描画時の計算量を可能な限り減らす • 1回だけ計算すればいい処理はキャッシュする • 各列の幅→全体の幅、各列のオフセット位置 • データ行数→全体の高さ • 見えてない部分は描画しない • いわゆるUIの仮想化 • 画面定義情報と表示オフセット計算の嵐… 実際に表示される部分
  18. 18. データの遅延ロード・破棄 • 「100万行を表示しろ」みたいな例 • 1行分のデータが1KByteと仮定 → 1GByte!! • 転送量・メモリ的にどう考えても無理 • 表示中のデータ+N件のデータだけ保持 • 1行ずつスクロール時は小分けにロード • 一気にスクロールした時はちょっと待たせる
  19. 19. まとめ • DataGridの自前実装はできるだけ避ける • ちょっとでも間違うと人が死ぬ • OSSのDataGridを解析して勉強する • 自分はSilverlight Toolkitはかなり参考にした • HTML/JavaScriptで参考になるものは見たことない • パフォーマンスに難があるものばっかだし… • どうしても自前実装しないといけない場合には 覚悟を決めましょう!!! • やばいときのお仕事の相談、お受けいたします。

×