カテゴリー内の他の記事

勤怠管理アプリをカスタマイズしてみよう

フォローする

 

 

(著者:武井 琢治)

 

こんにちは。kintoneをより良くする武井です。

皆さん、kintoneで勤怠管理をしていませんか?
kintoneの活用方法としては定番ですよね!

今回はそんな勤怠管理アプリで使えそうなカスタマイズをご紹介したいと思います。

 

完成形サンプル

今回のカスタマイズでできること

  • レコード追加画面で自動的に起算日から1ヶ月間の日付と始業/終業時刻がデフォルトセットされます。
  • 以下の入力内容をチェックします。
    1. 勤務時間が8時間未満になっていないかチェックします。
    2. 算定対象外の勤怠日付が含まれていないかをチェックします。
    3. 全ての営業日が含まれているかをチェックします。
    4. 休日が含まれていないかをチェックします。

アプリ準備

以下のフィールドを持つ勤怠管理アプリを作成します。

フィールドコード フィールドタイプ 備考
総勤務時間 計算 計算式に「SUM(勤務時間)」、表示形式を「時間(例:26時間3分)」
有休日数 数値 初期値に「0」
Table テーブル 以下の項目をテーブル化する
日付 日付  
開始 時刻  
終了 時刻  
休憩 数値  
勤務時間 計算 計算式に「終了 - 開始 - 休憩 * 60」、表示形式を「時間(例:26時間3分)」
有休 チェックボックス 選択項目は「有休」のみ

 

また、「アプリの設定 > JavaScript / CSSでカスタマイズ」に以下のサンプルコードを設定します。
サンプルコードはエディタにコピーして、ファイル名を「kintai.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

 

PC用のJavaScriptファイル

PC用のCSSファイル

 

また、以下のフィールドを持つ休日マスタアプリを作成します。

フィールドコード フィールドタイプ 備考
日付 日付 必須項目。重複禁止。

 

作成後、土日祝や創業記念日などの休日レコードを作成します。
この際、Excel等でデータを作っておき、CSVで一括インポートすると便利です。
CSVインポートについてはこちらを参照ください。

 

プログラム解説

以上が全体のkintai.jsとなります。
以下、スポット解説していきます。

 

holidayMST変数は上記で作成した「休日マスタ」のアプリIDを入力します。
kisanbi変数は起算日としたい日にち(毎月11日から翌月10日までが算定日であれば「11」)を入力します。
start変数はデフォルトセットしたい始業時間を入力します。
end変数はデフォルトセットしたい終業時間を入力します。

 

該当する休日を「休日マスタ」から取得する関数です。
例えば本日が2/17で起算日が「11」の場合、2/11~3/10までに存在する休日を取得します。

取得したら連想配列に格納して返却しています。
この際、非同期関数に配慮し、kintone.Promiseを利用しています。

 

レコード追加画面や編集画面の上部に「入力内容チェック」のボタンを配置しています。

 

「入力内容チェック」ボタンが押下された時のイベントです。
非同期処理(休日取得)が完了後、次の処理へ移ります。
「resp2」に取得した各データが格納されています。

 

算定月の営業日を配列に格納しています。
先ほど取得した休日以外の日になります。

 

入力内容チェックの本丸処理です。
テーブルに入力されている行数分だけ繰り返し処理しています。
各チェック後に、エラーがあればerr変数にプッシュしています。

 

エラーが一つでもある場合はerr配列の内容を表示し、
エラーが一つも存在しない場合はその旨を表示します。

 

有休日数のフィールドを入力不可にしています。
有休日数はJavaScript処理でチェック数を計算します。

 

レコード追加画面で算定月の行をデフォルトセットする処理です。
デフォルトで用意されている行は不要なので削除しています。

 

有休のチェックボックスを計算する処理です。
テーブル自体のchangeイベントも設定することで、
行自体が削除されてもチェック数が変更できるようにしています。

 

機能拡張

