Trelloのタスク完了でGitHubのような芝を生やして達成感を生み出してみた

7856 ワード
Firebase TypeScript Trello サーバーレス Pixela TypeScript テキストリンク

こんにちは！わみです。

皆さんタスク管理をされていますか？
いろんなタスク管理アプリがある中、私はTrelloを使ってタスク管理を行っています。
Trelloを使うことで、簡単にタスクを管理することができます。

Trelloは便利なのですが、タスクが終わっても誰も褒めてくれません。
拡張などで褒めてくれるものはあるかもしれませんが、せっかくなら自分がほしいものはエンジニアとして作るしかありません！！（断定

せっかくなら、日々の努力をちゃんと見れるアプリをサクッと作っていきましょう！

というわけで、今回は【Pixela】というGitHubを使うエンジニアならよく見たことのある芝を生やせる表示アプリを使って、努力を見れるようにしていきます！

作ったもの

動画を作っておきました！

Trelloのタスクを【完了】の場所に動かしたことをきっかけにして、PixelaへAPIを叩いて、サイトに緑が増えます！

Trelloの完了タスク が見れるページ

Pixelaについて簡単な紹介

APIを叩くことでGitHubでよく見るような日々の記録を貯められるサービスになっています！

公式サイトでは、CI/CDと連携して開発状態のグラフ化や、読んだ本のページ数を記録したり、体重の増減をグラフ化したりといろいろできそうですね。

（「Pixela」だけで検索するとググラビリティが低いので、検索するときに後ろに「API」とかつけるといいと思う）

どういう風に動いているか

Firebase Cloud Functionsを用いてサーバーレスで作っています。

まずはFirebase Cloud FunctionsでTrelloからのWebhookを受信するためのAPIを作成します。

Trelloに作成したAPIを設定すると、Trelloのカードを作ったり、カードを動かしたりすると毎回Webhookが飛んでくるようになります。
今回は、タスクが完了したらPixelaのAPIを叩きたいのでそのための条件式をFirebase Cloud Functionsに書きます。

タスクが完了したときにPixelaのAPIを叩いて、データを蓄積する流れになっています。

実際に自分用に動かしてみよう

Firebase Cloud Functionsをデプロイする

前準備：Firebaseのプロジェクトを作成して、料金プランをBlazeに変更しておいてください。（Functionsを使うために必要です。）

今回のプログラムはGitHubに上げてあるのでそちらを参照してください。

手元に用意できたら、おそらく下記のコマンドを実行することでFirebase Cloud Functionsにデプロイができるはずです。

npm install -g firebase-tools
firebase use -add
# ダイアログで先ほど作成したプロジェクトに追加する
cd functions
npm i
npm run deploy

デプロイコマンドをして、問題がなければ下記のようなAPIのURLがコンソールに表示されます。

https://asia-northeast1-{プロジェクト名}.cloudfunctions.net/trelloWebhook

ここまでできたら次はTrelloのセットアップをします。

補足資料

Trelloのセットアップ

  1. https://trello.com/app-key からAPIキーとトークンを取得します。

  2. 先ほど取得したAPIキーとトークンを使って、Webhookで取得したいボードのIDを確認します。

curl -i -X GET \
 'https://api.trello.com/1/members/wamisnet/boards?key={1で取得したTrelloのAPIキー}&token={1で取得したTrelloのトークン}'

実行に成功すると画像のようにIDがわかるので、そのIDを次の手順に使います。

3. これまでに取得した情報を元にAPIを作成して、実行します。

curl -i -X POST \
      -H "Content-Type:application/json" \
      -d \
   '' \
    'https://api.trello.com/1/webhooks/?key={1で取得したTrelloのAPIキー}&token={1で取得したTrelloのトークン}&callbackURL={Firebase Cloud FunctionsのURL}&idModel={2で取得したボードID}&description={ボードの説明}'

成功すると下記のようなJSONが返ってきます。

{
   "id": "600ae3ad9a80a8",
   "description": "trelloToPixela",
   "idModel": "5f76c8eb",
   "callbackURL": "https://asia-northeast1.cloudfunctions.net/trelloWebhook",
   "active": true,
   "consecutiveFailures": 0,
   "firstConsecutiveFailDate": null
   }

ここまで来たらTrelloのセットアップは完了です！

Pixelaのセットアップ

先ほどCloneしたプログラムの中のfunctions/srcの下の「local.ts」というプログラムがコメントアウトされているので、コメントアウトを外しましょう。

ユーザーIDや、グラフID、ユーザートークン、グラフの設定値などを入れてnpm run localと実行するとアカウントが作られて、コンソールにURLが表示されます。

設定できる項目説明

  • ユーザーID: 英字、数字で1-32文字以内
  • ユーザートークン: 英字、数字で8-128文字以内
  • グラフID: 英字、数字で1-16文字以内
  • グラフ名: グラフページで表示されるタイトル
  • ユニット: 個数のカウント単位（例:Commit,kilogram, calory）
  • タイプ: 整数（int）か小数点あり（float）
  • グラフ色: shibafu (緑), momiji (赤), sora (青), ichou (黄色), ajisai (紫), kuro (黒)
  • タイムゾーン: Asia/Tokyo

URLをブラウザで開いてみて、アクセスできるか確認してください。

環境変数の設定

Pixelaのアカウントもできたところで、Firebase Cloud Functionsに先ほど作成したPixelaの設定情報を入れ込みます。
空白になっている部分に先ほど作成した下記のコマンドを実行してください。

firebase functions:config:set pixela.userid="" pixela.graphid="" pixela.token=""
npm run deploy

これでセットアップは完了です！

動画にあるように、Trelloのカードを動かしてみると、ちゃんと色が付くはずです！

まとめ

Firebase Cloud FunctionsとPixelaを用いることでサーバレスに安価かつ手早く作業の可視化を作れました！

実際にドキュメントを読みながら作業をしましたが、癖も特になくわかりやすいAPIを使って、実際に芝を生やすことができました。

Pixelaで簡単にこういう日々の進捗を可視化できるのはあとあと振り返りをする上でも便利だと思うので、ぜひ一度Trelloと連携してみて使い心地をためしたあとにでも、自分のアイデアをぜひ実装して、連携させてみるとよいでしょう！