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公式ガイド](https://asana.com/ja/guide/help/api/github)を見ればどちらも簡単にできます！

#### GitHub Actionsを利用する準備
Step1. [Asanaトークン作成ページ](https://github.integrations.asana.plus/auth?domainId=ghactions.)でトークンを生成する。
Step2. 連携したいGitHubリポジトリの環境変数に `ASANA_SECRET` でトークンをセットする。
Step3. GitHub Actionワークフローを作成する。

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

https://github.com/Asana/comment-on-task-github-action

```diff_yaml
# .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タスクにコメントが追加されています！
![●_Refactoring_-_Asana___GitHub連携_-_Asana.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240667/0102b380-d18c-2f8b-9d26-0b0d670ca2e7.png)


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

https://github.com/Asana/create-app-attachment-github-action

```diff_yaml
# .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タスクに連携されました！
![●_Refactoring_-_Asana___GitHub連携_-_Asana.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240667/57bc5964-7618-6df5-6fb5-7b4a0125e8f4.png)



**注意点**

:::note warn
[こちらの記事](https://note.com/_jaruuu/n/ncf3939dbd15e#97497cea-deef-4dd9-aa76-238f4b400ee6)にもあるように、Asana に紐づかないプルリクエストのワークフローがエラーになってしまったので、`continue-on-error: true`を追加しています！
:::

### 2. GitHubのプルリクエストのステータスとAsanaタスクの進捗を連携したい
ステータス管理についてはこちらのGitHub Actionsのパッケージを使わせてもらうことにした！

https://github.com/everphone-gmbh/github-asana-action

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

```diff_yaml
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セクションにタスクを移動させる

```diff_yaml
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