GitHubで自動更新のカンバン作ってみたい プルリクとプロジェクトのカードを連動させる編

はじめに

諸事情により前回から9ヶ月以上間が空いてすみません。
前回はPull requestがどんなアクションに反応してどんなデータを送信するかについて確認してざっとまとめました。
GitHubで自動更新のカンバン作ってみたい Pull requestイベント確認編 - Qiita
今回はいよいよプルリク作られたらプロジェクトのカードを作成し、ラベルが変更されたらカードを移動するようにしたいと思います。

この記事でやること

プルリク作られたらプロジェクトのカードを作成し、ラベルが変更されたりマージされたりしたらカードを移動するようにします。
最後にコード掲載＆動作サンプル用のリポジトリを用意しています。
(GitHubの仕様上そこで試せるのは一部のみです。)

準備

実装の前に仕様決めとプロジェクトの作成を行います。
(ここに書いている仕様はあくまでサンプルです。 実際に運用しているルールとは異なります。)

ラベルで進捗整理

今回は以下のようなラベルでプルリクの進捗を管理している場合を考えます。

ラベル	進捗
(なし)	[WIP]で実装中など
レビュー待ち	実装したので見てほしい
レビュー後改修中	レビューで指摘された点改修中
セルフテスト待ち	セルフテスト中
テスト待ち	テスト待ち
テスト後改修中	テストで指摘された点改修中
テスト済み	リリース待ち

プロジェクトとカラムを作成する

カンバンを意識して以下の7カラムを作成しました。

• 未分類
• 実装中
• レビュー待ち
• セルフテスト待ち
• テスト待ち
• リリース待ち
• リリース完了

プルリクがどうなったらカードをどうするか考える

今回はプルリクに対して次のような操作があればカードを自動操作することにします。
(サンプルでは複数ラベルが貼られた場合やプルリクがクローズされた場合などは考えないこととします。)

プルリク操作	カード操作
プルリク作成	[未分類]カラムにプルリクのカードを作成
タイトルに「[WIP]」をつけてでプルリク作成	[実装中]カラムにプルリクのカードを作成
[レビュー待ち]ラベルを貼る	[レビュー待ち]カラムにカードを移動
[レビュー後改修中]ラベルを貼る	[実装中]カラムにカードを移動
[セルフテスト待ち]ラベルを貼る	[セルフテスト]カラムにカードを移動
[テスト待ち]ラベルを貼る	[テスト待ち]カラムにカードを移動
[テスト済み]ラベルを貼る	[レビュー待ち]カラムにカードを移動
プルリクマージ	[完了]カラムにカードを移動

実装

仕様が決まったので実装していきます。
以下のようにアクションごとに関数を呼び出して操作することにします。
(ここで紹介するコードは突っ込みどころがあるかと思いますが、一旦スルーでお願いします。)

doPost.gs

function doPost(data) {
  data = JSON.parse(data.postData.contents);
  switch (data.action) {
    case 'opened':
      onOpened(data);
      break;
    case 'labeled':
      onLabeled(data);
      break;
    case 'closed':
      onClosed(data);
      break;
  }
}

APIのトークンを取得してカラムのIDを調べる

以下の記事などをもとにAPIのトークンを取得してカラムのIDを調べておいてください。
GitHubのProjects用API(試験運用中)を使ってみた - Qiita
そのままだとどれがどれだかわからなくなりやすいので、変数に入れておくといいでしょう。

定数.gs

var UNCATEGORIZED; //「未分類」カラムのID;
var IN_IMPLEMENTATION; //「実装中」カラムのID;
var REVIEW_PENDING; //「レビュー待ち」カラムのID;
var SELF_TEST_PENDING; //「セルフテスト待ち」カラムのID;
var TEST_PENDING; //「テスト待ち」カラムのID;
var RELEASE_PENDING; //「リリース待ち」カラムのID;
var RELEASE_COMPLETE; //「リリース完了」カラムのID;

