はじめに

こんにちは、こんばんは、佐藤佑哉です。
本日は、Androidアプリ開発で使用されるRoborazziを用いて、画面の差分をPRのコメントに表示するをGitHubActionsで実現していきたいと思います。

本記事の動機

前回投稿したroborazziでのスクリーンショットの方なのですが、現状、スクリーンショットと差分レポートの生成のみになっており、実用性に欠けています。これをGitHub Actionsを使用して、実際に開発でも実用できるようにするのが本記事の動機です。

使用する技術

本記事で使用するGitHub ActionsとRoborazziのみを使用します。

前回の記事のまとめ

前回まで, roborazziを使用してVRTを行い、生成されたスクリーンショットや差分レポートを表示するところまで行いました。今回はそのスクリーンショットを用いて、PRに表示していきたいと思います。

スクリーンショットを比較してPRに表示するまでの流れ

今回は、takahiromさんが作成したサンプルプロジェクトworkflowを参考にして、作成していきたいと思います。

下記のイメージが今回の実装の構成図になります。

変更前のスクリーンショットを成果物として保存する

まずはじめに、mainブランチから変更する前のスクリーンショットを作成し、成果物として保存します。

store-screenshot.yml

name: StoreScreenshot

on:
  push:
    branches:
      - main

jobs:
  store-screenshot-test:
    runs-on: ubuntu-latest
    timeout-minutes: 20

    permissions:
      contents: read # for checkout
      actions: write # for upload-artifact

    steps:
      ## Android開発の環境をセットアップは省略
      ## ...

      - name: record screenshot
        run: |
          ./gradlew recordRoborazziDebug --stacktrace --rerun-tasks

      - uses: actions/upload-artifact@v4
        if: ${{ always() }}
        with:
          name: screenshots
          path: |
            actual_images/ # 変更前のスクリーンショットを保存するディレクトリ
          retention-days: 30

StoreScreenshotワークフローでアップロードしたスクリーンショットと変更後のスクリーンショットを比較し、生成された差分を成果物として保存する

次にmeinブランチから変更前のスクリーンショットを取得し、変更後のスクリーンショットと比較して、差分を生成します。

compare-screenshot.yml

name: CompareScreenshot

on:
  pull_request:

jobs:
  compare-screenshot-test:
    runs-on: ubuntu-latest
    timeout-minutes: 20

    permissions:
      contents: read
      actions: write

    steps:
      ## Android開発の環境をセットアップは省略
      ## ...

      ## mainブランチから変更前のスクリーンショットを取得
      - uses: actions/download-artifact@v2
        continue-on-error: true
        with:
          name: screenshots
          workflow: StoreScreenshot
          branch: main

      ## 変更前のスクリーンショットと比較し、差分を生成
      - name: compare screenshot test
        id: compare-screenshot-test
        run: |
          ./gradlew compareRoborazziDebug --stacktrace

      ## 差分を成果物として保存
      - uses: actions/upload-artifact@v4
        if: ${{ always() }}
        with:
          name: screenshots-diff
          path: |
            **/build/outputs/roborazzi/
          retention-days: 30

      ## PR番号を保存
      - name: Save PR number
        run: |
          mkdir -p ./pr
            echo "${{ github.event.number }}" > ./pr/NR

      ## PR番号を成果物として保存
      - name: upload PR number
        uses: actions/upload-artifact@v4
        with:
          name: pr
          path: pr/

成果物を使用して、PRにコメントとして表示する

最後に、生成された差分をPRに表示するためのコメントを作成します。

compare-screenshot-comment.yml

name: Screenshot compare comment

on:
  ## CompareScreenshotワークフローが完了したとき
  workflow_run:
    workflows:
      - CompareScreenshot
    types: [ completed ]

## 並列処理を行う
concurrency:
  group: ${{ github.workflow }}-${{ github.head_ref }}-${{ github.event.workflow_run.id }}
  cancel-in-progress: true

