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

Markdownで記事を書く際に参考サイトのタイトルとURL入力を劇的に改善できるChrome拡張「Copy URL+」

このブログは基本的にMarkdownで書いているのですが、記事を書く際には毎回色々なサイトを参考にさせていただいています。

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

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

[chrome]https環境からセキュアでないwebsocket(socket.io)をどうしても利用したい場合の設定

Chrome 36.0.1985.125 で確認 chromeを最新版にしたところ、ssl(https)接続しているサイト上から、ssl接続でないコンテンツ(画像やcss)を呼びだそうとするとエラーになってしまいました。