Git 未経験者 が GitHub Actions で もがいた話 / 20220914 git beginner uses github actions

Transcript

1. Git 未経験者 が
   GitHub Actions で もがいた話
   2022-09-14
   自動化大好きエンジニアLT会 - vol.8
   

   View Slide

2. いきなりですが、
   話す内容は
   「開発チーム内での運用でこうやりました！」とか、
   「現場でのTips集」とかではなく、
   「趣味の一環・ネタ」になります！
   （ハードルをベタベタに下げてお聞きください）
   

   View Slide

3. と言うのも、
   当初は、
   「現場での実運用や実践しての学び」で話そうと思って
   いましたが、
   同じ内容で JJUG CCC 2022 Fall にプロポーザル出した
   ら、採択されました ので、
   気になる方は11月のJJUG CCCをお聞きください！
   （謎の宣伝！）
   

   View Slide

4. Git 未経験者 が
   GitHub Actions で もがいた話
   【ネタ編】
   2022-09-14
   自動化大好きエンジニアLT会 - vol.8
   

   View Slide

5. 目次
   ● 自己紹介
   ● 自動化の対象について
   ○ Before
   ○ After
   ● 試行錯誤したこと
   ● 課題 と 自問自答 と 今後
   

   View Slide

6. 自己紹介
   

   View Slide

7. 名前: あさの　まさき
   出身: 大阪
   所属: BABY JOB 株式会社（2022-06 入社）
   役割: Javaエンジニア
   Twitter: @mackey0225
   GitHub: @mackey0225
   趣味:
   - 育児: もうすぐ２歳の息子がいます
   - 音楽: 聞くのも弾くのも好きです
   - サウナ: ミーハーですが『サ道』がきっかけ
   自己紹介
   

   View Slide

8. 自己紹介 - 所属企業紹介
   

   View Slide

9. 自己紹介 - 所属企業紹介 - サービス紹介
   全国 2,100 施設以上 に導入 !!
   32,000 名以上が利用中 !!
   ※ 2022 年 7 月時点
   

   View Slide

10. 自己紹介 - 所属企業紹介 - サービス紹介
    

    View Slide

11. 自動化の対象について
    

    View Slide

12. 自動化前の作業（Before）
    INPUT PROCESS OUTPUT
    商品の画像
    ヒト が
    Adobe Illustrator か Figma で
    編集・作業
    加工後の画像
    

    View Slide

13. 今回の自動化の結果（After）
    商品の画像
    ①ヒト が GitHub に 画像をマージさせるプルリクを作成
    ②作成されたプルリクをもとに GitHub Actions を実行
    ③作成したプルリクに編集画像を追加
    ④最終的には人の判断でブランチにマージさせる
    ①
    ② ③
    ④
    ④
    INPUT PROCESS OUTPUT
    加工後の画像
    

    View Slide

14. 試行錯誤したこと
    

    View Slide

15. 試行錯誤したところ
    1. 起動トリガーについて
    ○ プルリクエストであること
    ○ 画像ファイルであること（今回は.pngにしています）
    2. 変換したファイルの取り扱い
    ○ いきなりマージではなく、プルリク元ブランチにプッシュして、レビュー
    チェックできるようにする
    

    View Slide

16. 起動トリガーについて
    on:
    pull_request:
    paths: [ "image/input/**.png" ]
    https://github.com/mackey0225/20220914_lt_automation/blob/8f520fa121cbc3cd4214b408438712368
    9758a27/.github/workflows/image_converter.yml
    ＜やったこと＞
    以下の通り、 on に pull_request と paths 設定して実現
    ○ プルリクエストであること
    ○ 画像ファイルであること（拡張子.pngであること）
    

    View Slide

17. 起動トリガーについて
    on:
    pull_request:
    paths: [ "image/input/**.png" ]
    pull_request_target:
    branches: [ "main" ]
    https://github.com/mackey0225/20220914_lt_automation/blob/8f520fa121cbc3cd4214b408438712368
    9758a27/.github/workflows/image_converter.yml
    ＜やってしまったこと（失敗）＞
    当初 pull_request_target も設定してしまったため、二重で Actions が実行される
    ことが発生
    例えば、上記の場合、
    他ブランチで画像ファイルを追加し、
    そのブランチを main ブランチへマージするプルリクを作ると、
    同じ Actions が 2 回並行で実行される
    

    View Slide

