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
430
エンジニアとデザイナーがわかる iPadの画面サイズ対応入門
kwzr
0
110
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.2k
iOS・Androidで使える デザインシステムをどう実装するか
kwzr
3
5.3k
Apple Pencilと左利き対応
kwzr
5
2.1k
CIをGASで継続的に改善したら幸せになった
kwzr
3
1.6k
Other Decks in Technology
See All in Technology
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
1
300
なぜCodeceptJSを選んだか
goataka
0
160
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
110
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
430
ハイテク休憩
sat
PRO
2
140
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
310
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Adopting Sorbet at Scale
ufuk
73
9.1k
Bash Introduction
62gerente
608
210k
Docker and Python
trallard
42
3.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
We Have a Design System, Now What?
morganepeng
51
7.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
How to Ace a Technical Interview
jacobian
276
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.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 まとめ