Submit Search
Upload
DataGridを自前実装する話
•
9 likes
•
8,309 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
カスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについて
alwei
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
Takuto Wada
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
プログラムを高速化する話
プログラムを高速化する話
京大 マイコンクラブ
目grep入門 +解説
目grep入門 +解説
murachue
Recommended
カスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについて
alwei
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
Takuto Wada
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
プログラムを高速化する話
プログラムを高速化する話
京大 マイコンクラブ
目grep入門 +解説
目grep入門 +解説
murachue
規格書で読むC++11のスレッド
規格書で読むC++11のスレッド
Kohsuke Yuasa
C++の黒魔術
C++の黒魔術
Daichi OBINATA
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
できる!並列・並行プログラミング
できる!並列・並行プログラミング
Preferred Networks
ゲーム開発者のための C++11/C++14
ゲーム開発者のための C++11/C++14
Ryo Suzuki
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
infinite_loop
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
Mikiya Okuno
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
中3女子でもわかる constexpr
中3女子でもわかる constexpr
Genya Murakami
SQLアンチパターン - ナイーブツリー
SQLアンチパターン - ナイーブツリー
ke-m kamekoopa
grpc-haskell.pdf
grpc-haskell.pdf
Kousuke Ruichi
MySQLテーブル設計入門
MySQLテーブル設計入門
yoku0825
その文字列検索、std::string::findだけで大丈夫ですか?【Sapporo.cpp 第8回勉強会(2014.12.27)】
その文字列検索、std::string::findだけで大丈夫ですか?【Sapporo.cpp 第8回勉強会(2014.12.27)】
Hiro H.
Redis勉強会資料(2015/06 update)
Redis勉強会資料(2015/06 update)
Yuji Otani
PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜
PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜
Preferred Networks
Java8でRDBMS作ったよ
Java8でRDBMS作ったよ
なおき きしだ
マイクロアドにおけるCTR予測への取り組み
マイクロアドにおけるCTR予測への取り組み
MicroAd, Inc.(Engineer)
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
altJSの選び方
altJSの選び方
terurou
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
Yukihito Kataoka
More Related Content
What's hot
規格書で読むC++11のスレッド
規格書で読むC++11のスレッド
Kohsuke Yuasa
C++の黒魔術
C++の黒魔術
Daichi OBINATA
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
できる!並列・並行プログラミング
できる!並列・並行プログラミング
Preferred Networks
ゲーム開発者のための C++11/C++14
ゲーム開発者のための C++11/C++14
Ryo Suzuki
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
infinite_loop
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
Mikiya Okuno
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
中3女子でもわかる constexpr
中3女子でもわかる constexpr
Genya Murakami
SQLアンチパターン - ナイーブツリー
SQLアンチパターン - ナイーブツリー
ke-m kamekoopa
grpc-haskell.pdf
grpc-haskell.pdf
Kousuke Ruichi
MySQLテーブル設計入門
MySQLテーブル設計入門
yoku0825
その文字列検索、std::string::findだけで大丈夫ですか?【Sapporo.cpp 第8回勉強会(2014.12.27)】
その文字列検索、std::string::findだけで大丈夫ですか?【Sapporo.cpp 第8回勉強会(2014.12.27)】
Hiro H.
Redis勉強会資料(2015/06 update)
Redis勉強会資料(2015/06 update)
Yuji Otani
PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜
PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜
Preferred Networks
Java8でRDBMS作ったよ
Java8でRDBMS作ったよ
なおき きしだ
マイクロアドにおけるCTR予測への取り組み
マイクロアドにおけるCTR予測への取り組み
MicroAd, Inc.(Engineer)
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
What's hot
(20)
規格書で読むC++11のスレッド
規格書で読むC++11のスレッド
C++の黒魔術
C++の黒魔術
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
できる!並列・並行プログラミング
できる!並列・並行プログラミング
ゲーム開発者のための C++11/C++14
ゲーム開発者のための C++11/C++14
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
中3女子でもわかる constexpr
中3女子でもわかる constexpr
SQLアンチパターン - ナイーブツリー
SQLアンチパターン - ナイーブツリー
grpc-haskell.pdf
grpc-haskell.pdf
MySQLテーブル設計入門
MySQLテーブル設計入門
その文字列検索、std::string::findだけで大丈夫ですか?【Sapporo.cpp 第8回勉強会(2014.12.27)】
その文字列検索、std::string::findだけで大丈夫ですか?【Sapporo.cpp 第8回勉強会(2014.12.27)】
Redis勉強会資料(2015/06 update)
Redis勉強会資料(2015/06 update)
PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜
PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜
Java8でRDBMS作ったよ
Java8でRDBMS作ったよ
マイクロアドにおけるCTR予測への取り組み
マイクロアドにおけるCTR予測への取り組み
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
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
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
Recently uploaded
(10)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
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