プルリク作成でカード作成

プルリクが作成されたらプロジェクトにカードを作成します。
titleに[WIP]が含まれているかどうかは正規表現を使って調べます。
大文字小文字は問わないことにします。

onOpened.gs

function onOpened(data) {
  if (data.pull_request.title.match(/\[WIP]/i)) {
    createCard(data.pull_request.id, IN_IMPLEMENTATION);
  } else {
    createCard(data.pull_request.id, UNCATEGORIZED);
  }
}

createCard.gs

function createCard(pullRequestId, columnId) {
  var headers = {
    "Accept" : "application/vnd.github.inertia-preview+json"
  };
  var payload = {
    "content_id" : pullRequestId,
    "content_type" : "PullRequest"
  };
  var options = {
    "method" : "POST",
    "headers" : headers,
    "payload" : JSON.stringify(payload)
  };

  var url = "https://api.github.com/projects/columns/" + columnId + "/cards?access_token=取得したトークン";

  return JSON.parse(UrlFetchApp.fetch(url, options));
}

やってみた

こんな感じで[WIP]でプルリクを作成すると実装中カラムにカードが作成されます。

プルリクIDからカードIDを調べる

他の場合はカードを移動するので、プルリクのIDからカードを特定する必要があります。
ですが、ProjectにプルリクIDからカードIDを調べるAPIは用意されていないので、カラムのカードを取得するAPIを使って自前で実装する必要があります。

getCardId.gs

function getCardId(pullRequestId) {
  var columnIds = [UNCATEGORIZED, IN_IMPLEMENTATION, REVIEW_PENDING, SELF_TEST_PENDING, TEST_PENDING, RELEASE_PENDING, RELEASE_COMPLETE];
  for (var n = 0; n < columnIds.length; n++) {
    var cards = getCardList(columnIds[n]);
    for (var m = 0;m < cards.length; m ++) {
      if (cards[m].content_url.indexOf(pullRequestId) !== -1) {
        return cards[m].id;
      }
    }
  }
}

function getCardList(columnId) {
  var headers = {
    "Accept" : "application/vnd.github.inertia-preview+json"
  };
  var options = {
    "method" : "GET",
    "headers" : headers
  };
  var url = "https://api.github.com/projects/columns/" + columnId + "/cards?access_token=取得したトークン";
  return JSON.parse(UrlFetchApp.fetch(url, options));
}

ラベル追加でカード移動

いよいよ自動更新です。
プルリクIDと移動先カラムのIDを引数で渡してプルリクのカードを移動させるようにします。

onLabeled.gs

function onLabeled(data) {
  switch (data.label.name) {
    case "レビュー待ち":
      moveCard(data.number, REVIEW_PENDING);
      break;
    case "レビュー後改修中":
      moveCard(data.number, IN_IMPLEMENTATION);
      break;
    case "セルフテスト待ち":
      moveCard(data.number, SELF_TEST_PENDING);
      break;
    case "テスト待ち":
      moveCard(data.number, TEST_PENDING);
      break;
    case "テスト後改修中":
      moveCard(data.number, IN_IMPLEMENTATION);
      break;
    case "テスト済み":
      moveCard(data.number, REVIEW_PENDING);
      break;
  }
}

moveCard.gs

function moveCard(pullRequestId, columnId) {
  var headers = {
    "Accept" : "application/vnd.github.inertia-preview+json"
  };
  var payload = JSON.stringify({
    "position" : "top",
    "column_id" : columnId
  });
  var options = {
    "method" : "POST",
    "headers" : headers,
    "payload" : payload
  };
  var cardId = getCardId(pullRequestId);
  var url = "https://api.github.com/projects/columns/cards/" + cardId + "/moves?access_token=取得したトークン";
  UrlFetchApp.fetch(url, options);
}

やってみた

こんな感じで[セルフテスト待ち]ラベルを貼るとセルフテスト待ちカラムにカードが移動します。

