hello-world.jp.net
webエンジニアのメモ。とりあえずやってみる。

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

公開日時

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

Pomodoro Timer

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

おすすめの使い方

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

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

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

    • ブロックしてしまった場合はChromeの設定 => サイトの設定 => 通知からブロックを取り消すことで再度アイコンが表示されるようになります
  • アドレスバーの「+」を選択してChromeアプリとして追加

    • macの場合、Spotlightから起動できるようになります
  • タイマー起動後、ウインドウサイズを縮小して画面端に配置

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

attachment_post_5251

進捗管理について

このタイマー自体には進捗管理機能がないのですが、 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で保存します。

attachment_post_5252

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

attachment_post_5253

以上、PomodoroTimerの紹介でした。

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


Related #chrome

[mac]タブ開きすぎて重い問題を解消してくれるChrome拡張

先日、 Yosemiteにアップデートしてよかったこと、気になったことを書きました。

あけましておめでとうございます

あけましておめでとうございます。

Notice: chrome-internal scheme was removed from Chrome

Notice: chrome-internal scheme was removed from Chrome

[mac]chromeの自動更新(アップデート)を無効化する

chromeの自動更新は問答無用で行われてセキュリティ面ではありがたいのですが、作品や検証で使いたい場合に、自動更新されると困る時があります。