はじめに

この記事は、Nuxt.js, Vuetify, Firebaseを使用し、勤怠管理・出勤集約を行うWEBアプリを作成した過程を記録したものです。今回は、アプリケーションの概要と開発経緯について紹介いたします。

記事投稿は数回目でまだ慣れておりません。下記にも記述しましたが、Nuxt.jsなどを使用するのも今回が初めてなので曖昧な箇所も散見すると思われます。

ご意見やアドバイス等あればぜひよろしくお願いいたします。

アプリケーション概要

当アプリケーションは主にアルバイト先での勤怠管理・出勤集約を行うWEBアプリケーションです。

アルバイトの方にはスマートフォンでの使用を想定しているので、PWAを導入し、スマートフォンのアプリライクに使ってもらえるようにしています。

Nuxt.jsはSSRやSPAなどを簡単に作成できますが、下記事情により、SPAで作成しています。
アルバイトの延長線上で作業しているものの、基本業務から逸脱しているものなので個人の趣味に近い開発です。そのため従量課金制のプランには移行できず、FirebaseやNuxt.jsの機能を最大限生かし切れていないです(非常に残念)。

どの機能も、私が勤めているアルバイト先に特化した仕様となっているため、ほかの方はほとんど活用できないと思います。（特化している分アルバイト先の方からは使いやすいと好評をいただいています）

コードはGithubに挙げて後日改めて公開します。

ホーム

お知らせ機能

管理者や職員アカウントからアルバイト全員に伝えたいお知らせを作成することができます。
ホーム画面のトップに表示されるので、使用者全員に見てもらえます。

出勤集約フォーム

出勤日の調整をはじめ、会議の参加集約なども当フォームから行えます。
使用感としては、LINEの投票に近い形です。

フォーム一覧
フォーム新規作成
フォーム回答
回答の簡易表示
回答の詳細表示
フォーム修正
編集権限の付与
フォームの終了/再開
フォームの削除

勤怠記録(アルバイト側)

カレンダー表示になっているので、Google Calendarのように使えます。
勤怠を記録したい日を押してもらうと、勤怠情報を入力するダイアログが表示されるので、詳細を入力し、保存することができます。
記録した情報は、本人のアカウントと店舗側のアカウントから見ることができます。

勤怠管理(店舗側)

表形式に一覧が表示されます。実務では、指定の別ソフトウェアに勤怠情報を入力するという工程があるみたいなので、本アプリ上では、簡易表示にとどめ、詳細をExcel出力できるようにしています。

一覧表示
検索機能
Excel出力

アカウント管理(店舗側)

表形式にアカウント一覧が表示されます。

アカウントを選択すると、そのアカウントの詳細情報がダイアログとして表示され、ログインID/Passwordを除く情報の変更およびアカウントの削除が行えます。出力を押すと、ログインID/Passwordが記載されたPDFが発行されます。

新規作成ボタンからアカウントの作成が行えます。ログインID/Passwordはこの時自動生成されます。

まとめて出力を選択すると、ログインID/Passwordが記載されたPDFが全アカウント分発行され、zipファイルとしてダウンロードできます。

一覧表示
検索機能
PDF出力
zip出力
アカウント情報の変更
アカウントの削除
アカウントの作成

グローバルな設定(店舗側)

アカウント情報に使用する項目の設定や、時給などの設定を行えます。

学部/学科/ｺｰｽの設定
役職の設定
担当の設定
給与の設定

メニュー

当月の給与概算/合計労働時間の表示
ユーザー情報の変更
パスワードの変更
FAQ(よくある質問)
お問い合わせ
アカウントの削除
ログアウト

開発経緯

以前まで、私が勤めていたアルバイト先での勤怠管理は、ICリーダーを用いたものと用紙記入の併用でした。
しかし、コロナ禍で当バイト先も在宅勤務が採用され、勤怠管理の方法の見直しが必要となりました。

はじめはSpreadsheetで

最初は導入のしやすさから、Google Spreadsheetを使用して月ごとにシートがあり、該当欄に必要項目を記述していく方式でした。

このSpreadsheetはGASを使って様々な機能を入れたりしたのですが、使用者全員がSpreadsheetに強いわけではなく、こちらの想定外の操作を行うこともあり、ルールを設定していてもルールをかいくぐったエラーが頻発するといったケースがよく起きていました。

また、使用者が学生アルバイトということもあり、スマートフォンからの利用がほとんどでした。スマートフォンからの利用だと、見づらい使いづらいという声も多く上がっていました。

頻発するエラー対応や使用者からの不満の声にしびれを切らし、専用のWEBアプリを作る決意をしました。

WEBアプリ

いざWEBアプリを作ろうと決意したものの、実はWEB系開発に使用する言語はほとんど経験がありませんでした。

それでも、「短い開発期間で、スマートフォンでも使いやすいアプリをつくる」ことを目標に、paizaなどで学習を進めるのと並行しながら、公式ドキュメントを読み漁り、ひたすらトライ＆エラーを繰り返し開発を進めました。

次回記事について

次回は、プロジェクトの作成についてまとめたいと思います。