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. BitriseでUIの差分検出
    Bitrise User Group Meetup #1
    pixiv Inc.
    kwzr / Kazumasa Kawazure
    2019.07.30

    View full-size slide

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

    View full-size slide


  3. 4
    画像の差分検出するステップを作った!

    View full-size slide

  4. ● Pull Requestを送るときに、レビュワーや未来の自分に変更点がわかりやすいように、
    UI
    の変更があったらBefore / Afterの画像を貼っている
    ● UIの変更を撮って貼るの面倒、勝手にやって欲しい
    ○ 古いアプリと新しいアプリ両方入れてスクショ撮るのが結構な手間
    ● どこが変わったのか、わかりやすく差分を表示して欲しい
    ● → bitrise-step-generate-diff-image というステップを作った(レビュー待ち)
    ○ 各画面のスクショを毎回撮っていれば、
    UIの変更を自動で検出できる!!
    5
    経緯

    View full-size slide

  5. ● https://github.com/murooka/go-diff-image を利用
    ● InputsはBefore ImagesとAfter Imagesの2つ
    ○ それぞれ画像のファイルパスを設定する
    ○ ディレクトリを指定した場合は、そのディレクトリ以下の同名のファイルが比較される
    ● GENERATED_DIFF_IMAGES_DIRに差分があった画像のみ生成される
    6
    bitrise-step-generate-diff-image

    View full-size slide

  6. ● developブランチにマージするときなどに、最新のアプリのスク
    ショをS3にアップロードしておく(Amazon S3 File uploader)
    ● スクショはfastlane snapshotや、Appiumを使って撮る
    ● File Downloaderで前回のスクショをダウンロード
    ● Generate Diff Imageで前回と今回の差分画像を生成する
    ● 結果を好きなサービスに通知する
    (SlackやGitHubなど)
    7
    ワークフロー例

    View full-size slide

  7. ● 時刻が変わると差分が生まれてしまう
    ○ シミュレーターの時刻を変えて解決
    (?)
    ○ 特定の領域の変更に反応しないようにしたい
    ● ユーザーコンテンツなどによって差分が生まれてしまう
    ○ 毎回流し込むデータを同じにする
    (?)
    8
    課題

    View full-size slide

  8. ● ステップがマージされたらぜひ使ってください!
    (宣伝)
    ● Bitriseのおかげでコードを書く手を止めることなく作業ができています!
    9
    まとめ

    View full-size slide