Electron を使って、デスクトップで動作するポモドーロタイマーを作成しました。
「作業の邪魔にならず、でも常に目に入る」
そんなタイマーが欲しくて、今回は フレームなし・背景透過・最前面表示 にこだわったアプリを作ってみました。
🛠 作った動機
ポモドーロタイマーは世の中にたくさんありますが、使っていて以下の点が気になっていました。
-
作業中に デスクトップで常に表示できるタイマーが欲しかった
-
YouTube のポモドーロ動画は
- 時間を自由に変えられない
- 他の作業の邪魔になる
-
見た目がかっこいいタイマーを使いたかった
-
Electron で
- ウィンドウフレームを消す
- 背景を透明にする
といったアプリを一度作ってみたかった
「ないなら作ろう」ということで、Electron 製のポモドーロタイマーを作ることにしました。
📋 仕様
今回作成したアプリの主な仕様です。
🖥 表示・操作系
- 背景を透明にして タイマーのみ表示
- ブラウザ（ウィンドウ）のフレームを非表示
- 常にデスクトップ最前面に表示
- ドラッグ＆ドロップで 自由に位置を移動可能
🎨 カスタマイズ
-
設定画面から
- タイマーの色を変更可能
- BGM / アラート音量を調整可能
-
インターバルタイム・休憩時間を自由に設定
-
好きな mp3 を用意して BGM として設定可能
「自分好みに育てられるポモドーロタイマー」を目指しました。
💡 工夫したところ
1. フレームなし & 背景透過ウィンドウ
Electron の BrowserWindow で以下の設定を使っています。
new BrowserWindow({
frame: false,
transparent: true,
alwaysOnTop: true,
})
これにより、
- OS のウィンドウ枠が表示されない
- 背景が完全に透過
- 他のアプリの上に常に表示
という、ウィジェット感のあるタイマーを実現できました。
2. ドラッグで移動できる UI
見た目はシンプルでも、
「好きな場所に置ける」だけでかなり使い勝手が上がります。
- マウスダウン時に位置を記録
- マウスムーブでウィンドウ位置を更新
というシンプルな実装ですが、
デスクトップ常駐アプリ感が一気に増しました。
3. BGM を自由に差し替え可能に
固定の音源ではなく、
- 自分で用意した mp3 を指定
- 作業内容に応じて BGM を変更
できるようにしました。
「今日は集中したい」「今日はゆったり作業したい」
そんな気分に合わせて使えます。
😅 困ったところ
透明ウィンドウ + 操作性の両立
背景を透明にすると、
- どこが掴めるのか分かりづらい
- クリック判定が直感的でなくなる
という問題がありました。
👉
最低限のクリック可能エリアを分かりやすくデザインすることで解決しました。
Electron 特有のハマりポイント
-
alwaysOnTopの挙動が OS によって微妙に違う - 音量制御やオーディオ再生の扱い
- ビルド後と開発環境での挙動差
「Web アプリ感覚」で作ると痛い目を見るポイントが多く、
Electron は Electron として理解する必要があると感じました。
📚 学んだこと
今回の開発で学んだことです。
- Electron は
「Web + デスクトップアプリ」両方の知識が必要 - フレームなし・透過ウィンドウは
UX を意識しないと一気に使いづらくなる - 小さなツールほど
見た目・触り心地が重要 - 「自分が毎日使いたいもの」を作ると完成度が上がる
🚀 まとめ
Electron を使うことで、
- デスクトップ常駐
- 背景透過
- フレームなし
といった Web では作れない体験を簡単に実現できました。
ポモドーロタイマーのような
「小さくて毎日使うツール」は、Electron と相性がとても良いと感じています。
「ちょっとした不満」を感じたら、
それを解消するツールを作ってみるのはとてもおすすめです 👍
最後まで読んでいただきありがとうございました！ 🙇♂️