18. 変換したファイルの取り扱い
    ＜やったこと＞
    変換後のファイルをプルリクの元ブランチにプッシュさせることで、プルリクの差分に
    表示させている
    https://github.com/mackey0225/20220914_lt_automation/pull/12/files
    

    View Slide

19. 変換したファイルの取り扱い
    ＜具体的に＞
    ①処理冒頭でプルリク元のブランチをチェックアウトした後、処理を実行
    jobs:
    execute:
    runs-on: "ubuntu-latest"
    steps:
    - name: Checkout
    uses: actions/checkout@v3
    with:
    ref: ${{ github.head_ref }}
    ＜＜　略：Python 実行環境のセットアップ　＞＞
    - name: Execute Python script - Image Converter
    run: |
    python image_convert.py
    https://github.com/mackey0225/20220914_lt_automation/blob/8f520fa121cbc3cd4214b408438712368
    9758a27/.github/workflows/image_converter.yml
    

    View Slide

20. 変換したファイルの取り扱い
    ②変換した結果、差分の有無を確認し、プルリク元ブランチにプッシュする
    ＜＜　前ページの続き　＞＞
    - name: Check for modified files in Image Converter
    id: git-check
    run: echo ::set-output name=modified::$(if git diff-index --quiet HEAD --; then echo
    "false"; else echo "true"; fi)
    - name: Push in Modified File
    if: steps.git-check.outputs.modified == 'true'
    run: |
    git config user.name github-actions[bot]
    git config user.email 41898282+github-actions[bot]@users.noreply.github.com
    git status
    git add .
    git commit -m "Image Converted."
    git push origin HEAD
    https://github.com/mackey0225/20220914_lt_automation/blob/8f520fa121cbc3cd4214b408438712368
    9758a27/.github/workflows/image_converter.yml
    

    View Slide

21. 変換したファイルの取り扱い
    ＜余談＞
    実際の現場では、
    上記の変換をコードフォーマッターの処理（例えば、Spotless）を実行した後、
    差分があれば、プッシュするように使っています。
    

    View Slide

22. 課題 と 自問自答 と 今後
    

    View Slide

23. 課題 と 自問自答 と 今後
    ＜課題＞
    ● 画像変換自体が 職人芸 で スクリプトやプログラム だと難しい
    ○ 今回は説明のため、ネガ反転にしているが、本当は画像の上に説明アイコンを
    載せるのを自動化したい
    ○ 掲載されている内容にかぶらないようにしたり、画像のリサイズなどが必要
    ○ そもそもの部分であるが、人の判断を伴う作業を自動化するのは難しい
    

    View Slide

24. 課題 と 自問自答 と 今後
    ＜課題＞
    ● 画像変換自体が 職人芸 で スクリプトやプログラム だと難しい
    ○ 今回は説明のため、ネガ反転にしているが、本当は画像の上に説明アイコンを
    載せるのを自動化したい
    ○ 掲載されている内容にかぶらないようにしたり、画像のリサイズなどが必要
    ○ そもそもの部分であるが、人の判断を伴う作業を自動化するのは難しい
    

    View Slide

25. 課題 と 自問自答 と 今後
    ＜自問自答（セルフツッコミ）＞
    ● これってGitHubでやる意味有るの？
    ○ そんなこと言わないで！　ネタだもん！
    ○ 強いていうと、Pythonの実行環境が試せたぐらいかな？
    ■ cronトリガーもあるので、簡単なスクレイピングとかであれば十分かも
    ■ 無料枠もあるので、そこそこ使えるかも
    ● Git未経験者からどう学ぶのか みたいな内容は無いのか？　タイトル詐欺だろ？
    ○ そんなこと言わないで！　ネタだもん！
    ○ すみません、忘れていました。。。
    ■ JJUG CCCでは話すので、ぜひそちらでオナシャス。（謎宣伝再び）
    ● これって実運用しているの？
    ○ すみません、できていないです。。。　ネタだもん。。。
    

    View Slide

26. 課題 と 自問自答 と 今後
    ＜今後＞
    ● GitHub Actionsについては、まだまだ遊べることもありそうなので、業務・プライ
    ベート問わず使えるところで使っていきたい
    ● 次話す際は、もっと実作業や本運用に即した内容で話せるよう 新鮮で旨味のある
    ネタを仕入れたいです
    

    View Slide

27. おしまい
    

    View Slide