Soumettre la recherche
Mettre en ligne
DataGridを自前実装する話
•
9 j'aime
•
8,312 vues
T
terurou
Suivre
名古屋MS系秋祭り http://atnd.org/events/43243 のLT資料です、当日会場で1時間そこそこで書き上げたものなので、非常に雑です。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 19
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Msを16倍出し抜くwpf開発2回目
Msを16倍出し抜くwpf開発2回目
cct-inc
PHPで大規模ブラウザゲームを開発してわかったこと
PHPで大規模ブラウザゲームを開発してわかったこと
Kentaro Matsui
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
未来(あす)Xamlの1msに泣かないために
未来(あす)Xamlの1msに泣かないために
Yutaka Tsumori
こわくない Git
こわくない Git
Kota Saito
【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
torisoup
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
なぜデータモデリングが重要なのか?
なぜデータモデリングが重要なのか?
Yoshitaka Kawashima
Recommandé
Msを16倍出し抜くwpf開発2回目
Msを16倍出し抜くwpf開発2回目
cct-inc
PHPで大規模ブラウザゲームを開発してわかったこと
PHPで大規模ブラウザゲームを開発してわかったこと
Kentaro Matsui
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
未来(あす)Xamlの1msに泣かないために
未来(あす)Xamlの1msに泣かないために
Yutaka Tsumori
こわくない Git
こわくない Git
Kota Saito
【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
torisoup
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
なぜデータモデリングが重要なのか?
なぜデータモデリングが重要なのか?
Yoshitaka Kawashima
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
アジャイルにモデリングは必要か
アジャイルにモデリングは必要か
Hiromasa Oka
Dynamic Routing Between Capsules
Dynamic Routing Between Capsules
harmonylab
今さらWPF?いいえ、今こそWPF!
今さらWPF?いいえ、今こそWPF!
Yuya Yamaki
Windowsフォームで大丈夫か?一番良いのを頼む。
Windowsフォームで大丈夫か?一番良いのを頼む。
Yuya Yamaki
WebRTC入門 ~沖縄編~
WebRTC入門 ~沖縄編~
Ryosuke Otsuya
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
一希 大田
ドメイン駆動設計(DDD)の実践Part2
ドメイン駆動設計(DDD)の実践Part2
増田 亨
Entity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼう
TomomitsuKusaba
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Sho Hosoda
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
MQTTとAMQPと.NET
MQTTとAMQPと.NET
terurou
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
増田 亨
Msを16倍出し抜くwpf開発1回目
Msを16倍出し抜くwpf開発1回目
cct-inc
正しいものを正しく作る塾-設計コース
正しいものを正しく作る塾-設計コース
増田 亨
モジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェース
Hajime Yanagawa
できる!並列・並行プログラミング
できる!並列・並行プログラミング
Preferred Networks
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
非同期処理の基礎
非同期処理の基礎
信之 岩永
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
altJSの選び方
altJSの選び方
terurou
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
2014/10/04 四国クラウドお遍路 クラウドでビックデータのスモールスタート
Yukihito Kataoka
Contenu connexe
Tendances
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
アジャイルにモデリングは必要か
アジャイルにモデリングは必要か
Hiromasa Oka
Dynamic Routing Between Capsules
Dynamic Routing Between Capsules
harmonylab
今さらWPF?いいえ、今こそWPF!
今さらWPF?いいえ、今こそWPF!
Yuya Yamaki
Windowsフォームで大丈夫か?一番良いのを頼む。
Windowsフォームで大丈夫か?一番良いのを頼む。
Yuya Yamaki
WebRTC入門 ~沖縄編~
WebRTC入門 ~沖縄編~
Ryosuke Otsuya
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
一希 大田
ドメイン駆動設計(DDD)の実践Part2
ドメイン駆動設計(DDD)の実践Part2
増田 亨
Entity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼう
TomomitsuKusaba
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Sho Hosoda
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
MQTTとAMQPと.NET
MQTTとAMQPと.NET
terurou
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
増田 亨
Msを16倍出し抜くwpf開発1回目
Msを16倍出し抜くwpf開発1回目
cct-inc
正しいものを正しく作る塾-設計コース
正しいものを正しく作る塾-設計コース
増田 亨
モジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェース
Hajime Yanagawa
できる!並列・並行プログラミング
できる!並列・並行プログラミング
Preferred Networks
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
非同期処理の基礎
非同期処理の基礎
信之 岩永
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
Tendances
(20)
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
アジャイルにモデリングは必要か
アジャイルにモデリングは必要か
Dynamic Routing Between Capsules
Dynamic Routing Between Capsules
今さらWPF?いいえ、今こそWPF!
今さらWPF?いいえ、今こそWPF!
Windowsフォームで大丈夫か?一番良いのを頼む。
Windowsフォームで大丈夫か?一番良いのを頼む。
WebRTC入門 ~沖縄編~
WebRTC入門 ~沖縄編~
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
ドメイン駆動設計(DDD)の実践Part2
ドメイン駆動設計(DDD)の実践Part2
Entity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼう
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
MQTTとAMQPと.NET
MQTTとAMQPと.NET
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
Msを16倍出し抜くwpf開発1回目
Msを16倍出し抜くwpf開発1回目
正しいものを正しく作る塾-設計コース
正しいものを正しく作る塾-設計コース
モジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェース
できる!並列・並行プログラミング
できる!並列・並行プログラミング
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
非同期処理の基礎
非同期処理の基礎
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
Similaire à 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
Similaire à 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
Plus de 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
オブジェクト指向の皮をかぶった関数型プログラミング言語 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
Silverlight 4 のはなし
Silverlight 4 のはなし
terurou
Plus de terurou
(20)
Webブラウザ上で動作する帳票エンジンを作る話
Webブラウザ上で動作する帳票エンジンを作る話
自社サービスでDurable Functionsを採用した話
自社サービスでDurable Functionsを採用した話
Computation Expressions for Haxe
Computation Expressions for Haxe
デンキヤギの採用の考え方
デンキヤギの採用の考え方
Vue.jsをhaxeで
Vue.jsをhaxeで
オブジェクト指向の皮をかぶった関数型プログラミング言語 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(仮)
Silverlight 4 のはなし
Silverlight 4 のはなし
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で参考になるものは見たことない • パフォーマンスに難があるものばっかだし… • どうしても自前実装しないといけない場合には 覚悟を決めましょう!!! • やばいときのお仕事の相談、お受けいたします。
Télécharger maintenant