Trello Webhook × GoogleAppsScript の連携してカンバンの分析を楽にして見る

みなさんこんばんは。
サイトビジットの横沢です。

弊社のエンジニアチームはTrelloを使ってカンバン方式で日々開発をしています。
カンバンてとっても便利で見やすいのですごく好きです。

カンバンの醍醐味は何と言っても **あえてルールを絞る** ことでチームごとに最適な開発スタイルを見つけることだと思います。

カンバンの運用を開始するにあたって以下の書籍を読みました。

[カンバン仕事術](https://www.amazon.co.jp/%E3%82%AB%E3%83%B3%E3%83%90%E3%83%B3%E4%BB%95%E4%BA%8B%E8%A1%93-Marcus-Hammarberg/dp/487311764X)（特にアフィリエイトとか貼ってないのでちょっと捻くれている方でも安心です）
![51CvAjXFHEL._SX351_BO1,204,203,200_.jpg](https://qiita-image-store.s3.amazonaws.com/0/75102/f021ccb6-d9da-5606-c70a-1d5245294a97.jpeg)


この本に開発効率の計測の仕方として色々書いてあり実践してみたのですが、
計測するのが結構手間なのでやっぱりそこは自動化したいですよね。

そこで、`Trello Webhook` と `Google Apps Script(GAS)` を連携させて`Google SpreaeSheet`に書き出して、開発効率の分析を楽にしちゃおうじゃないかということを思ったわけです。

で、今回の記事はTrelloとGASの登録が思ったよりテクい + 日本語のドキュメントが無かったので記事を投稿してみました。


# Trello WebhookをGASに登録
TrelloのWebhookの登録ってめっちゃめんどくさいと思いませんか？笑

スーパーエリートの皆様ならそうは思わないのでしょうが、
私は死ぬほど苦戦しました。

TrelloのWebhookがめんどくさいなーと思う点は以下です。

- ドキュメントがちょっと分かりにくい
- Webhookの登録時に`HEADリクエスト`を送る必要がある

## ドキュメントがちょっと分かりにくい

[TrelloのWebhookドキュメント](https://developers.trello.com/page/webhooks)を見ると、
「以下のようにポストして登録してね」、と書いてあります。（横に私の補足を書いておきます。）

```bash:curl
curl -X POST -H "Content-Type: application/json" \
https://api.trello.com/1/tokens/{APIToken}/webhooks/ \
-d '{
  "key": "{APIKey}", 
  "callbackURL": "http://www.mywebsite.com/trelloCallback",
  "idModel":"4d5ea62fd76aa1136000000c", // 登録したいBoardのID
  "description": "My first webhook"  // なんでもOK
}'
```
### APIKeyとAPIToken
[このリンク](https://trello.com/app-key)から取得してください。

### callbackURL
使いたいGASのリンクを入力。

### idModel
これがよく分かりにくいのですが、 **Webhookを利用したいBoardのID** を入力します。
[Trello APIのドキュメント](https://developers.trello.com/v1.0/reference#boardsboardid-1)から取った方が早いかも。
使っているTrelloのpathの一部を入力すればIDが取得できます。


## Webhookの登録時に`HEADリクエスト`を送る必要がある
個人的にはこれが一番手こずりました。（いや、ちゃんと書いてあるんですけどね。）

> The provided callbackURL must be a valid URL during the creation of the webhook. We run a quick HTTP HEAD request on the URL, and if a 200 status code is not returned in the response, then the webhook will not be created. Additionally, if your callbackURL contains an invalid SSL certificate the webhook will not be created (no SSL certificate will not cause the creation to fail).

GETでよくない？とか思ったのですが、これじゃないとダメらしい。
AWS Lambda でもWebhook登録したのですがちょっとハマりました。
（需要があれば今度記事書きます）

# 手順
1. GASのURLの準備（公開設定は`全員`に）
    2. [こちら]
(https://qiita.com/tfuruya/items/3c306ee03d1ac290bcef)とか参考に
2. TrelloのKeyとTokenの準備（上記参照）
3. GASの公開設定を`全員（匿名ユーザーを含む）`に変更


## 1. GASのURLの準備（公開設定は`全員`に）
他のサイトにもよくあるんですが、
GASをアプリとして公開するときに
<img width="439" alt="Screen Shot 2018-11-06 at 23.00.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/75102/b624aa15-72d0-fd70-dce3-e0f2384e3e62.png">

こんな感じでやりませんか？
実はこれでさっきの登録用のcurl叩くと403が返ってきて登録できないのです。
`curl -I {URL}`
で叩くと分かります。（403が返ってくる）


なので
<img width="433" alt="Screen Shot 2018-11-06 at 23.01.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/75102/050e0b31-6b10-a754-08eb-b653390b129b.png">

これが正解。
ちなみにこれで `curl -I {URL}` コマンド叩くと302が返ってきます。（なんでこれでOKなのか教えて偉い人）

## 2. TrelloのKeyとTokenの準備（上記参照）
上記をご参照ください

## 3. GASの公開設定を`全員（匿名ユーザーを含む）`に変更
これが盲点。
Trello Webhookの登録後にGASの方をこちらに変更しないとWebhookが発動しません。

そして後はGAS内に`function doPost()` を作るだけ！


以上です。
これで `Trello Webhook` と `GAS`が連携したので、あとはコード書くだけです。

GASってほんと便利ですよね。

[ツイッター](http://bit.ly/2PkyJHK)もやっているのでお友達になっていただけると嬉しいです。