【JavaScript】勤怠管理システムで自動で初期値を設定するスクリプト

JavaScript
2021.03.31
ad

はじめに

職場で使用している勤怠管理システムの打刻作業を効率化するため、デフォルトの値を自動入力するJavaScriptを作ってみました。

決して全自動で固定値を入力して確定させるためのスクリプトではありません。あくまで初期値を設定して個別に修正するための前準備のためのスクリプトです。

JavaScript自体が久しぶりなのでスマートなスクリプトとは言い難いのですが、ググっているうちにモダンな書き方など色々と勉強させていただきました。

本当に大したことないスクリプトですがおぼえがきということでまとめておきます。

もし使用される際は自分の環境に合わせて修正してご利用下さい。

仕様

  • 勤怠管理システムの打刻入力画面を想定しています
  • 毎日の「出社時間」「退社時間」「休憩時間」テキストBoxに指定した時間を自動入力する
  • 土曜日/日曜日の行は入力はスキップする

使い方

コンソール画面に修正したスクリプトを貼り付けてエンターキーで実行

初期処理

要素の定義

ここでは画面に自動入力する項目「出社時間」「退社時間」「休憩時間」の定義を行います。各項目をJSONで設定して配列型にまとめています。

具体的には各テキストエリアのセレクター指定と設定する値の定義です。

JSONのselector項目にテキストBOXのセレクターを正規表現で定義しています。time項目には設定する時間の値を定義しています。

この部分は使用している勤怠システムによって異なるためよろしく修正してみてください。

//対象項目と設定値を定義
SETTINGS=[
    {selector:'[id^=start_][type=text]',time:'10:00'},
    {selector:'[id^=end_][type=text]',  time:'19:00'},
    {selector:'[id^=rest_][type=text]', time:'1:00'},
];

スキップする行の定義

勤怠表の土曜と日曜には「出社時間」「退社時間」「休憩時間」に値を入力したくなかったので、土曜/日曜の行にあるセレクターを定義しています。

今回の例では土曜/日曜の行に以下のようなCSSが指定されていたため、それを利用しました。

//対象外とする親項目を定義
SKIP_CLOSETS=['.table-bg-saturday','.table-bg-sunday'];

時刻の設定処理

ループ祭りです

//全ての対象項目を検索
for(setting of SETTINGS){
    //設定した項目の検索
    document.querySelectorAll(setting.selector).forEach(function(obj){
        //対象外であれば無効
        for(skip_closet of SKIP_CLOSETS){
            if(obj.closest(skip_closet)){
                obj.value='';
                break;
            }
            //設定した値を設定
            obj.value=setting.time;
        }
    });
}

ループの詳細は以下の通り

for(setting of SETTINGS){

初めてに定義したテキストBOXの定義数回ループします、今回の場合は「出社時間」「退社時間」「休憩時間」の三回です。

    document.querySelectorAll(setting.selector).forEach(function(obj){

次に、ページにある指定したテキストBOXを検索して、それぞれに処理をします。

        for(skip_closet of SKIP_CLOSETS){
            if(obj.closest(skip_closet)){

さらに、スキップ行で指定した分だけ回して、目的のテキストBOXが指定行に属していないかを判定。
ここのfor文は可読性のためforEach();を使用したかったのですが、forEachだとbreak文が使用できないため断念しました。

もしスキップ行に属していなければ、指定された時刻を入力します。

            obj.value=setting.time;

申請ボタンのクリック処理

最後に、各業に「申請」ボタンがあったので、それもループで回せて自動クリックします。

// 申請ボタンをクリック
document.querySelectorAll('[id^=apply_button_].btn').forEach(function(obj){
    obj.click();
}

スクリプト全文

//対象項目と設定値を定義
SETTINGS=[
    {selector:'[id^=start_][type=text]',time:'10:00'},
    {selector:'[id^=end_][type=text]',  time:'19:00'},
    {selector:'[id^=rest_][type=text]', time:'1:00'},
];
//対象外とする親項目を定義
SKIP_CLOSETS=['.table-bg-saturday','.table-bg-sunday'];

//全ての対象項目を検索
for(setting of SETTINGS){
    //設定した項目の検索
    document.querySelectorAll(setting.selector).forEach(function(obj){
        //対象外であれば無効
        for(skip_closet of SKIP_CLOSETS){
            if(obj.closest(skip_closet)){
                obj.value='';
                break;
            }
            //設定した値を設定
            obj.value=setting.time;
        }
    });
}

// 申請ボタンをクリック
document.querySelectorAll('[id^=apply_button_].btn').forEach(function(obj){
    obj.click();
}
ad

コメント