1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

/*
 * sample.js
 * Copyright (c) 2025 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';
  kintone.events.on('space.portal.show', (event) => {
    const SPACE_ID = '{YOUR_CUSTOM_SPACE_ID}'; // ボタンを設置するスペースIDに変更してください
    const TIMECARD_APP_ID = '{TIMECARD_APP_ID}'; // タイムカードアプリのアプリIDに変更してください
    if (event.spaceId !== SPACE_ID) {
      return event;
    }

    const toastObj = Swal.mixin({
      toast: true,
      position: 'top',
      showConfirmButton: false,
      timer: 3000,
      timerProgressBar: true,
      didOpen: function(toast) {
        toast.addEventListener('mouseenter', Swal.stopTimer);
        toast.addEventListener('mouseleave', Swal.resumeTimer);
      },
    });

    // スペース上側の要素を取得
    const el = kintone.space.portal.getContentSpaceElement();

    const Kuc = Kucs['1.21.0']; // Kucのバージョンを指定
    // 出勤・退勤ボタンの設定
    const startButton = new Kuc.Button({
      text: '出勤',
      type: 'submit',
      id: 'startButton',
    });

    const endButton = new Kuc.Button({
      text: '退勤',
      type: 'alert',
      id: 'endButton',
    });

    // 日付表示の設定
    const today = luxon.DateTime.local();
    const todayStr = today.setLocale('ja').toFormat('yyyy年M月d日（EEE）');
    const displayDateDiv = document.createElement('div');
    displayDateDiv.id = 'displayDate';
    displayDateDiv.innerText = todayStr;

    // 今日の日付と出勤・退勤ボタンを設置
    el.appendChild(displayDateDiv);
    el.appendChild(startButton);
    el.appendChild(endButton);

    const upsertTimecard = (fieldName) => {
      // 現在時刻を取得
      const currentDate = luxon.DateTime.local();
      const currentDateStr = currentDate.setLocale('ja').toFormat('yyyy-MM-dd');
      const currentTimeStr = currentDate.toFormat('HH:mm');

      // updateKeyを定義 ログインユーザー名 申請日付
      const updayteKeyValue = `${
        kintone.getLoginUser().name
      } ${currentDateStr}`;
      const paramsUpsert = {
        app: TIMECARD_APP_ID,
        upsert: true,
        records: [
          {
            updateKey: {
              field: 'Text',
              value: updayteKeyValue,
            },
            record: {
              [fieldName]: {
                value: currentTimeStr,
              },
            },
          },
        ],
      };
      return kintone.api(
        kintone.api.url('/k/v1/records.json', true),
        'PUT',
        paramsUpsert,
        (resp) => {
          toastObj.fire({
            icon: 'success',
            title: `${fieldName}を登録/更新しました！`,
          });
        },
        (error) => {
          toastObj.fire({
            icon: 'error',
            title: `${fieldName}の登録/更新に失敗しました。`,
          });
        }
      );
    };

    // 出勤ボタンを押したときの関数
    startButton.addEventListener('click', () => {
      upsertTimecard('出勤時刻');
    });

    // 退勤ボタンを押したときの関数
    endButton.addEventListener('click', () => {
      upsertTimecard('退勤時刻');
    });

    return event;
  });
})();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/*
 * sample.css
 * Copyright (c) 2025 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

#displayDate {
  padding: 10px 20px 0px 30px;
  font-size: 20pt;
  font-weight: 500;
}

#startButton {
  padding: 10px 20px 20px 30px;
}

#endButton {
  padding: 10px 20px 20px 10px;
}