Asana + Github連携やっていこ！

こんにちは！WEBエンジニアの山田です！

CAMPFIREでは、全社的にタスク管理に Asana を利用しています。
今回アドベントカレンダー何を書こうかなと思ったときに、Github連携されていないボードがあったので、備忘録がてら、AsanaとGitHubを連携して開発体験を良くしていくことについて書いていこうと思います！

何をやりたいか

• GitHubのプルリクエストの情報をAsanaタスクに連携したい。
• GitHubのプルリクエストのステータスとAsanaタスクの進捗を連携したい。

やっていく

1. GitHubのプルリクエストの情報をAsanaタスクに連携したい

以下が公式で用意されているGitHub Actionなので設定していきます！

• プルリクエストの説明にタスクのステータスをコメントし、関連する Asana タスクへのリンクを表示するアクション
• Asana のタスクにプルリクエストが添付されていない場合に、プルリクエストの説明から GitHub ウィジェットを添付するアクション

手順

1. AsanaのボードにGitHubアプリを連携する。
2. GitHub のプルリクエストの情報を Asana に同期するための GitHub Actions を追加する

Asana公式ガイドを見ればどちらも簡単にできます！

GitHub Actionsを利用する準備

Step1. Asanaトークン作成ページでトークンを生成する。
Step2. 連携したいGitHubリポジトリの環境変数に ASANA_SECRET でトークンをセットする。
Step3. GitHub Actionワークフローを作成する。

プルリクエストの説明にタスクのステータスをコメントし、関連する Asana タスクへのリンクを表示するアクション

# .github/workflows/comment-on-task.yml
on:
  pull_request:
    types: [opened, closed, reopened]

jobs:
  create-comment-in-asana-task-job:
    runs-on: ubuntu-latest
    name: Create a comment in Asana Task
    steps:
      - name: Create a comment
+       continue-on-error: true
        uses: Asana/comment-on-task-github-action@latest
        id: createComment
        with:
          asana-secret: ${{ secrets.ASANA_SECRET }}
          comment-text: "{{PR_NAME}} is {{PR_STATE}}: {{PR_URL}}"
      - name: Get status
+       if: success()
        run: echo "Status is ${{ steps.createComment.outputs.status }}"

試しにPRをクローズしてみたら、以下のようにAsanaタスクにコメントが追加されています！

Asana のタスクにプルリクエストが添付されていない場合に、プルリクエストの説明から GitHub ウィジェットを添付するアクション

# .github/workflows/create-asana-attachment.yml
on:
  pull_request:
    types: [opened, reopened]

jobs:
  create-asana-attachment-job:
    runs-on: ubuntu-latest
    name: Create pull request attachments on Asana tasks
    steps:
      - name: Create pull request attachments
+       continue-on-error: true
        uses: Asana/create-app-attachment-github-action@latest
        id: postAttachment
        with:
          asana-secret: ${{ secrets.ASANA_SECRET }}
      - name: Log output status
+      　　if: success()　
        run: echo "Status is ${{ steps.postAttachment.outputs.status }}"

GitHubのプルリクエストの概要欄に、AsanaタスクのURLを入れることで、以下のような感じでAsanaタスクに連携されました！

注意点

こちらの記事にもあるように、Asana に紐づかないプルリクエストのワークフローがエラーになってしまったので、continue-on-error: trueを追加しています！

2. GitHubのプルリクエストのステータスとAsanaタスクの進捗を連携したい

ステータス管理についてはこちらのGitHub Actionsのパッケージを使わせてもらうことにした！

マージ、クローズしたプルリクエストと連携しているAsanaタスクを完了ステータスに更新する

name: Mark a Asana task complete

on:
  pull_request:
    types: [closed]

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: everphone-gmbh/github-asana-action@385529c
+       continue-on-error: true
        if: github.event.pull_request.merged
        with:
-         asana-pat: ${{ secrets.ASANA_PAT }}
+         asana-pat: ${{ secrets.ASANA_SECRET }}
          action: 'complete-task'
          is-complete: true

PR作成されたときに In Progressセクションにタスクを移動させる

name: Move a task to a different section

on:
  pull_request:
    types: [opened]

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: everphone-gmbh/github-asana-action@385529c
+       continue-on-error: true
        with:
-         asana-pat: ${{ secrets.ASANA_PAT }}
+         asana-pat: ${{ secrets.ASANA_SECRET }}
          action: 'move-section'
          targets: '[{"project": "プロジェクト名", "section": "セクション名"}]'

終わりに

今回は既にパッケージとして用意してくれているGitHub Actionsを利用しただけですが、
いつかの機会に、GitHubAPI, AsanaAPIを使ってパッケージ作ったら面白そうだなと思いながら、、、

終わる。

参考

Asana公式ガイド: https://asana.com/ja/guide/help/api/github
https://note.com/_jaruuu/n/ncf3939dbd15e#97497cea-deef-4dd9-aa76-238f4b400ee6