Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FlutterのVRT画像生成をDockerで 実行しようとして失敗した話

Avatar for teamLab teamLab PRO
October 07, 2025

FlutterのVRT画像生成をDockerで 実行しようとして失敗した話

【Mobile勉強会 ウォンテッドリー × チームラボ × Sansan #22】にてチームラボのスマホアプリエンジニアが登壇用に作成したスライドです。

Mobile勉強会とは
ウォンテッドリー・チームラボ・Sansanが共催するMobile勉強会です。
モバイルアプリに関する技術的なことを共有する勉強会です。LT形式で各自が共有したいことを話します。
iOS/Androidの話から、KMPやFlutterといった技術の話など、モバイルアプリに関することであれば話す内容はなんでもOK。
オンラインとオフラインでハイブリット開催しました。

https://teamlab.connpass.com/event/366306/

Avatar for teamLab

teamLab PRO

October 07, 2025
Tweet

More Decks by teamLab

Other Decks in Programming

Transcript

  1. 14 何が嬉しいの? • 意図しない UIの変更を防ぐ ◦ 意図したUIの変更のみを再レンダリングしてcommit ◦ 意図していないものは画像が更新されてないのでテストが失敗 •

    コードの変更による UIへの影響を可視化 ◦ PRのコードを実行しなくてもどのようなUIの変更が行われたか把握可能に → Test工数を削減すると共に開発を効率化! VRTは何が嬉しい?
  2. 16 VRTのレンダリングはOSに依存する! Golden files are not consistent between Flutter versions

    and different OS versions https://github.com/flutter/flutter/issues/36667 →VRTの画像レンダリングは実行プラットフォームによって変わるから、 実行プラットフォームを統一してね! VRTのレンダリング
  3. 25 • 主にサーバーサイドの開発で利用される コンテナ化のプラットフォーム • 実行環境を「コンテナ」と呼ばれる 隔離された環境としてパッケージ化 ◦ 仮想的なマシンを作成するようなイメージ •

    実行環境を仮想的に共通化することで 異なる環境でも一貫した動作を保証 Docker Dockerとは VRTの画像レンダリングだけDocker使って 仮想Linuxで実行したらCIをLinuxにできるんじゃん!
  4. 27 調べたら言及されてた... Golden tests paint different pixels using same Docker

    image on different platforms https://github.com/flutter/flutter/issues/131559 →VRTのわずかなdiffはマシンのハードウェアの違いによるものだから同じ dockerコンテナを利用しても 違いが出ることがあるとのこと ... 同一のDocker imageでVRTを実行しても差分が発生する
  5. 29 Dockerでの実行は意味がなかった? 画像の差分がめちゃくちゃ少なくなった! macOSでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST

    FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.63%, 5517px diff detected. A: ある程度は意味があったかも
  6. 30 Dockerでの実行は意味がなかった? 画像の差分がめちゃくちゃ少なくなった! macOSでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST

    FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.63%, 5517px diff detected. dockerのLinuxでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.00%, 1px diff detected. A: ある程度は意味があったかも ほとんど誤差 なしに!!
  7. 31 Dockerでの実行は意味がなかった? 画像の差分がめちゃくちゃ少なくなった! macOSでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST

    FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.63%, 5517px diff detected. dockerのLinuxでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.00%, 1px diff detected. A: ある程度は意味があったかも 誤差を許容する設定の場合より小さい閾値を設定できる ほとんど誤差 なしに!!