TL;DR
- ペン画調のメカが主役のポモドーロタイマー「kiri」を作って公開しました
- 作業25 / 休憩5 / 長い休憩15分。キーボード操作・チャイム・PWA に対応しています
- 時間や回数のほか、モーション・フォント・アクセント色も設定で選べます
- Vite + React 19 + TypeScript の SPA で、保存は localStorage です
- 作った理由は、ただ好きな見た目のタイマーがほしかったからです
はじめに
ポモドーロタイマーを作りました。kiri という名前で、https://kiri-eosin.vercel.app/ から触れます。
ポモドーロタイマーなんて世の中に無数にあります。それでも作ったのは、ただ自分の好きな見た目のものがほしかったからです。
どんなタイマーか
ペン画調の、ラジオのようなメカが画面の真ん中に置いてあるだけのポモドーロタイマーです。手描きのラフな線画の雰囲気が好きで、その見た目を主役にしました。
機能は、ポモドーロに必要なものを一通り入れています。
- 作業25 / 短い休憩5 / 長い休憩15分。作業を4回終えると長い休憩に入ります
- 開始・一時停止・再開・リセット・スキップを、キーボードの Space / R / S でも操作できます
- 時間（各フェーズの分数）と回数（長い休憩までのセッション数）は設定で変えられます
- フェーズが終わるとチャイムが鳴り、デスクトップ通知も飛びます
- PWA に対応しているので、インストールしてオフラインでも動きます
右下の「TUNE」を押すと設定が開きます。時間や回数のほか、モーションの強さや数字のフォント、アクセントの色も選べます。
技術スタック
| 領域 | 採用技術 |
|---|---|
| フレームワーク | Vite + React 19 + TypeScript（SPA） |
| スタイル | CSS Modules |
| 保存 | localStorage |
| Lint | Oxlint |
| ホスティング | Vercel |
サーバーもデータベースも使っていません。設定や当日の完了数は、すべて手元の localStorage に保存しています。
おわりに
機能で言えば既製品に勝っているところは何もありません。それでも、好きな見た目のタイマーが手元にあると、不思議と開きたくなります。
kiri は誰でも触れるので、よかったら使ってみてください。
