Submit Search
Upload
DataGridを自前実装する話
•
9 likes
•
8,308 views
T
terurou
Follow
名古屋MS系秋祭り http://atnd.org/events/43243 のLT資料です、当日会場で1時間そこそこで書き上げたものなので、非常に雑です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 19
Download now
Download to read offline
Recommended
きつねさんでもわかるLlvm読書会 第2回
きつねさんでもわかるLlvm読書会 第2回
Tomoya Kawanishi
いまさら聞けないarmを使ったNEONの基礎と活用事例
いまさら聞けないarmを使ったNEONの基礎と活用事例
Fixstars Corporation
大画面 e-Paperでどハマりした話
大画面 e-Paperでどハマりした話
Hitoshi Kikuchi
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
組み込み関数(intrinsic)によるSIMD入門
組み込み関数(intrinsic)によるSIMD入門
Norishige Fukushima
Glibc malloc internal
Glibc malloc internal
Motohiro KOSAKI
20191115-PGconf.Japan
20191115-PGconf.Japan
Kohei KaiGai
C/C++プログラマのための開発ツール
C/C++プログラマのための開発ツール
MITSUNARI Shigeo
Recommended
きつねさんでもわかるLlvm読書会 第2回
きつねさんでもわかるLlvm読書会 第2回
Tomoya Kawanishi
いまさら聞けないarmを使ったNEONの基礎と活用事例
いまさら聞けないarmを使ったNEONの基礎と活用事例
Fixstars Corporation
大画面 e-Paperでどハマりした話
大画面 e-Paperでどハマりした話
Hitoshi Kikuchi
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
組み込み関数(intrinsic)によるSIMD入門
組み込み関数(intrinsic)によるSIMD入門
Norishige Fukushima
Glibc malloc internal
Glibc malloc internal
Motohiro KOSAKI
20191115-PGconf.Japan
20191115-PGconf.Japan
Kohei KaiGai
C/C++プログラマのための開発ツール
C/C++プログラマのための開発ツール
MITSUNARI Shigeo
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII
条件分岐とcmovとmaxps
条件分岐とcmovとmaxps
MITSUNARI Shigeo
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
Takateru Yamagishi
AWSでGPUも安く大量に使い倒せ
AWSでGPUも安く大量に使い倒せ
Yasuhiro Matsuo
Java8でRDBMS作ったよ
Java8でRDBMS作ったよ
なおき きしだ
InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)
Takanori Sejima
プログラムを高速化する話
プログラムを高速化する話
京大 マイコンクラブ
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
冬のLock free祭り safe
冬のLock free祭り safe
Kumazaki Hiroki
Apache Arrow - データ処理ツールの次世代プラットフォーム
Apache Arrow - データ処理ツールの次世代プラットフォーム
Kouhei Sutou
KiCadで雑に基板を作る チュートリアル
KiCadで雑に基板を作る チュートリアル
裕士 常田
Lockfree Queue
Lockfree Queue
Kumazaki Hiroki
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
Kohei Tokunaga
Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介
torisoup
実践 NestJS
実践 NestJS
Ayumi Goto
tf,tf2完全理解
tf,tf2完全理解
Koji Terada
例外設計における大罪
例外設計における大罪
Takuto Wada
大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方
hibiki443
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
sairoutine
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
Tadahiro Ishisaka
altJSの選び方
altJSの選び方
terurou
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
Yukihito Kataoka
More Related Content
What's hot
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII
条件分岐とcmovとmaxps
条件分岐とcmovとmaxps
MITSUNARI Shigeo
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
Takateru Yamagishi
AWSでGPUも安く大量に使い倒せ
AWSでGPUも安く大量に使い倒せ
Yasuhiro Matsuo
Java8でRDBMS作ったよ
Java8でRDBMS作ったよ
なおき きしだ
InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)
Takanori Sejima
プログラムを高速化する話
プログラムを高速化する話
京大 マイコンクラブ
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
冬のLock free祭り safe
冬のLock free祭り safe
Kumazaki Hiroki
Apache Arrow - データ処理ツールの次世代プラットフォーム
Apache Arrow - データ処理ツールの次世代プラットフォーム
Kouhei Sutou
KiCadで雑に基板を作る チュートリアル
KiCadで雑に基板を作る チュートリアル
裕士 常田
Lockfree Queue
Lockfree Queue
Kumazaki Hiroki
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
Kohei Tokunaga
Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介
torisoup
実践 NestJS
実践 NestJS
Ayumi Goto
tf,tf2完全理解
tf,tf2完全理解
Koji Terada
例外設計における大罪
例外設計における大罪
Takuto Wada
大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方
hibiki443
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
sairoutine
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
Tadahiro Ishisaka
What's hot
(20)
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
条件分岐とcmovとmaxps
条件分岐とcmovとmaxps
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
AWSでGPUも安く大量に使い倒せ
AWSでGPUも安く大量に使い倒せ
Java8でRDBMS作ったよ
Java8でRDBMS作ったよ
InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)
プログラムを高速化する話
プログラムを高速化する話
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
冬のLock free祭り safe
冬のLock free祭り safe
Apache Arrow - データ処理ツールの次世代プラットフォーム
Apache Arrow - データ処理ツールの次世代プラットフォーム
KiCadで雑に基板を作る チュートリアル
KiCadで雑に基板を作る チュートリアル
Lockfree Queue
Lockfree Queue
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介
実践 NestJS
実践 NestJS
tf,tf2完全理解
tf,tf2完全理解
例外設計における大罪
例外設計における大罪
大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
Similar to DataGridを自前実装する話
altJSの選び方
altJSの選び方
terurou
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
Yukihito Kataoka
高校生がイベントを作るということ
高校生がイベントを作るということ
Shoot Morii
デブサミ2013の明後日な楽しみ方
デブサミ2013の明後日な楽しみ方
陽一 滝川
20111205 駒澤大学講演プレゼン2
20111205 駒澤大学講演プレゼン2
眞之介 shinnosuke 広瀬 hirose
第19回せきゅぽろLT
第19回せきゅぽろLT
irasally omuko
html5j最新情報
html5j最新情報
Saki Homma
20141120 クラウドが破壊するもの、生み出すもの
20141120 クラウドが破壊するもの、生み出すもの
Seiji Akatsuka
マルチクラウドDWH(Snowflake)のすすめ
マルチクラウドDWH(Snowflake)のすすめ
Yuuta Hishinuma
Groonga導入事例−地域コミュニティサイトLOHABUU
Groonga導入事例−地域コミュニティサイトLOHABUU
Satoshi Kinokuni
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
Masayuki Ishikawa
Similar to DataGridを自前実装する話
(11)
altJSの選び方
altJSの選び方
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
高校生がイベントを作るということ
高校生がイベントを作るということ
デブサミ2013の明後日な楽しみ方
デブサミ2013の明後日な楽しみ方
20111205 駒澤大学講演プレゼン2
20111205 駒澤大学講演プレゼン2
第19回せきゅぽろLT
第19回せきゅぽろLT
html5j最新情報
html5j最新情報
20141120 クラウドが破壊するもの、生み出すもの
20141120 クラウドが破壊するもの、生み出すもの
マルチクラウドDWH(Snowflake)のすすめ
マルチクラウドDWH(Snowflake)のすすめ
Groonga導入事例−地域コミュニティサイトLOHABUU
Groonga導入事例−地域コミュニティサイトLOHABUU
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
More from terurou
Webブラウザ上で動作する帳票エンジンを作る話
Webブラウザ上で動作する帳票エンジンを作る話
terurou
自社サービスでDurable Functionsを採用した話
自社サービスでDurable Functionsを採用した話
terurou
Computation Expressions for Haxe
Computation Expressions for Haxe
terurou
デンキヤギの採用の考え方
デンキヤギの採用の考え方
terurou
Vue.jsをhaxeで
Vue.jsをhaxeで
terurou
MQTTとAMQPと.NET
MQTTとAMQPと.NET
terurou
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
terurou
動的なILの生成と編集
動的なILの生成と編集
terurou
FIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScript
terurou
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
terurou
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
Metro Style AppsでMSILver.2012/06/09
Metro Style AppsでMSILver.2012/06/09
terurou
Metro Style AppsでMSIL
Metro Style AppsでMSIL
terurou
Yet Another DLR for Silverlightの試作
Yet Another DLR for Silverlightの試作
terurou
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
terurou
CommonJSの話
CommonJSの話
terurou
Scala×silverlight
Scala×silverlight
terurou
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
Iron Python / Iron Ruby で .NET Programming
Iron Python / Iron Ruby で .NET Programming
terurou
クラウドGPS(仮)
クラウドGPS(仮)
terurou
More from terurou
(20)
Webブラウザ上で動作する帳票エンジンを作る話
Webブラウザ上で動作する帳票エンジンを作る話
自社サービスでDurable Functionsを採用した話
自社サービスでDurable Functionsを採用した話
Computation Expressions for Haxe
Computation Expressions for Haxe
デンキヤギの採用の考え方
デンキヤギの採用の考え方
Vue.jsをhaxeで
Vue.jsをhaxeで
MQTTとAMQPと.NET
MQTTとAMQPと.NET
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
動的なILの生成と編集
動的なILの生成と編集
FIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScript
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
大規模なJavaScript開発の話
大規模なJavaScript開発の話
Metro Style AppsでMSILver.2012/06/09
Metro Style AppsでMSILver.2012/06/09
Metro Style AppsでMSIL
Metro Style AppsでMSIL
Yet Another DLR for Silverlightの試作
Yet Another DLR for Silverlightの試作
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
CommonJSの話
CommonJSの話
Scala×silverlight
Scala×silverlight
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
Iron Python / Iron Ruby で .NET Programming
Iron Python / Iron Ruby で .NET Programming
クラウドGPS(仮)
クラウドGPS(仮)
Recently uploaded
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
sugiuralab
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
sugiuralab
Recently uploaded
(7)
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
DataGridを自前実装する話
1.
DataGridを自前実装する話 八木照朗 / terurou 2013/09/21
2.
自己紹介 • 無職です。 • 再来週ぐらいには社長になるらしいです。 •
定款の業務内容に飲食業を入れておく予定…
3.
コミュニティ関係 • DSTokai • 東海地方のメタコミュニティ •
http://go.dstokai.info/ • NGK2013B(2013/12/14開催) • 毎年恒例のクロスコミュニティ忘年会イベント • 昼の部:LT大会、夜の部:忘年会 • ここ数年は参加者100人前後 • スポンサー募集してます • 去年はなぜかCeBITさんもスポンサーに…
4.
技術背景 • クライアント技術が割と得意です。 • Silverlight,
WPF, WinRT, HTML5/JavaScript, Android • 最近はHaxeの人みたいな扱いです。 • 分散システム, 分散KVSとかもできます。 • MSIL, ExpressionTreeをたしなむ程度に。 • 無職期間中にF#でHTTP/WebSocketサーバを 作って遊んでました。
5.
DataGridと私 過去に4回ぐらい実装したことあります。 • HTML4/JavaScript, IE6,
1万行表示 • HTML4/JavaScript, IE6, Drag&Drop • Silverlight4, 1000列×100万行表示 • HTML5/JavaScript+Ext JS, 1000列×100万行表示
6.
DataGridとは(おさらい 「Excelみたいな操作をしたいなー(はあと」
7.
Excelみたいな機能? • セル直接入力 • Tabや入力確定で次のセルに飛ぶ •
フィルタ, ソート • オートフィル • 条件付き書式 • 列の表示/非表示, 入れ替え • セル計算式 など
8.
「Excelみたいな操作がしたい」と言われたら 商用コンポーネントを使いましょう!!!
9.
商用コンポーネントのメリット • 「Excelみたいな」を9割ぐらいはカバー • どれだけ高くても100万円もあれば買える •
2人月より安い!!!
10.
商用コンポーネントではダメなケース • 政治的な理由 • 大本営が商用コンポーネントを使わない方針で確定 •
人月商売 • パフォーマンスの問題 • 1000行×100万行とか、対応できるものは皆無
11.
仕方ないので標準コントロールでどうにかする • WPF • 操作系のカスタムは必要だが割と悪くはない •
Silverlight • パフォーマンスが壊滅的 • HTML/JavaScript • 標準コントロールってなんですか???
12.
仕方なく自前実装する際のポイント • マネジメント面 • 超ハイレベルなUIエンジニアを確保する •
開発期間は半年以上かかることを覚悟する • 意思決定が変更可能な時点での技術検証が必須 • 実装面 • データとビューは必ず分離する • 描画時の計算量を可能な限り減らす • データの遅延ロード・破棄
13.
超ハイレベルなUIエンジニアを確保する • 「Excelはどのように実装されているか」が ある程度は想像のつく人 • Observer,
MVC(not Web)と言われてピンとくる • ダブルバッファリングと言われて… • セルの循環参照の検出と言わ… • 各プラットフォームの低レベル描画の知識必須 • HTML/JavaScript → DOMが遅い • XAML → UIの仮想化 • テキストの描画は遅い など
14.
開発期間は半年以上かかることを覚悟する 過去の経験から… • プロトタイプ+暫定APIの作成→3か月程度 • 安定化+APIの整備→3か月程度 ぐらいが最低ライン(当然、実装者に依存)
15.
意思決定が変更可能な時点での技術検証が必須 • プロジェクトが本格的に走り始めてからの 「やっぱりできません」は悲惨 • 最悪のケースでは人が死ぬ •
技術的・要員的に不可能だと分かった場合は 何らかの対応を取る
16.
データとビューは必ず分離する • MVVC, DataBinding •
ビューには低レベルな描画処理のみを記述
17.
描画時の計算量を可能な限り減らす • 1回だけ計算すればいい処理はキャッシュする • 各列の幅→全体の幅、各列のオフセット位置 •
データ行数→全体の高さ • 見えてない部分は描画しない • いわゆるUIの仮想化 • 画面定義情報と表示オフセット計算の嵐… 実際に表示される部分
18.
データの遅延ロード・破棄 • 「100万行を表示しろ」みたいな例 • 1行分のデータが1KByteと仮定
→ 1GByte!! • 転送量・メモリ的にどう考えても無理 • 表示中のデータ+N件のデータだけ保持 • 1行ずつスクロール時は小分けにロード • 一気にスクロールした時はちょっと待たせる
19.
まとめ • DataGridの自前実装はできるだけ避ける • ちょっとでも間違うと人が死ぬ •
OSSのDataGridを解析して勉強する • 自分はSilverlight Toolkitはかなり参考にした • HTML/JavaScriptで参考になるものは見たことない • パフォーマンスに難があるものばっかだし… • どうしても自前実装しないといけない場合には 覚悟を決めましょう!!! • やばいときのお仕事の相談、お受けいたします。
Download now