プルリクマージでカード移動

最後にマージした時にリリース完了カラムにカードを移動します。
マージせずクローズした分に関しては今回は何もしないことにしていますが、運用によってはそれ用のカラムを用意してそこに移動する・カードを削除するといった実装をするといいでしょう。

onClosed.gs

function onClosed(data) {
  if (!data.pull_request.merged) {
    return;
  }
  moveCard(data.number, RELEASE_COMPLETE);
}

やってみた

こんな感じでプルリクをマージするとリリース完了カラムにカードが移動・・・しませんでした。
リファクタリングした時にコードミスってました。
修正後のコードであれば問題なく移動しますし、記事に載せたコードでも動くはずです。
(正しく動いている様子は動作サンプル見てください。)

導入

Webhook受信編ですでにWebhookの設定は済んでいるので、プロジェクトバージョンを更新するだけです。
別プロジェクトで作った人やそもそも初めての人はその記事の通りWebhookを設定してください。

コード掲載＆動作サンプル

コード掲載＆動作サンプルとしてKanaSakaguchi/AutoUpdateKanbanForGitHubというリポジトリを用意しました。
ぜひ実際にプルリク立てたりして試してみてください。
と言いたいところですが、リポジトリ関係者以外で作成後にラベルを操作したりすることはできないようです。
なので、プルリクのラベル操作等でカードが自動操作される様子を自分で試すには各自スクリプトを組んでみてください。

すでに私がここのコードをリファクタしてみたプルリクを作成からマージまでやっているので、ラベルを変更した後すぐにカートが移動されている様子を確認できます。

ですが、上記リファクタはミスがあったので修正しました。
合わせてそのプルリクを作ってマージするまでを録画しました。
これでプルリクの状況に合わせてプロジェクトのカードが移動している様子がわかると思います。

運用してみて

実際2017年6月終わりから(勝手に)運用して2018年4月現在で9ヶ月ちょっと経っています。
「知らないところで[マージ済み]カラムと[マージせずクローズ]カラムを消されて思ったように動かないことに4日後に気づいた」なんてこともありしましたが、ほかに大きなトラブルもなく運用できています。
(ほとんど自分でマージすることがないので発見が遅れました。)
複数人が関わっているリポジトリで運用する場合は、あらかじめ説明しておいたほうがいいですね。

自分のトークンを使っているので、自分が関係ないプルリクも自分が操作したという記録が残るのがちょっと気になってます、
BOTアカウントを作って運用できるならこの問題は解消されますね。

次回予告

GitHubがプルリクエストの状態を元にProjectに反映させる機能を作っていたので使って見たいと思います。
(今度はあまり間を開けずに投稿したい。)

[余談] 画像アップロードに困った件

やっとこの記事を書き上げるための準備ができたのが四月中旬。
録画したMOVをリサイズなしのフレームレート20でGIFアニメにしたもの(18.8MB)を貼ろうとしたらエラーになりました。
ですが、![error]()としか出なくて不親切でした。
容量オーバーを疑って投稿のコメント欄を見ると、9.xxMB/100MBでした。
(具体的な数値は覚えてないです。)
この10MB弱を使用可能残量だと思い、5月になるまで投稿を延期することにしました。
(そんなに画像をあげた覚えなかったのでなんでだろう？でした。)
　
で、5月になって再トライするも、結果は同じ。
ここで、1ファイル10MBまでだと気づきました。
DocBase使っていなければ1ファイル10MB制限に気づけませんでした。
(もっと早く気づけていればもっと早く投稿できたのに。)
Qiitaのヘルプを確認しましたが、1ファイルの容量制限のことは書かれていませんでした。
(DocBaseの場合はヘルプに書かれています)
Qiitaには1ファイル10MBまでとわかるようにして欲しいと思いました。
(そもそも27インチの画面録画してGIFアニメにしたら大きいですね。)