Electronでデスクトップタイマー作ってみた
最近インスタでよく見かける@nashalleryさんに触発され、彼女のチュートリアルビデオを見ながらElectronを使って簡易なポモドーロタイマーのデスクトップアプリを作ってみました。
今まで深く考えずとりあえずmacデフォルトのターミナルを使っていましたが、VSCode内のを使えばわざわざcdしなくていいんですね。。オートコレクションもあるみたいでとても便利だということに今更気づきました。
Electronって？
Electronを使うと、web気分（JavaScriptとHTML&CSS）でデスクトップアプリが作れます。ググるとオワコンと出てきます。
1
npm install electron --save-dev
書けたの？
チュートリアルでとりあえずコピペするよう勧められたコード以外は書きました。結局そのコピペ部分も後々ウィンドウを小さくしたくなってちょいちょい手を加えました。
JSでタイマーを作る方法が残念ながらほぼわからなかったので大枠はこの動画を参考にしました。しかしこの動画のタイマーではボタンがSTARTSTOPRESETの3つのみであり、作業用の25分しか測れなかったので、WORKBREAKCLEARの3機能に自分なりに作りかえました。はじめWORK, REST, RESETの3単語を考え、なんか似ててダメだなとChatGPTに相談したら案をくれました。なんのために英語を学んできているのか。。
CSSは結構忘れていて勘で書きました。
できたの？
とりあえず形になりました。自分専用のアプリを作ってみたかったのでできて嬉しいです！見た目も可愛いフォントを見つけたのでそこそこいい感じになりました。
アプリとして使う際の備忘録
1
npm install --save-dev electron-reload
1
2
3
if (!app.isPackaged) {
require("electron-reload")(__dirname);
}
これを入れると、開発中は一度npm startで起動しておけば、ファイル変更を検知して自動で再起動/再読み込みしてくれるので、手動で起動し直す手間が減って便利です。
1
2
3
rm -rf dist
npm run build
open dist
これでdist直下にビルドされ、生成された.dmgから.appをApplicationsに入れれば、普通のアプリとして使えるようになります。
icnsファイルでアイコン画像を設定するとアプリアイコンが作れます。何もしないとElectronデフォルトの画像になります。公式アプリたちに並んで一丁前にアイコンが置かれるとおもしろいです。
