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 まとめ