週休七日

趣味のこととか、技術のこととか、読書感想文とか

Github IssueとTrelloをWebhookでつなぐ

技術 自動化

TL;DR

会社にTrelloを導入したのでGithub IssueとTrelloを連携してみた

経緯

会社でTrelloを導入しました。
もともと社内ではJIRAを使用していましたが、オーバースペック過ぎたため移行しました。(それと重い)
バグ報告などはGithub Issueを利用してるのでIssueが作られたらTrelloにカードが作成されるようにします。
ココではコードを書いて説明していくのではなく、やり方やTrello APIについて書いていきます。

コールバック先の設定

説明は省きますが、Webhookを受け取るコールバック先を設定します。
今回筆者は手軽にLambda x API Gatewayで構築しました。

GithubのPersonal access tokenの取得

Setting > Developer setting > Personal access token > Generate new tokenからGithub APIを使用するためのトークンを生成します。
Select scopesではリポジトリの情報を得るためにrepoにチェックを入れました。

f:id:luca3104:20180318105159p:plain

ちなみにこのトークンはOrganizationには無いです。会社で使うときも個人のアクセストークンが必要なので、可能であれば会社用にアカウントを作成しましょう。

認証

Github Webhookから呼び出される際にオープンなので認証をします。
HMACでヘッダーのX-Hub-Signatureを検証します。
f:id:luca3104:20180318172837p:plain Node.jsでは以下のように記述しました。

  const hmac = crypto.createHmac('sha1',{Private access token})
  hmac.update({受け取ったbody}, 'utf8')
  const signature = 'sha1=' + hmac.digest('hex')

TrelloのAPI tokenを取得する。

https://trello.com/app-key/
上記にアクセスし、APIキーを取得します。

f:id:luca3104:20180318173837p:plain:w400

キーの枠に書かれているものがAPIキーです。
次に下部にある Token をクリックします。
以下のような画面が表示されるので許可をクリックします。

f:id:luca3104:20180318173832p:plain:w400

すると以下のような画面が表示されるので下部(灰色で消してある部分)にあるAPI tokenをメモしておきます。

f:id:luca3104:20180318173826p:plain:w400

これで準備が完了です。

Webhookから呼び出されたらTrelloのAPIを叩く

TrelloのAPIを叩きます。 今回使用したAPIを紹介していく形で書きます。

ボードIDの取得

まず何をするにもボードIDが必要です。
個人のボードIDを取得するには/1/members/{username}/boardsを利用します。
組織を使ってる場合は/1/organization/{organization name}/boardsを利用します。
クエリーパラメータとして、?fields=id,name&key={APIキー}&token={APIトークン}を指定します。
今回はGithubリポジトリ名とボード名を同じにして、一致したらそのIDを使用するようにします。

ボードのリストIDの取得

カードを作成するリストを指定するためにリストIDが必要です。
リストIDを取得するには/1/boards/{ボードID}/listsを利用します。
クエリーパラメータは先程と同じものを指定します。

カードを作成する

IssueのActionを見て、openedの場合カードを作成します。
カードを作成するには/1/cardsにPOSTリクエストします。
パラメータは以下の通りです。

        const requestJSON = {
          name:'#' + ISSUE_NUMBER + ' ' +ISSUE_TITLE,
          desc: ISSUE_BODY,
          idList: {リストID},
          key: {APIキー},
          token: {APIトークン}
        }

今回、作成されたらBackLogリストに入るように条件分岐しています。

上記のAPIでGithub IssueからTrelloへのカードの作成ができます。
筆者は他にもIssueをcloseしたらDoneレーンに移動したり、Bugラベルが貼られたらBugレーンに移動したりする実装をしています。

Github Webhookの設定

Webhookを設定するリポジトリから、Setting > Webhooks > Add webhookにアクセスします。

Payload URLに先程コールバック先として設定したURLを入力します。
Secretには最初に取得したPrivate access tokenを設定します。
Which events would you like to trigger this webhook?はLet me select individual events.を選択し、IsuueとLabelsを選択します。
以下のようになります。
f:id:luca3104:20180318012931p:plain

最後に

TrelloのAPIドキュメントが読みづらくて少し苦戦しました。

Trelloからも連携したらめちゃくちゃ便利ですね(いつかやる)
みなさんも自動化に挑戦して会社の環境を良くしていきましょう！