ポモドーロタイマーの進捗をPixelaで管理する

Webhookが使えるポモドーロタイマーを作りました。

Pomodoro Timer

今回はおすすめの使い方と進捗管理方法をご紹介します。

おすすめの使い方

スマホでも使えますがメインはPC / Chromeでの利用を想定しています。

• https://pomo-time.web.app/ にアクセス

• ベルのアイコンをクリックしてプッシュ通知を有効に

  • ブロックしてしまった場合はChromeの設定 => サイトの設定 => 通知からブロックを取り消すことで再度アイコンが表示されるようになります

• アドレスバーの「+」を選択してChromeアプリとして追加

  • macの場合、Spotlightから起動できるようになります

• タイマー起動後、ウインドウサイズを縮小して画面端に配置

↓こんな感じで使っています。

進捗管理について

このタイマー自体には進捗管理機能がないのですが、 Pixelaと組み合わせると進捗管理ができるようになります。

Pixelaの詳細に関してはa-knowさんの記事をご確認ください。

commit以外の数値でも草を生やせる、PixelaというAPIサービスを作った！ - えいのうにっき

Pixela設定

• トークン生成

ruby -r securerandom -e "puts SecureRandom.hex"
=> randomToken

• 利用規約を読んでユーザ登録

curl -X POST https://pixe.la/v1/users -d '{"token":"randomToken", "username":"your-username", "agreeTermsOfService":"yes", "notMinor":"yes"}'

• 進捗管理用のグラフ作成

curl -X POST https://pixe.la/v1/users/your-username/graphs -H 'X-USER-TOKEN:randomToken' -d '{"id":"pomo-graph","name":"pomodoro","unit":"work","type":"int","color":"shibafu","timezone":"Asia/Tokyo"}'

これで↓にアクセスするとグラフが確認できるようになります。

https://pixe.la/v1/users/your-username/graphs/pomo-graph.html

Pomodoro設定

設定メニューのWebhookを開いて以下を入力します。

http method: PUT  

url: https://pixe.la/v1/users/your-username/graphs/pomo-graph/increment  

header: {"X-USER-TOKEN":"randomToken"}

入力後tryをクリックしてsuccessになったらsaveで保存します。

これで1pomoが経過すると自動でPixelaのグラフに連携されるようになります。

以上、PomodoroTimerの紹介でした。

最近集中できてないなぁという方はぜひ試してみてください。