1. はじめに
-
開発したアプリの名前はGlowTimeです 命名主ちゃっぴー
-
Electron全くの初心者が学習目的で作成したアプリ。配布するところまで挑戦したかった
-
なぜPomodoro×ToDoアプリを作ろうと思ったか
自分で使いたいアプリを作った結果がコレ タスクを記録してポモドーロで消化するワークフローを目指した。 -
この記事のゴール・対象読者
ChatGPTを開発で採用しようと考えてる人 又はElectron初心者
2. 開発環境／前提条件
- OS／Node.jsバージョン
- OS Windwos 10
- node v20.11.0
使用したエディタ
- webstorm
使用したLLM
- ChatGPT o4 (ChatGPT有料版 Plus)
UIの画像
ソースコードを利用したい場合
# 任意のディレクトリでリポジトリをクローン
git clone https://github.com/tatsuoNakano/GlowTime
cd GlowTime
# 依存インストール
npm install
# 開発モードで起動
npm start
# Windows用にパッケージ化
npm run package
ディレクトリ構成
Electron-todo-pomodoro/
├── main.js
├── preload.js
├── renderer.js
├── todo.js
├── timer.js
├── index.html
├── styles.css
├── package.json
├── LICENSE
├── README
└── .gitignore
ソースコード
アプリ配布
オープンソースのフリーソフトです。
ZIP形式をダウンロードしてお好きな場所で解凍してお使いください Windows版のみ配布しています。(強い要望があれば他OSにも対応します。)
.exeアプリを起動するときに警告が出ますが、無視して進めてください
実装した機能
- todoリスト機能
- todoデータの保持
- ポモドーロタイマー
- タイマー時間の変更
- ５分間休憩機能
- ポーズと再生機能
- Vanta.js
- グラスモーフィズム
- ニューモフィズム
- ネオン効果
- プログレスバー
- (更新)todoリストのドラッグアンドドロップでソート機能
- (更新)Markdown形式でtodoリストをダウンロードできます
- (更新)ドットインジケーターの実装
10. まとめ & 今後の展望
MITライセンスを付与しているのでソースコードの改編も自由にしてください。
アプリを使ってみた感想などをフィードバックして貰えると成長とモチベーションUPにつながりますので是非お願いします。
音を出すアラーム機能やVanta.jsのBGやテーマを自由に切り替えられる機能などを考えてはいますが、実装する気はいまいちありません。要望があれば考え直します。
参考リンク
- Electron公式ドキュメント: https://www.electronjs.org/docs
- Vanta.js: https://www.vantajs.com/