Skip to content
Published:

【Todoist→Pixela】Todoistでタスクを完了したら草生やす

IMAGE: https://cdn-ak.f.st-hatena.com/images/fotolife/i/ikmbear/20210108/20210108111222.jpg

f:id:ikmbear:20210108111222j:plain

Todoistのタスクが完了したら草を生やしたい

Pixelaというサービスを知ってから、私の頭の中は「どう草を生やすか」で持ちきりです。

pixe.la

今回は私が日常的に使っているタスク管理アプリ「Todoist」と連携し、タスクが完了したら草を生やすようにしてみました。

なんでも草を生やしたがるお年頃

ikuma-t/todoist-graph | Pixela https://t.co/2eRIHRZq5W #Pixela

— Ikuma_t (@ikumatdkr) 2021年1月8日

Pixela側の設定

一億総草生やし社会の実現のためには、「いつものそれ」ではいけませんね。というわけで、Pixela側の設定も記載します。

手順としては次の通りです。全部ターミナルからcurlコマンドで実行しています。

  1. (ユーザー未登録の場合)ユーザー登録
  2. Todoist用のグラフの作成
  3. 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の更新頻度で草を生やす際に芝生色を使ったので、今回はcolorichouを指定しています。

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

リクエストすると

{"webhookHash":"xxxxx.....xxxxx","message":"Success.","isSuccess":true}

こんな感じの値が返ってくるのですが、これをコピーするためにpbcopyをくっつけています(手動でコピーしてもいいんですけどね)。
実際に使うのは"webhookHash":"xxxxx.....xxxxx"の値だけです。

これでPixelaの設定は完了です!Todoistの設定をしましょう!

Todoist側の設定

Todoistのタスク完了時に草を生やすには2種類の方法があります。

TodoistAPIIFTTT
利用可能なTodoistプランプレミアム制限なし
送信可能なタイミングタスク(追加、更新、完了、完了解除、削除)
メモ(追加、更新、削除)
プロジェクト(追加、更新、削除、アーカイブアーカイブ解除)
ラベル(追加、更新、削除)
フィルタ(追加、更新、削除)
リマインダー(発火時)
タスク(追加、完了 ※いずれもPJもしくはラベル指定可能)

今回はタスクを完了したら草生やすだけなので、どちらを使っても変わらないです。
この記事では両方の方法をご紹介したいと思います。(ちなみにIFTTTを通さない分、少し反映が早い(?)ので私はTodoistAPIを使っています)

方法1:IFTTTを使う

※IFTTTのアカウントを持っている前提で話を進めます。

ifttt.com

こちらから新しいアプリを作成していきます。

流れとしては

  1. If ThisにTodoistを設定する
  2. Then ThatにWebhookを設定する

以上です!

1. If ThisにTodoistを設定する

※初めての場合、IFTTTとTodoistの連携が必要です。今回は省略いたします。

f:id:ikmbear:20210108114030p:plain

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

f:id:ikmbear:20210108114113p:plain

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

f:id:ikmbear:20210108114528p:plain

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

f:id:ikmbear:20210108114701p:plain

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

5.Create triggerを押して設定を完了します。

2. Then ThatにWebhookを設定する

f:id:ikmbear:20210108115007p:plain

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

f:id:ikmbear:20210108115047p:plain

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

f:id:ikmbear:20210108115137p:plain

3.道なりに進みます。

f:id:ikmbear:20210108115452p:plain

4.リクエストを設定します。

URLには以下の値を設定します。なお{webhookHashの値}は、Pixelaの設定「3. Webhookの登録」で取得したwebhookHashの値に読み替えてください。

https://pixe.la/v1/users/{ユーザID}/webhooks/{webhookHashの値}

Pixelaはリクエストボディを必要としない(セットしても無視される)ので、画像の通り、Bodyは空欄にしておきましょう。
POST - /v1/users//webhooks/ - Pixela API Document

ここまできたら、Create action > continue > finishと道なりに進んで設定完了です!
試しにtodoistでタスクを完了してみると、草が生えますwwww

方法2:TodoistAPIを使う(※Todoistプレミアムユーザ向け)

次にTodoistAPIを利用した設定方法を説明します。

developer.todoist.com

1.Todoist App Management Consoleにアクセス

f:id:ikmbear:20210108120453p:plain

2.Create a new appを選択

f:id:ikmbear:20210108120733p:plain

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

f:id:ikmbear:20210108120957p:plain

4.Webhookの設定をする下にスクロールすると「Webhooks」の設定欄があるので、以下のように設定しActivate webhooksを選択します。
なお{webhookHashの値}は、Pixelaの設定「3. Webhookの登録」で取得したwebhookHashの値に読み替えてください。

項目
Webhooks callback URLhttps://pixe.la/v1/users/{ユーザID}/webhooks/{webhookHashの値}
Webhooks version8(デフォルト)
Watched Eventsitem:completed

f:id:ikmbear:20210108121829p:plain5.開発用のアクセストークンを発行する
「Webhooks」の少し上にcreate test tokenボタンがあるので、押してください。

ここまでできたら設定完了です!
試しにtodoistでタスクを完了してみると、草が生えますwwww

草はいいよね

草を生やすと、「は!今日も草生やさなきゃ!」とモチベーション維持に繋がって良いですね〜。

次は「Notionを更新したら草を生やす」に挑戦したいのですが、

という状況なので、ちょっと難しいかもですね。うまくできたらまたブログにまとめたいと思います!