画面で大量描画を行う際、レンダリング速度は重要です。
特にFlutter Webではどうしても遅くなりがちではないでしょうか。
今回の日記には「TextField」と「Container」をそれぞれ大量に配置した場合のパフォーマンス検証結果が含まれます。
参考になれば幸いです。
2023/10/08
画面を操作したときにリアルタイムでDBに反映したい。RealTimeDBへの移行に向けた実装に合わせて、画面の表示ロジックの見直しや描画パフォーマンスも気になってきた。
- たとえば現状各アイディアの表示や入力はTextFieldを使っているが、かなりの数を一度に描画することになる。これを例えばContainerにした方が多少でも軽くなるのだろうか。
- 既にUI描画全般が複雑なのでシンプルにしたく、ゼロベースで考え直したものの意外と難しい。一度考え直してきれいに出来そうと思っても、様々な事を考えるとどんどん複雑になってしまう。なんだかんだ言ってキャンバスやレーンの描画は今の形でうまく機能している事が分かった
- パフォーマンスを上げるにはレーン自体の描画はあまり大きく変えず、アイディアの描画を変更するのが良いかもしれない
そんなことを調べたり考えながら、Undo周りの不具合修正を実施した。
2023/10/09
思い切って描画テストをしてみた。アイディアレーンで想定される形で、レーンとその交差するエリアの中にアイディア(TextField)を大量に配置。
全てのアイディアをTextFieldで場合の速度（感覚値）
- レーン20×20 (400)、各エリアのアイディア9 (400*9=3600)で描画が驚くほど遅くなった。スクロールもかなり重い。
- レーン100×4(400)、各エリアのアイディア9 (400*9=3600)も遅い。スクロールも重いし、少なくとも実用レベルではない。
- レーン20×20(400)、各エリアのアイディア1 (400*1=400)は速い。スクロールも速くて実用レベル。ただ横スクロールは遅くてひっかかりがある。
- レーン100×4(400)、各エリアのアイディア1 (400*1=400)は速い。スクロールも速くて実用レベル。
- レーン3×3(9)、各エリアのアイディア100 (9*100 =900)は遅い
上記から分かることは、レーン自体は増えても速度への影響は少ないが、アイディアが多いとかなり遅くなるということ。TextFieldの描画が重いということが示唆される。
全てのアイディアを、TextFieldではなくContainerで描画した場合
- レーン20×20 (400)、各エリアのアイディア9 (400*9=3600)は、SetStateは遅いが描画後の動作は悪く無い。但し縦スクロールは速いものの横スクロールは遅い。
- レーン20×20 (400)、各エリアのアイディア3 (400*3=1200)は、SetStateも描画も速い。横スクロールも速い。
上記から分かることは、TextFieldを大量生成するよりも、なるべくContainerで代用した方が圧倒的に速くなる（予想はしていたが顕著に出た）。但しそれでも生成量が多いと処理時間がかかってくるので工夫は必要。
※定量的なものは測ってなくてすみません。ただ0.1秒か0.2かは問題ではなく、感覚的にもっさりかどうかを調べたかったのが目的だったのでこのような記録となっています。
2023/10/10
昨日の結果を踏まえつつ、レーンとアイディアの描画パフォーマンス改善に向けたテストや実装を行った。
ところでこのソフトは「アイディアをレーンで整理する」のを基本としているため「Idea Lane（アイディア・レーン）」という名前にしようとしている。
ところがこの日、なんと既に「Idea Grid（アイディア・グリッド）」なるツールがあることを知った。Mac / iPhone向けのようだが、名前が近しくて衝撃。
どこかのタイミングで試してみないと……。
後に調べたところ、IdeaGridはグリッドという「マス」をベースに整理していくものでした。
名前もコンセプトもアイディアレーンと一見すると似ているように感じましたが、私が作りたいものとは結構違うところを目指している印象でした。
（もし作ろうとしているモノが既に世の中にあるのならば、私が苦労して作る必要性は全くないのですが…）
そしてIdeaGridはMac/iOS専用です。
私は主にWindowsユーザのため、個人的な普段使いとしては厳しいところです。
実はアイディアレーンも初めWindows用のソフトとして作り初めました。しかし「インストールせずどこでも動くほうが良い」と感じ、かなり苦労してWebで動くようにしていったことはこの開発日記に綴っています。
IdeaGridは見た目もとても優れていて、こだわって作られているようです。利用法のコンテンツも充実しています。アイディアをグリッドで整理するというこのコンセプトのツール、Macユーザの型はお試し頂くと良いかもしれません。
2023/10/11
引き続き、レーンとアイディアの描画パフォーマンス改善に向けたテストや実装を行った。
なんだかんだと、ほぼ作り直しのレベルで色々と試している。
やはり今作ると、部品化をどう行うかの判断が当初とは違ってくる。何しろflutter初心者でいきなり複雑なものを作り出したのだから仕方が無い。
アプリの構造として考えると、元々Windows用ソフトで作り始めたのが途中でWeb上で動くように変え、firebaseとの通信の仕方も理解した結果、設計の前提が変わった。
プログラム言語という観点では、私は昔BasicやらCやらDelphi(Object Pascal)やらJavaやらは扱ったことがある。ただFlutterを扱う、Dartという言語とFlutterというフレームワークを両方同時に使いこなしていく必要性がある。手探りでやってきたが理解も進みつつある。
Flutter は “Everything is a Widget” というのがコンセプトらしい。まだまだ分かっていない部分もあるものの、WidgetとModelを使い分け、Streamも活用し、InheritedWidgetやらProviderやらRiverpodやらも使って、だいぶFlutterらしい感じのプログラミングになっている感覚がある。
※開発日記は当時の記録をもとに作成し、必要に応じて加筆・補足しています
この記事はアイディア整理ソフト「idea Lane」の開発記録です
↓どなたでも、ユーザ登録だけで無料ですぐに使えます↓
テキストベースの思考整理ツール「idea Lane」
コメント