Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BitriseでUIの差分検出

 BitriseでUIの差分検出

ああうえ

July 30, 2019
Tweet

More Decks by ああうえ

Other Decks in Technology

Transcript

  1. 2 自己紹介 • kwzr / Kazumasa Kawazure ◦ Twitter :

    @_kwzr_ • pixiv Sketch iOS版の開発 • comment-on-github-pull-request作った • 趣味: 絵画(美少女のイラストを描くこと)、音楽鑑賞 (声優さんのライブにいくこと)、読書(マンガを読むこ と)、映画鑑賞(アニメを観ること)、ボードゲーム(ポケ モンカードのこと) kwzr モバイルアプリエンジニア
  2. 3

  3. • Pull Requestを送るときに、レビュワーや未来の自分に変更点がわかりやすいように、 UI の変更があったらBefore / Afterの画像を貼っている • UIの変更を撮って貼るの面倒、勝手にやって欲しい ◦

    古いアプリと新しいアプリ両方入れてスクショ撮るのが結構な手間 • どこが変わったのか、わかりやすく差分を表示して欲しい • → bitrise-step-generate-diff-image というステップを作った(レビュー待ち) ◦ 各画面のスクショを毎回撮っていれば、 UIの変更を自動で検出できる!! 5 経緯
  4. • https://github.com/murooka/go-diff-image を利用 • InputsはBefore ImagesとAfter Imagesの2つ ◦ それぞれ画像のファイルパスを設定する ◦

    ディレクトリを指定した場合は、そのディレクトリ以下の同名のファイルが比較される • GENERATED_DIFF_IMAGES_DIRに差分があった画像のみ生成される 6 bitrise-step-generate-diff-image
  5. • developブランチにマージするときなどに、最新のアプリのスク ショをS3にアップロードしておく(Amazon S3 File uploader) • スクショはfastlane snapshotや、Appiumを使って撮る •

    File Downloaderで前回のスクショをダウンロード • Generate Diff Imageで前回と今回の差分画像を生成する • 結果を好きなサービスに通知する (SlackやGitHubなど) 7 ワークフロー例