jobs:
  comment-compare-screenshot:
    if: >
      github.event.workflow_run.event == 'pull_request' &&
      github.event.workflow_run.conclusion == 'success'

    timeout-minutes: 2

    permissions:
      actions: read
      contents: write
      pull-requests: write

    runs-on: ubuntu-latest

    steps:
      ## PR番号をダウンロード
      - uses: dawidd6/action-download-artifact@v2
        with:
          name: pr
          run_id: ${{ github.event.workflow_run.id }}

      # PR番号を取得
      - id: get-pull-request-number
        name: Get pull request number
        shell: bash
        run: |
          echo "pull_request_number=$(cat NR)" >> "$GITHUB_OUTPUT"

      ## mainブランチに戻る
      - name: main checkout
        uses: actions/checkout@v4
        with:
          ref: main

      ## コミット履歴を持たないブランチを作成
      - name: switch companion branch
        env:
          BRANCH_NAME: companion_${{ github.event.workflow_run.head_branch }}
        run: |
          git branch -D $BRANCH_NAME || true
          git checkout --orphan $BRANCH_NAME
          git rm -rf .

      ## CompareScreenshotワークフローで生成された差分を取得
      - uses: dawidd6/action-download-artifact@v3
        with:
          name: screenshots-diff
          path: screenshots-diff
          run_id: ${{ github.event.workflow_run.id }}

      ## 差分の画像が命名規則に従っているか確認
      - id: check-if-there-are-valid-files
        name: Check if there are valid files
        shell: bash
        run: |
          mapfile -t files_to_add < <(find . -type f -name "*_compare.png")
          
          exist_valid_files="false"
          for file in "${files_to_add[@]}"; do
            if [[ $file =~ ^[a-zA-Z0-9_./-]+$ ]]; then
              exist_valid_files="true"
              break
            fi
          done
          echo "exist_valid_files=$exist_valid_files" >> "$GITHUB_OUTPUT"

      ## 差分の画像をcompanionブランチにpush
      - id: push-screenshot-diff
        shell: bash
        if: steps.check-if-there-are-valid-files.outputs.exist_valid_files == 'true'
        env:
          BRANCH_NAME: companion_${{ github.event.workflow_run.head_branch }}
        run: |
          files_to_add=$(find . -type f -name "*_compare.png")
          
          
          for file in $files_to_add; do
            if [[ $file =~ ^[a-zA-Z0-9_./-]+$ ]]; then
              git add $file
            fi
          done
          git config --global user.name ScreenshotBot
          git config --global user.email 41898282+github-actions[bot]@users.noreply.github.com
          git commit -m "Add screenshot diff"
          git push origin HEAD:$BRANCH_NAME -f

      ## 差分の画像をPRに表示するためのコメントを生成
      - id: generate-diff-reports
        name: Generate diff reports
        if: steps.check-if-there-are-valid-files.outputs.exist_valid_files == 'true'
        env:
          BRANCH_NAME: companion_${{ github.event.workflow_run.head_branch }}
        shell: bash
        run: |
          files=$(find . -type f -name "*_compare.png" | grep "roborazzi/" | grep -E "^[a-zA-Z0-9_./-]+$")
          delimiter="$(openssl rand -hex 8)"
          {
            echo "reports<<${delimiter}"
          
            echo "Snapshot diff report"
            echo "| File name | Image |"
            echo "|-------|-------|"
          } >> "$GITHUB_OUTPUT"
          
          for file in $files; do
            fileName=$(basename "$file" | sed -r 's/(.{20})/\1<br>/g')
            echo "| [$fileName](https://github.com/${{ github.repository }}/blob/$BRANCH_NAME/$file) | ![](https://github.com/${{ github.repository }}/blob/$BRANCH_NAME/$file?raw=true) |" >> "$GITHUB_OUTPUT"
          done
          echo "${delimiter}" >> "$GITHUB_OUTPUT"

      ## コメントを取得
      - name: Find Comment
        uses: peter-evans/find-comment@v2
        id: fc
        if: steps.generate-diff-reports.outputs.reports != ''
        with:
          issue-number: ${{ steps.get-pull-request-number.outputs.pull_request_number }}
          comment-author: "github-actions[bot]"
          body-includes: "Snapshot diff report"

      ## コメントが存在しない場合、新規作成
      - name: Add or update comment on PR
        uses: peter-evans/create-or-update-comment@v3
        if: steps.generate-diff-reports.outputs.reports != ''
        with:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ steps.get-pull-request-number.outputs.pull_request_number }}
          body: ${{ steps.generate-diff-reports.outputs.reports }}
          edit-mode: replace

      ## 期限切れになったcompanionブランチを削除
      - name: Clean up outdated companion branches
        run: |
          git branch -r --format="%(refname:lstrip=3)" | grep "companion_" | while read -r branch; do
            last_commit_date_timestamp=$(git log -1 --format="%ct" "origin/$branch")
            now_timestamp=$(date +%s)
          
            echo "branch: $branch now_timestamp: $now_timestamp last_commit_date_timestamp: $last_commit_date_timestamp"
            if [ $((now_timestamp - last_commit_date_timestamp)) -gt 2592000 ]; then
              echo "Deleting branch $branch"
              git push origin --delete $branch
            fi
          done

セットアップが完了したので、画面に少しだけ変更を加えてみましょう。

HomeScreen.kt

/*...*/
Spacer(modifier = Modifier.height(6.dp))
LazyColumn { /*...*/ }
/*...*/

これように実装をすることで、以下の写真のようにPRに差分を表示することができます。

まとめ

今回は、RoborazziとGitHub Actionsを使用して画面の差分をPRに表示する実装をいたしました。

今回は、GitHub Actionsをメインに触り、初めての技術ばかりでした。
特にartifactの理解に苦しみ、「変更前のスクリーンショットどうやるんだ・・・」「変更後の画面がpushされたら変更後のスクリーンショットはどうするんだ・・・」みたいになっていました。
しかし、今回の実装をきっかけに、開発環境を効率化するという点で技術領域を広げることはできたのは良い経験になりました。

また、今回は写真の保存方法として、GitHubのstorageとcopnaionブランチを使用しましたが、Nowinandroidのように、リポジトリに直接保存する方法もあり、それぞれのプロジェクトに合わせて選択することができそうです。

最後にはなりますが、本記事が誰かの力になれば幸いです😆