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
0
370
エンジニアとデザイナーがわかる iPadの画面サイズ対応入門
kwzr
0
89
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
0
1.9k
iOS・Androidで使える デザインシステムをどう実装するか
kwzr
3
5.1k
Apple Pencilと左利き対応
kwzr
5
1.8k
CIをGASで継続的に改善したら幸せになった
kwzr
3
1.5k
Other Decks in Technology
See All in Technology
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
150
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
740
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
190
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
A better future with KSS
kneath
231
17k
A designer walks into a library…
pauljervisheath
201
24k
Why Our Code Smells
bkeepers
PRO
332
56k
The Language of Interfaces
destraynor
151
23k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Thoughts on Productivity
jonyablonski
64
4.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
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 まとめ