さらに本プログラムを拡張することで、以下のようなことも可能になります。

  • テーブル内に同じ日付の勤怠がないかをチェックする。
  • 深夜早朝の勤務日数や勤務時間を計算する。
  • 休日は非表示ではなく、表示で入力不可とする。
    また、休日名を表示する。
  • 休日マスタを利用せず(レコード作成の手間を省いて)土日祝を自動的に取得する。(UltraDate.js)

 

終わりに

いかがでしたでしょうか。
標準機能で出来ないことはカスタマイズで実現できます。
少しの手間でも、これからずっとその手間がなくなると思えば大きいですよね。

皆様の素晴らしいkintoneカスタマイズライフの一助となれたら幸いです。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
rina

いつもお世話になっております。

このページにある勤怠管理アプリと全く同じものを作ってみたいのですが、うまく動きませんでした。

ここで紹介されているkintai.jsで変えたところといえば、自分で作成した5行目と19行目を勤怠管理アプリと休日マスタのIDに変更したというくらいです。

よろしくお願い致します。

Avatar
cybozu Development team

rina様

いつもお世話になっております。
cybozu developer network運営チームです。

>ここで紹介されているkintai.jsで変えたところといえば、自分で作成した5行目と19行目を勤怠管理アプリと休日マスタのIDに変更したというくらいです。

この部分で5行目の場合、「勤怠管理アプリ」のIDではなく、「休日マスタ」のIDを入力していただく必要があります。
また、19行目の場合、変更を行う必要はありません。

よろしくお願い致します。

Avatar
rina

お世話になっております。

ご返信、ご回答ありがとうございます。

お答えいただいた通りに修正しましたところ、このような表示が出てきてしまいました。

度々の質問すみません、よろしくお願い致します。

Avatar
cybozu Development team

rina様

お世話になっております。cybozu developer network運営チームです。

今出ているエラーの場合、恐らくアプリの「有休」フィールドのフィールドコードが
「有休」に指定されていないため、発生していると思われます。

フィールドコードを「有休」に修正を行い、改めてお試しいただけますでしょうか。
お手数ですが、よろしくお願いします。

Avatar
rina

お世話になっております。

お恥ずかしながら、全く気づきませんでした…。

無事、動きました。何度も質問してすみませんでした。

感謝します。ありがとうございました!

Avatar
goro

お世話になっております。

単純に有給にチェックしたときに、有給の日数(時間)を計算できるようにしたいです。

初心者で大変恐れ入りますが、コードは以下だけで大丈夫でしょうか?なにかアドバイス頂ければ幸いです。


(function() {
"use strict";

var start = "09:00"; //デフォルト始業時間
var end = "18:00"; //デフォルト終業時間

kintone.events.on(["app.record.create.change.有休", "app.record.edit.change.有休",
"app.record.create.change.Table", "app.record.edit.change.Table"
], function(event) {
var record = event.record;
var cnt = 0;
for (var i = 0; i < record.Table.value.length; i++) {
if (record.Table.value[i].value.有休.value.length === 1) {
cnt++;
}
}

record.有休日数.value = cnt;

return event;
});
});

Avatar
cybozu Development team

goro 様

お世話になっております。cybozu developer network運営チームです。

ご提示のソースコードでは、有給をチェックする度に、単純に有給を1日足します。

日単位ではなく、時間単位でカウントさせたい場合、
「cnt++」のところを「cnt = cnt + 8時間 -  勤務時間」のように変更します。
次のサンプルソースコードは、勤務時間を分に変換してから計算しています。

// cnt++; ←削除して以下に変更

var workTimes = record.Table.value[i].value.勤務時間.value;
var workTimeSplit = workTimes.split(':');
var turnToSec = Number(workTimeSplit[0]*60) + Number(workTimeSplit[1]);
cnt = cnt - turnToSec + 480;

このままですと、有給時間の合計が分単位で表示されますので、必要に応じて時間単位か日単位に変換する必要があります。


  

 

ログインしてコメントを残してください。
Powered by Zendesk