【HTML+Javascriptのみ】Monacaで出退勤アプリを作る #0

皆さんどうも。

今回は出退勤アプリを作成しているので何となく紹介します。

完全個人用なので配信することはないと思いますが、よろしくお願いします。

今回は紹介だけにして次以降にソースコードを交えて説明出来たらと思います。

ただはっきり言うとごり押し感満載なので参考にならないかもしれません。

 

出退勤アプリ

まず、何故これを作ることにしたかというと今働いた会社の出退勤管理は全てExcelで添付して送る方式になっています。

ただこれだと不便だし出来るだけ自動化したいっていうのが今回の目的です。

なのでイメージ的にはタイムカードになるでしょうか。

因みにデザインは行っていないので画面は質素です。

 

ログイン画面

新規アカウント作成と既存アカウントでのログイン方式となります。

まあこれは普通ですね。これはncmbの会員機能をつかって実装しました。

本当に楽に行えるのでncmbは素晴らしいですよ。

 

ログイン画面ではちょっとしたバリデータチェックを入れています。

また、ログインに失敗した場合は基本的にncmb側で判断してくれます。

なので基本的に空白以外はすべてそこで対応しています。(バリデータチェックとしては2項目しかない)

本当だったら複雑化(文字数・記号を入れる)を考えなくてはいけません。

またここではログイン後に一定期間ここの処理を飛ばすことができます。

 

メイン画面

メイン機能はこのようなシンプルな形になっています。

基本的には出勤、有給取得のどちらかになります。

因みに通常出勤と休日出勤については自動判別にしています。

 

出勤後画面(出勤ボタン押下)

こちらは普通にアラートで出勤した旨を表示します。

 

表示が変わり、休憩時間・退勤時間が表示されます。

また基本的に休憩ボタンは1時間をすぎないと押下できない仕様になっています。

 

このように警告が出て1時間経っていない場合は休憩をとれないように設定しています。

これは出勤時間がマイナスになるのを防ぐためです。

なので1時間以上たてば押下できるようになります。

 

1時間経つと上記のように休憩を設定できます。

 

そして上側に表示されている休憩時間にプラスされ本日の休みを取った時間が表示されます。

現在ここでの問題があります。

  • 休憩を間違えて押した場合にキャンセルできない
  • 休憩を押し忘れた場合につける方法がなくなる
  • 細かな休憩がある場合の設定ができない(休憩時間の変更等)

これについては退勤時に休憩時間を表示する等の処理変更が必要になりそうです。

 

退勤

退勤についてもアラートを表示するようにしました。

 

そして今回試したのが土曜日なので休日出勤に+1しています。

処理としては「退勤押下→現在の休日出勤日数+1→ncmb登録→0.5秒スリープ→再度ncmbから最新情報取得」

スリープについては必ずと言っていいほど入れる必要があります。

ncmb登録→取得をノータイムでやるとたまに取得できない(というかいつもできない?)ので必要です。

ここで何回か詰んだことがありますので注意しましょう。

 

出勤確認

出勤確認ページでは10分切り捨てで表示するようにしています。

因みに8時間を超えると残業時間を計算します。(これで残業代の憶測ができるわけです)

 

前の月の登録がある場合

前の月に登録がある場合は、前の月の情報が見れるようになっています。

 

このように先月の情報が取得できます。

あたりまえですが次の月に遷移できます。

因みにここで連打した場合に情報取得が遅い場合に、前の月と次の月のデータが同時に表示されてしまいますが、

こちらについてはちゃんと処理完了後に処理するようにしています。

今回は実装していませんが、現在は1ヶ月前のデータしか確認できません。(最低限です)

 

時間も確認できる

もちろん出勤時間と残業時間を見てるだけだとわかりずらいので出退勤時間も別ページで確認できます。

こちらは力尽きて前の月の表示にはまだ対応していません。

 

今現状の問題

  • 出勤をつけ忘れた時の対応
  • 休憩時間の忘れ等
  • 休憩時間の大幅対応(時間)
  • 前の月の実装
  • 見た目が質素

ここが直せれば個人的には使えるのだけど。。。。

因みに動作上の問題はないことはデバック+実際に使って確認しています。

 

追加したい機能

  • 自動Excelファイル送信(会社に)
  • 上記問題点の機能追加
  • UIにOnsen UIをかってもっとアクセスしやすいようにする
  • 退勤押し忘れ機能(つけ忘れた場合は8時間としてncmbに登録する)←Cronで対応しようかな

という形になっています。

では次は0.5版としてncmbの登録状態について紹介したいと思います。

1版からソースコードの紹介をちゃんとしたいと思います。

 

あとがき

こういう系を書くのは自分の成長になるのでは!?

但し、ソースコードについてはかなり自己流が入ってしまうので直す箇所も多いかもしれません。

そこら辺は教えていただけるととても助かります。

上司すら悩ませる書き方をしてしまうのでどうにかならないかな。。。。

共有

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください