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.4k
BitriseでUIの差分検出
ああうえ
July 30, 2019
Tweet
Share
More Decks by ああうえ
See All by ああうえ
iOS Apple Dev Tutorialsとpointfreeのモダン実装を比較する
kwzr
1
410
エンジニアとデザイナーがわかる iPadの画面サイズ対応入門
kwzr
0
100
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.1k
iOS・Androidで使える デザインシステムをどう実装するか
kwzr
3
5.2k
Apple Pencilと左利き対応
kwzr
5
2k
CIをGASで継続的に改善したら幸せになった
kwzr
3
1.6k
Other Decks in Technology
See All in Technology
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
100
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
460
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
320
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
540
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
君は隠しイベントを見つけれるか?
mujyun
0
270
で、ValhallaのValue Classってどうなったの?
skrb
1
660
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1k
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Thoughts on Productivity
jonyablonski
67
4.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Writing Fast Ruby
sferik
626
61k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Why Our Code Smells
bkeepers
PRO
334
57k
The World Runs on Bad Software
bkeepers
PRO
65
11k
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 まとめ