【ノーコード Click】勤怠管理システム作ってみた！

はじめに

「スマートフォン１台で従業員の勤怠を管理したい」「コストをかけずに勤怠管理システムを作りたい」
そのようなお悩みを抱えている経営者の方は多いのではないでしょうか。
今回はそんなお悩みを解決するために、ノーコード開発ツール「Click」を使って安く、早く、そして簡単に勤怠を管理できるアプリを作成してみました。

Clickで作るメリット

今回Clickで作った理由は、①この記事を見てすぐ作れる　②従業員のデータをExcel等のcsvから直接引用できる　③作るコスト、時間がかからないの３つです。ノーコード開発ツールは初心者でもすぐに始めることができ、ラーニングコストが非常に低いです。また今回作ったこの勤怠管理アプリは、１時間ほどで作成することができます。機能の追加、削除も非常に簡単なので、非常におすすめです。

実際に作ってみよう

では実際に一緒に作ってみましょう。ここからは画像も添付しますので、ぜひ見ながら作ってみてください。
今回作る機能としては、「出勤、退勤」「バーコードでの従業員番号読み取り」「出勤、退勤ログの表示」です。
作業工程も多くないので作りやすいものとなっています。

①データベースの準備

まずはUsersの項目を変更します。変更が終わり次第、従業員の方の情報を入力してください。パスワードは全員統一してください。今回は0000にしています。
⚠️必ずEmail＞名前、Full name＞従業員番号にしてください

次にテーブルを追加し、勤怠管理と設定します。項目を追加＞テキストで出勤/退勤者、出勤/退勤を、項目を追加＞日時で出勤/退勤時刻を追加してください。また、項目を追加＞データの紐付け＞Usersで一番上を選択してください。
これでデータベースの準備は完了です。

②時刻を表示させる

まずは勤怠管理機能ですので、時間を表示させます。エレメント＞日付入力を任意の位置に設定してください。初期値は現在時刻にしておきます。

③バーコード読み取り機能

今回はバーコードを読み取ってログインする機能を作ります。エレメント＞ボタンからテキスト、アイコンを設定します。

そしてclickflowをQRコード読み取りに設定しておきます。このボタンを押すと読み取り画面に移行します。

読み取った番号をエレメント＞インプットに表示させます。名前をわかりやすいものに変更し、初期値をQRコード読み取りにしておきます。

④自動ログイン機能

このままでは従業員番号を読み取った後、ログインボタンを別で設けなければなりません。ここでエレメント＞タイマーを使用することで、読み取った時点で自動でログインするようにします。

タイマーは何も設定していない場合、このページが開いた瞬間に起動してしまいます。読み取った際に起動するように設定しておきましょう。

clickflowを設定します。ログインのタイプをEmail、従業員番号を先ほどのインプットの表示されている読み取った番号に、パスワードは統一しておいた0000を入力します。こうして読みとった番号を元に自動でログインができるようになりました。

⑤従業員番号、名前の表示

ログインした従業員の番号、そして名前を表示させるようにします。

⑥出勤/退勤ボタン

エレメント＞ボタンから２つのボタンを用意し、テキストをそれぞれ出勤、退勤とします。

clickflowを設定します。ここからは退勤ボタンも同じですので、どちらも設定してください。作成＞勤怠管理、それぞれ入力する内容を設定します。出勤のところは手打ちで入力してください。退勤ボタンの方は退勤と入力します。

また、作成とともにログアウトできるように、clickflowにログアウトを設定しておきます。そしてこのままでは読み取った番号が常に表示されてしまいますので、clickflow＞その他＞エレメント値変更を設定します。インプットを従業員番号入力にしておきます。これで出勤、退勤と同時に、読み取った番号を消去できます。

⑦勤怠ログの表示

エレメント＞カスタムから、データベースを勤怠管理にします。

表示するものをテキストを使って設定していきます。

⑧出勤/退勤完了画面

出勤、退勤した際に完了画面に移行するようにします。先ほど作成した出勤/退勤ボタンにもう一つclickflowを設定します。ページを移動＞新規ページからモーダルを選択し、それぞれテキストなどを変更します。

⑨バーコードの作成

バーコードの作成も可能です。従業員番号を入力すればそれぞれのバーコードが作成できます。

⑩最終確認

プレビューからバーコード読み込み、出勤、退勤をそれぞれ行い、ログを確認してください。

データベースも確認しましょう。このような表示になっていれば完成です。

まとめ

いかがでしたでしょうか。複雑な作業は必要なく、非常に気軽に作れると思います。
勤怠管理をデジタル化することで、タイムカードの管理や時間の入力が必要なくなるので、毎月の作業が簡略化され、間違いも少なくなるのではないでしょうか。ぜひ一度作成してみてください。
最後までご覧いただきありがとうございました。

ノーコードでアプリ開発なら「ソウゾウ」におまかせ

・ノーコードを活用し、アプリ・システムをマルっと構築して欲しい
・アプリ/システムの土台の構築依頼とその後の運用の内製化（開発人材の内製化）までやってほしい
・ノーコード人材/開発人材/IT人材を内製化してほしい 上記のようなご要望をお持ちの方は、下記よりお気軽にご相談ください。