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 ああうえ
iOS Apple Dev Tutorialsとpointfreeのモダン実装を比較する
kwzr
1
480
エンジニアとデザイナーがわかる iPadの画面サイズ対応入門
kwzr
0
150
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.4k
iOS・Androidで使える デザインシステムをどう実装するか
kwzr
3
5.5k
Apple Pencilと左利き対応
kwzr
5
2.3k
CIをGASで継続的に改善したら幸せになった
kwzr
3
1.7k
Other Decks in Technology
See All in Technology
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
160
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
110
会社員しながら本を書いてきた知見の共有
sat
PRO
3
690
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
450
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
25k
Digitization部 紹介資料
sansan33
PRO
1
3.8k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
740
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
120
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
300
SmartHRの複数のチームにおけるMCPサーバーの活用事例と課題
yukisnow1823
2
1.2k
CloudBruteによる外部からのS3バケットの探索・公開の発見について / 20250605 Kumiko Hennmi
shift_evolve
3
180
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Designing for humans not robots
tammielis
253
25k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
For a Future-Friendly Web
brad_frost
178
9.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
What's in a price? How to price your products and services
michaelherold
245
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A designer walks into a library…
pauljervisheath
205
24k
Rails Girls Zürich Keynote
gr2m
94
13k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Become a Pro
speakerdeck
PRO
28
5.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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 まとめ