（著者：武井 琢治）
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。
こんにちは。kintoneをより良くする武井です。
皆さん、kintoneで勤怠管理をしていませんか？
kintoneの活用方法としては定番ですよね！
今回はそんな勤怠管理アプリで使えそうなカスタマイズをご紹介したいと思います。
完成形サンプル
今回のカスタマイズでできること
- レコード追加画面で自動的に起算日から1ヶ月間の日付と始業/終業時刻がデフォルトセットされます。
- 以下の入力内容をチェックします。
- 勤務時間が8時間未満になっていないかチェックします。
- 算定対象外の勤怠日付が含まれていないかをチェックします。
- 全ての営業日が含まれているかをチェックします。
- 休日が含まれていないかをチェックします。
以下のフィールドを持つ勤怠管理アプリを作成します。
| フィールドコード | フィールドタイプ | 備考 |
|---|---|---|
| 総勤務時間 | 計算 | 計算式に「SUM(勤務時間)」、表示形式を「時間（例：26時間3分）」 |
| 有休日数 | 数値 | 初期値に「0」 |
| Table | テーブル | 以下の項目をテーブル化する |
| 日付 | 日付 | |
| 開始 | 時刻 | |
| 終了 | 時刻 | |
| 休憩 | 数値 | |
| 勤務時間 | 計算 | 計算式に「終了 - 開始 - 休憩 * 60」、表示形式を「時間（例：26時間3分）」 |
| 有休 | チェックボックス | 選択項目は「有休」のみ |
また、「アプリの設定 > JavaScript / CSSでカスタマイズ」に以下のサンプルコードを設定します。
サンプルコードはエディタにコピーして、ファイル名を「kintai.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
PC用のJavaScriptファイル
PC用のCSSファイル
また、以下のフィールドを持つ休日マスタアプリを作成します。
| フィールドコード | フィールドタイプ | 備考 |
|---|---|---|
| 日付 | 日付 | 必須項目。重複禁止。 |
作成後、土日祝や創業記念日などの休日レコードを作成します。
この際、Excel等でデータを作っておき、CSVで一括インポートすると便利です。
CSVインポートについてはこちらを参照ください。
※ レコード一括取得時にその結果が1万を超える可能性がある場合には、運用・適用中のプログラムのご確認ならびに修正対応の検討をお願いいたします。
詳細はこちらの記事を確認ください。
以上が全体のkintai.jsとなります。
以下、スポット解説していきます。
holidayMST変数は上記で作成した「休日マスタ」のアプリIDを入力します。
kisanbi変数は起算日としたい日にち（毎月11日から翌月10日までが算定日であれば「11」）を入力します。
start変数はデフォルトセットしたい始業時間を入力します。
end変数はデフォルトセットしたい終業時間を入力します。
該当する休日を「休日マスタ」から取得する関数です。
例えば本日が2/17で起算日が「11」の場合、2/11～3/10までに存在する休日を取得します。
取得したら連想配列に格納して返却しています。
この際、非同期関数に配慮し、kintone.Promiseを利用しています。
レコード追加画面や編集画面の上部に「入力内容チェック」のボタンを配置しています。
「入力内容チェック」ボタンが押下された時のイベントです。
非同期処理（休日取得）が完了後、次の処理へ移ります。
「resp2」に取得した各データが格納されています。
算定月の営業日を配列に格納しています。
先ほど取得した休日以外の日になります。
入力内容チェックの本丸処理です。
テーブルに入力されている行数分だけ繰り返し処理しています。
各チェック後に、エラーがあればerr変数にプッシュしています。
エラーが一つでもある場合はerr配列の内容を表示し、
エラーが一つも存在しない場合はその旨を表示します。
有休日数のフィールドを入力不可にしています。
有休日数はJavaScript処理でチェック数を計算します。
レコード追加画面で算定月の行をデフォルトセットする処理です。
デフォルトで用意されている行は不要なので削除しています。
有休のチェックボックスを計算する処理です。
テーブル自体のchangeイベントも設定することで、
行自体が削除されてもチェック数が変更できるようにしています。
さらに本プログラムを拡張することで、以下のようなことも可能になります。
- テーブル内に同じ日付の勤怠がないかをチェックする。
- 深夜早朝の勤務日数や勤務時間を計算する。
- 休日は非表示ではなく、表示で入力不可とする。
また、休日名を表示する。 - 休日マスタを利用せず（レコード作成の手間を省いて）土日祝を自動的に取得する。
終わりに
いかがでしたでしょうか。
標準機能で出来ないことはカスタマイズで実現できます。
少しの手間でも、これからずっとその手間がなくなると思えば大きいですよね。
皆様の素晴らしいkintoneカスタマイズライフの一助となれたら幸いです。
いつもお世話になっております。
このページにある勤怠管理アプリと全く同じものを作ってみたいのですが、うまく動きませんでした。
ここで紹介されているkintai.jsで変えたところといえば、自分で作成した5行目と19行目を勤怠管理アプリと休日マスタのIDに変更したというくらいです。
よろしくお願い致します。
rina様
いつもお世話になっております。
cybozu developer network運営チームです。
＞ここで紹介されているkintai.jsで変えたところといえば、自分で作成した5行目と19行目を勤怠管理アプリと休日マスタのIDに変更したというくらいです。
この部分で5行目の場合、「勤怠管理アプリ」のIDではなく、「休日マスタ」のIDを入力していただく必要があります。
また、19行目の場合、変更を行う必要はありません。
よろしくお願い致します。
お世話になっております。
ご返信、ご回答ありがとうございます。
お答えいただいた通りに修正しましたところ、このような表示が出てきてしまいました。
度々の質問すみません、よろしくお願い致します。
rina様
お世話になっております。cybozu developer network運営チームです。
今出ているエラーの場合、恐らくアプリの「有休」フィールドのフィールドコードが
「有休」に指定されていないため、発生していると思われます。
フィールドコードを「有休」に修正を行い、改めてお試しいただけますでしょうか。
お手数ですが、よろしくお願いします。
お世話になっております。
お恥ずかしながら、全く気づきませんでした…。
無事、動きました。何度も質問してすみませんでした。
感謝します。ありがとうございました！
お世話になっております。
単純に有給にチェックしたときに、有給の日数（時間）を計算できるようにしたいです。
初心者で大変恐れ入りますが、コードは以下だけで大丈夫でしょうか？なにかアドバイス頂ければ幸いです。
(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;
});
});
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;
このままですと、有給時間の合計が分単位で表示されますので、必要に応じて時間単位か日単位に変換する必要があります。
お世話になります。
「レコード追加画面で自動的に起算日から1ヶ月間の日付と始業/終業時刻がデフォルトセットされます。」
とのことで、同じように作成してみたのですが、レコード追加画面を開いてもテーブル内には当日分のレコードしか表示されません。
どちらを修正すればよろしいのでしょうか。
ご教示いただければ幸いです。
MN様
お世話になっております。cybozu developer network運営チームです。
ご質問いただきありがとうございます。
間違いやすいポイントとして、下記があります。
こちらの設定状況はいかがでしょうか？
1. フィールドコードが間違えていた/修正できていなかった
2. 「kintai.js」のJavaScriptファイルの下記部分の修正が間違えていた
※このアプリIDは勤怠アプリではなく、休日マスタアプリのIDを設定します。
3. JavaScript/SCCの並び順が下記の通りではない
※この並び順も重要なので、もしも「kintai.js」が一番上にあると正しく動きません。
お手数をおかけいたしますが、一度上記の設定などをご確認いただけますでしょうか。
宜しくお願い致します。
ありがとうございます。
再度並びを修正したら動作しました！
こちらのテーブルに追加で要素を増やすことはできないのでしょうか？
やりたいこととしましては、テーブルの数を計算して、勤務日数の数値を出したいです。
総勤務時間はテーブル内勤務時間が計算されて出力はされているのですが、
そのうち残業はどれだけしていたのかを計算したいと考えております。
所定労働時間を予め数値としてレコードに登録しておき、
総勤務時間 - （所定労働時間 * 勤務日数）= 残業時間
テーブル内に別要素を追加した時、レコードを作成したときにエラーが出てしましましたので、
質問させていただいております。
よろしくお願いいたします。
moge様
アプリのフォーム内にフィールドを追加してその値も扱いたいということであれば、追加のプログラミングが必要になりますが、
こちらは記事のフィードバック欄でございますので、シナリオ以外のプログラミングのご相談は、コミュニティをご活用ください。
その上で、テーブルの行をカウントして勤務日数を追加したいということであれば、以下の投稿が参考になると思います。
https://developer.cybozu.io/hc/ja/community/posts/360000772506
そちらを試された上で、もしお困りのことがあれば、kintone カスタマイズフォーラム をご活用ください。
https://developer.cybozu.io/hc/ja/community/topics/200034345
cybozu Development team様
お忙しい中ご回答いただき、ありがとうございます。
質問内容に対して投稿する場所が違うとのご指摘ありがとうございます。
また、別途プログラミングが発生するとのこと、かしこまりました。
ご紹介いただいたページを参考に対応させていただきます。
ありがとうございました。
お世話になっております。
レコード追加画面の初期表示時に下の画像のように自動計算部分がエラーとなります。
どうすればエラー表示されなくなりますでしょうか。
ちなみに有休のチェック（何行目でも可）のチェックをいれると計算結果が正しく表示されます。
<ユーザーの依頼により画像を削除しました>
nicole de Japon 様
お世話になっております。
cybozu developer network 事務局です。
こちらの現象を社内で調査したところ、不具合でした。
エラー表示されなくなる方法ですが、現状回避方法はない状況です。
データに影響はなく、レコード保存時には正常に自動計算されます。
こちらの不具合に関して、今後対応を検討いたします。
ご迷惑をおかけし申し訳ございません。
いつもお世話になっております。このカスタマイズでできることは、以下の４つなんですが、
別のロジックだと思っておりますが、遅刻、早退、残業、早出があったタイミングでリアルタイムで通知したいですが、標準機能かカスタマイズが可能でしょうか。
ご迷惑をおかけて申し訳ございません。ご返事して頂けると助かります。
chu thi hue 様
お世話になっております。cybozu developer network 運営でございます。
個別の事象ですので詳しくご回答差し上げるのはできかねますが、
通知機能自体はkintoneに標準機能として用意しております。
[レコードの条件通知]レコードが特定の条件を満たしたときの通知を設定する
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。