Warning: count(): Parameter must be an array or an object that implements Countable in /home/c9962019/public_html/mochinoki-labo.com/wp-content/plugins/rich-table-of-content/functions.php on line 490
こんにちは、MSKです。
今回は出退勤を記録するアプリを作ったので、その紹介です。
僕の働いている会社は出退勤の記録は社員各自が自分で記録を残し、それを月末にエクセルにまとめて総務に提出するというスタイルです。
（IT企業なのに、どうしてこういうところは原始的なんだ・・・）
出社時間はいつでもOKという会社なので、僕が出社した後は意外と呼び出されることが多く、エクセルを開いて出勤時間を記録することをよく忘れます。
帰りも然り・・・
月末に総務からの連絡で提出しなければならないことを思い出して、チャットのやり取りなどから出退勤の時間を思いだしまとめて記録するということをやってしまっています。
正直めんどいので、アプリでクリック一発で記録できるものを作ろうというのがモチベーションでした。
ダウンロードや紹介ページは以下です。
使った技術
使った技術は以下になります。
- Electron
- Next.js
- Electron-DB
Electronを選んだのは、使い慣れているからというのが大きいです。
C++を使って、Qtなども選択肢に入れていたのですが、学習コストが高いのですでに知っている技術を選択しました。
Next.jsを選んだのもほぼ同じ理由ですが、勉強はしていたので使ってみたというところです。もう１つ理由を言うと表示部分を作るときに、今更HTMLをそのまま書きたくなかったということがあります。
データの保存には何度かこのブログでもとりあげていたElectron-DBを使用しました。
興味があって使い方は勉強していたので、実際に使ってみたというところです。
苦労したこと
今回は機能的にはシンプルな作りになっているので全く苦労することはなかったのですが、主に次の部分で苦労しました。
- デザイン
- アイコン作り
見た目の部分ですね。
僕自身が組み込み系のエンジニアなので、人の目に見えるUIやアイコンの良し悪しが良く分かりませんでした。
機能はこういうものが必要だというのはすぐに思いつくのですが、見た目はどうしたらいいのか全く出てきませんでした。
結局、いくつか既存の勤怠システムを見て、共通するレイアウトを参考にAdobe XDで画面のレイアウトを書いて作りました。（どうしてもダサくなるのは何でなのか・・・勉強が必要ですね）
アイコン作りも何も知識がないので、とりあえず既存の勤怠アプリのアイコンに共通するものを参考にillustratorで作ってみたのですが、既存のアプリに比べてぼやけてしまっています。
こちらも勉強していくしかないかなと思っています。
とりあえずUIやアイコンは後でアップデートしていけばいいかなと思って、リリース優先しています。
最後に
個人開発をやりたいとずっと思っていて何個か作っては自信を無くし、途中でやめて・・・を繰り返していたので１つ出せたのは良いことなのかなと思っています。
数打てば当たる方式で今からも自分の悩みや同僚や家族の悩みなどを解決できるアプリをリリースしていきたいなと思っています。
