【Todoist→Pixela】Todoistでタスクを完了したら草生やす
IMAGE: https://cdn-ak.f.st-hatena.com/images/fotolife/i/ikmbear/20210108/20210108111222.jpg

Todoistのタスクが完了したら草を生やしたい
Pixelaというサービスを知ってから、私の頭の中は「どう草を生やすか」で持ちきりです。
今回は私が日常的に使っているタスク管理アプリ「Todoist」と連携し、タスクが完了したら草を生やすようにしてみました。
なんでも草を生やしたがるお年頃
ikuma-t/todoist-graph | Pixela https://t.co/2eRIHRZq5W #Pixela
— Ikuma_t (@ikumatdkr) 2021年1月8日
Pixela側の設定
一億総草生やし社会の実現のためには、「いつものそれ」ではいけませんね。というわけで、Pixela側の設定も記載します。
手順としては次の通りです。全部ターミナルからcurlコマンドで実行しています。
- (ユーザー未登録の場合)ユーザー登録
- Todoist用のグラフの作成
- Webhook の登録
1. (ユーザー未登録の場合)ユーザ登録
$ curl -X POST https://pixe.la/v1/users -d '{"token":"{PASSWORD}", "username":"ikuma-t", "agreeTermsOfService":"yes", "notMinor":"yes"}'tokenの後ろの{PASSWORD}には任意のパスワードを、usernameにはグローバルに一意な自分のユーザIDを設定してください。
※以降も設定した値に置き換えて進めてください。
2. Todoist用のグラフの作成
$ curl -X POST https://pixe.la/v1/users/ikuma-t/graphs -H 'X-USER-TOKEN:{PASSWORD}' -d '{"id":"todoist-graph","name":"todoist-graph","unit":"updates","type":"int","color":"ichou","timezone":"Asia/Tokyo"}'指定できるパラメータはPOST - /v1/users//graphs - Pixela API Documentを参照してください。
Scrapboxの更新頻度で草を生やす際に芝生色を使ったので、今回はcolorにichouを指定しています。
3. Webhookの登録
$ curl -X POST https://pixe.la/v1/users/ikuma-t/webhooks -H 'X-USER-TOKEN:{PASSWORD}' -d '{"graphID":"todoist-graph","type":"increment"}' | pbcopyリク$1トすると
{"webhookHash":"xxxxx.....xxxxx","message":"Success.","isSuccess":true}こんな感じの値が返ってくるのですが、これをコピーするためにpbcopyをくっつけています(手動でコピーしてもいいんですけどね)。
実際に使うのは"webhookHash":"xxxxx.....xxxxx"の値だけです。
これでPixelaの設定は完了です!Todoistの設定をしましょう!
Todoist側の設定
Todoistのタスク完了時に草を生やすには2種類の方法があります。
| TodoistAPI | IFTTT | |
|---|---|---|
| 利用可能なTodoistプラン | プレミアム | 制限なし |
| 送信可能なタイミング | タスク(追加、更新、完了、完了解除、削除) メモ(追加、更新、削除) プロジェクト(追加、更新、削除、$1、$1解除) ラベル(追加、更新、削除) フィルタ(追加、更新、削除) リマインダー(発火時) | タスク(追加、完了 ※いずれもPJもしくはラベル指定可能) |
今回はタスクを完了したら草生やすだけなので、どちらを使っても変わらないです。 この記事では両方の方法をご紹介したいと思います。(ちなみにIFTTTを通さない分、少し反映が早い(?)ので私はTodoistAPIを使っています)
方法1:IFTTTを使う
※IFTTTのアカウントを持っている前提で話を進めます。
こちらから新しいアプリを作成していきます。
流れとしては
- If ThisにTodoistを設定する
- Then ThatにWebhookを設定する
以上です!
1. If ThisにTodoistを設定する
※初めての場合、IFTTTとTodoistの連携が必要です。今回は省略いたします。

1.If Thisからスタートします。

2.連携するサービスにTodoistを設定します。

3.トリガーを設定します。 各トリガーの説明は図の通りです。今回はタスク完了時を想定しているので、「New Completed Task」を設定します

4.Todoistのどのプロジェクトを監視対象にするか設定します。今回は全部のタスクを監視対象としたいので「Any Project」のままにしておきます。
5.Create triggerを押して設定を完了します。
2. Then ThatにWebhookを設定する

1.Then Thatからスタートします。

2.連携するサービスにWebhooksを設定します。

3.道なりに進みます。

4.リク$1トを設定します。
URLには以下の値を設定します。なお{webhookHashの値}は、Pixelaの設定「3. Webhookの登録」で取得したwebhookHashの値に読み替えてください。
https://pixe.la/v1/users/{ユーザID}/webhooks/{webhookHashの値}Pixelaはリク$1トボディを必要としない(セットしても無視される)ので、画像の通り、Bodyは空欄にしておきましょう。
POST - /v1/users//webhooks/ - Pixela API Document
ここまできたら、Create action > continue > finishと道なりに進んで設定完了です!
試しにtodoistでタスクを完了してみると、草が生えますwwww
方法2:TodoistAPIを使う(※Todoistプレミアムユーザ向け)
次にTodoistAPIを利用した設定方法を説明します。
1.Todoist App Management Consoleにアクセス

2.Create a new appを選択

3.Pixelaをアプリとして登録する。
App display nameはなんでもいいです。わかりやすいように今回はPixelaとし、Create Appを選択します。

4.Webhookの設定をする下にスクロールすると「Webhooks」の設定欄があるので、以下のように設定しActivate webhooksを選択します。
なお{webhookHashの値}は、Pixelaの設定「3. Webhookの登録」で取得したwebhookHashの値に読み替えてください。
| 項目 | 値 |
|---|---|
| Webhooks callback URL | https://pixe.la/v1/users/{ユーザID}/webhooks/{webhookHashの値} |
| Webhooks version | 8(デフォルト) |
| Watched Events | item |
5.開発用のアクセス$1ンを発行する
「Webhooks」の少し上にcreate test tokenボタンがあるので、押してください。
ここまでできたら設定完了です! 試しにtodoistでタスクを完了してみると、草が生えますwwww
草はいいよね
草を生やすと、「は!今日も草生やさなきゃ!」とモチベーション維持に繋がって良いですね〜。
次は「Notionを更新したら草を生やす」に挑戦したいのですが、
- Notionからの更新通知受け取り先はSlackしか対応していない
- Slackに投稿されたことをトリガーにしようと思っても、Pixelaへのリク$1ト時に
challengeに失敗してしまう
という状況なので、ちょっと難しいかもですね。うまくできたらまたブログにまとめたいと思います!