Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BitriseでUIの差分検出
Search
ああうえ
July 30, 2019
Technology
0
1.5k
BitriseでUIの差分検出
ああうえ
July 30, 2019
Tweet
Share
More Decks by ああうえ
See All by ああうえ
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
1.1k
iOS Apple Dev Tutorialsとpointfreeのモダン実装を比較する
kwzr
1
510
エンジニアとデザイナーがわかる iPadの画面サイズ対応入門
kwzr
0
160
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.7k
iOS・Androidで使える デザインシステムをどう実装するか
kwzr
3
5.6k
Apple Pencilと左利き対応
kwzr
5
2.4k
CIをGASで継続的に改善したら幸せになった
kwzr
3
1.7k
Other Decks in Technology
See All in Technology
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
710
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
20251027_マルチエージェントとは
almondo_event
1
430
OCIjp_Oracle AI World_Recap
shinpy
1
180
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
150
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
1
180
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
160
Building a cloud native business on open source
lizrice
0
180
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
180
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
220
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Music & Morning Musume
bryan
46
6.9k
The Invisible Side of Design
smashingmag
302
51k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Building Applications with DynamoDB
mza
96
6.7k
Code Review Best Practice
trishagee
72
19k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Transcript
BitriseでUIの差分検出 Bitrise User Group Meetup #1 pixiv Inc. kwzr /
Kazumasa Kawazure 2019.07.30
2 自己紹介 • kwzr / Kazumasa Kawazure ◦ Twitter :
@_kwzr_ • pixiv Sketch iOS版の開発 • comment-on-github-pull-request作った • 趣味: 絵画(美少女のイラストを描くこと)、音楽鑑賞 (声優さんのライブにいくこと)、読書(マンガを読むこ と)、映画鑑賞(アニメを観ること)、ボードゲーム(ポケ モンカードのこと) kwzr モバイルアプリエンジニア
3
• 4 画像の差分検出するステップを作った!
• Pull Requestを送るときに、レビュワーや未来の自分に変更点がわかりやすいように、 UI の変更があったらBefore / Afterの画像を貼っている • UIの変更を撮って貼るの面倒、勝手にやって欲しい ◦
古いアプリと新しいアプリ両方入れてスクショ撮るのが結構な手間 • どこが変わったのか、わかりやすく差分を表示して欲しい • → bitrise-step-generate-diff-image というステップを作った(レビュー待ち) ◦ 各画面のスクショを毎回撮っていれば、 UIの変更を自動で検出できる!! 5 経緯
• https://github.com/murooka/go-diff-image を利用 • InputsはBefore ImagesとAfter Imagesの2つ ◦ それぞれ画像のファイルパスを設定する ◦
ディレクトリを指定した場合は、そのディレクトリ以下の同名のファイルが比較される • GENERATED_DIFF_IMAGES_DIRに差分があった画像のみ生成される 6 bitrise-step-generate-diff-image
• developブランチにマージするときなどに、最新のアプリのスク ショをS3にアップロードしておく(Amazon S3 File uploader) • スクショはfastlane snapshotや、Appiumを使って撮る •
File Downloaderで前回のスクショをダウンロード • Generate Diff Imageで前回と今回の差分画像を生成する • 結果を好きなサービスに通知する (SlackやGitHubなど) 7 ワークフロー例
• 時刻が変わると差分が生まれてしまう ◦ シミュレーターの時刻を変えて解決 (?) ◦ 特定の領域の変更に反応しないようにしたい • ユーザーコンテンツなどによって差分が生まれてしまう ◦
毎回流し込むデータを同じにする (?) 8 課題
• ステップがマージされたらぜひ使ってください! (宣伝) • Bitriseのおかげでコードを書く手を止めることなく作業ができています! 9 まとめ