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
440
エンジニアとデザイナーがわかる iPadの画面サイズ対応入門
kwzr
0
120
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.2k
iOS・Androidで使える デザインシステムをどう実装するか
kwzr
3
5.4k
Apple Pencilと左利き対応
kwzr
5
2.2k
CIをGASで継続的に改善したら幸せになった
kwzr
3
1.6k
Other Decks in Technology
See All in Technology
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
Building Products in the LLM Era
ymatsuwitter
10
4.4k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
Featured
See All Featured
A better future with KSS
kneath
238
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Designing for humans not robots
tammielis
250
25k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Visualization
eitanlees
146
15k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
RailsConf 2023
tenderlove
29
1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
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 まとめ