暗黒エンジニアブログ

株式会社アイネットのエンジニア感があるんだかないんだかよくわからないブログ

Backlogのダッシュボードに草を生やす #Backlog #Pixela

f:id:razon:20181128180253p:plain

ご安全に!角田です。

このエントリは、Backlog Advent Calendar 2018の5日目です。

adventar.org

QMK(急にメンションが来たので)書きました。

本題

Backlogのお知らせにはMarkdownが書けるので、ここにPixelaのグラフを放り込んで賑わいを可視化するといい感じなのでは?と思ったので、そんな感じで行きたいと思います。よろしくお願いします。

blog.a-know.me

📊Pixelaのグラフを作る

まずはPixelaのユーザ登録とグラフ作成を行います。
Pixelaは基本APIでビシバシやっていくので、今回はPostmanでAPIを叩いていきます。

ユーザ作成

f:id:razon:20181128164747p:plain
トークンは自分でいい感じのやつを生成してください。

グラフ作成

f:id:razon:20181128165020p:plainf:id:razon:20181128165026p:plain
先ほどユーザ作成時に指定したトークンをリクエストヘッダに指定して、PixelaのAPIを叩いていくことになります。

⚡BacklogのWebhook→Pixelaのincrement API連携

Zapier でいいかなという気もしますが今回は趣向を変えてGoogle Apps Scriptでやります。
(Slackに流すのはZapierでやってるんですよね)

function doPost() {
  var headers = {
    'X-USER-TOKEN': 'thisissecret'
  };
  var options = {
    'method': 'PUT',
    "headers" : headers
  };  
  var response = UrlFetchApp.fetch('Pixela graph increment url', options);  
}

WebhookはPostで飛ぶのでdoPostを実装します。

f:id:razon:20181128165924p:plainf:id:razon:20181128165936p:plain

📄Backlogのお知らせにPixelaのグラフを貼り付ける

スペース設定のお知らせでPixelaのグラフを貼り付けます。

f:id:razon:20181128170334p:plain

⚙BacklogのWebhookを指定

プロジェクト設定のインテグレーションで、Webhookを追加します。

f:id:razon:20181130131902p:plainf:id:razon:20181130131916p:plain

f:id:razon:20181128170834p:plain
WebhookのURLにGASの公開URLを指定します。今回は、課題かWikiの更新が入るとPixelaのquantityがインクリメントされるようにしました。「今生きてるプロジェクト全部の合計で見れればいいかな」と思ったので、対象のプロジェクト全部に同じWebhookを作成して、すべての合計が1つのグラフに集約される形としています。この辺はお好みでグラフを分けるなり重み付けを行うなり調整してみればよいのではないでしょうか。

💪完成したものがこちらになります

f:id:razon:20181204204247p:plain

草生えました。よかったですね。
いやよくないわ!草がいまいち賑わってないわ!これからがんばります。