【Macアプリ】ポモドーロ・テクニック用のシンプルなタイマーを作った

Electronを使ってポモドーロ・テクニック用のタイマーを作った。WindowsとLinuxにも書き出せるっぽいけど、今のところはMac専用。

無駄な機能が一切付いてないこと、そしてなにより広告が一切出てこないのが特徴。

Pomodoro Timer v1.3

ダウンロード：Pomodoro Timer v1.3

• アプリを起動すると上部タスクトレイにトマトアイコン付きの時計が現れる。左クリックして開始を押すことで作業タイマーのカウントダウンが始まる。

• 秒数の表示のチェックを外すと秒数部分がminに置き換わる。数字がチカチカしていると目障りな人向け。

• アイコンの表示のチェックを外すとアイコンのトマトが消える（Electronの仕様上、タスクトレイにおける占有スペースは変わらず）。トマトが目障りだという意見を貰ったので。

• 時間が来るとアラート音と共にこのような小ウィンドウが表示される。

「タイマーを開始」を押せばそのまま休憩用タイマー（5分）を開始。

「一旦休憩する」を押せばタイマーを開始せずにウィンドウだけ閉じる。ポモドーロループから抜けたいときや、5分間計らずに任意に休憩を取りたい人向けに。^※1休憩用タイマーはメニューから「休憩をスキップ」を押せば飛ばせるので、必ずしも休憩にタイマーを用いる必要はない仕様。

開発に使用したツールと素材

以下、開発者向けメモ。

開発環境

Electron：http://electron.atom.io/

Electron Packager：https://github.com/electron-userland/electron-packager

Javascript（とHTML5）でクロスプラットフォームアプリケーションを作れるすごいやつ。Electron単体ではコマンドライン上からしか動かせないので、ElectronPackagerを使ってapp形式に変換する。

Bootstrap：http://getbootstrap.com/2.3.2/

FlatUI：http://designmodo.github.io/Flat-UI/

アラートウィンドウのデザインに使用。FlatUIについては過去に解説記事を上げている^※2FlatUIでググると公式サイトの次に出てくるよ！やったね！のでそちらも合わせてどうぞ。

アプリアイコン

いらすとや：http://www.irasutoya.com/2012/12/blog-post_9150.html

画像素材ならだいたいなんでもそろってる無敵のサイト

通知音

効果音ラボ：http://soundeffect-lab.info/sound/button/

このページの決定・押下ボタン8を使用した。

「フリー、商用利用無料、報告・リンク不要の効果音・SE素材」とのことなので、アプリに使っても大丈夫なはず。

icnsファイルの作成

ICONVERT ICONS：https://iconverticons.com/online/

app化するにあたって画像をicnsという形式に直さなければならない。icnsファイルは形式に沿った画像を用意してターミナルでコマンドを叩けば生成できるが、手っ取り早くジュネレーターを使った。

ダウンロードリンク（2回目）

ダウンロード：Pomodoro Timer v1.3

おわり