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

ご安全に！角田です。

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

adventar.org

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

クラメソなみなさん @mao_instantlife @MasaruOgura @zephiransas とか、岡山のみなさん @razon @maepon @mako_wis @t_furusato とか、JBUGご参加者のなかでも特に @afroriansym567 @kanbo0605 @xx_norns_xx @mt8_dot_biz @makky_tyuyan あたりのBacklogラバーなみなさんは参加してくださると予想😆 ！

— Meggy🎄ヌーラボ (@Megumi_Isogawa) 2018年11月28日

本題

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

blog.a-know.me

📊Pixelaのグラフを作る

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

ユーザ作成

トークンは自分でいい感じのやつを生成してください。

グラフ作成

先ほどユーザ作成時に指定したトークンをリクエストヘッダに指定して、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を実装します。

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

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

⚙BacklogのWebhookを指定

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

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

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

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