メインコンテンツまでスキップ
バージョン: 1.8.0

Mobile timecard customization

概要​

出勤と退勤の時間を記録するモバイル版タイムカードの作り方を kintone UI Component の MobileButton コンポーネント と MobileNotification コンポーネントを使って説明します。

完成イメージ​

以下が、画面の完成イメージです。

タイムカード
打刻メッセージ

JavaScript/CSS カスタマイズ​

kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。
ファイルのアップロード方法などは、Quick Start をご覧ください。

出勤（Punch-in）と退勤（Punch-out）のボタンを表示​

出勤と退勤のボタンを表示するために、MobileButton コンポーネントを使います。

kintone.events.on('mobile.app.record.index.show', (event) => {

  // Prevent button duplication bug
  if (document.getElementById('kuc_punch_in_button') || document.getElementById('kuc_punch_out_button')) {
    return event;
  }

  const app = kintone.mobile.app.getId();

  // Display MobileButtons
  const header = kintone.mobile.app.getHeaderSpaceElement();
  const punchInButton = new Kuc.MobileButton({
    text: 'Punch-in',
    type: 'submit',
    id: 'kuc_punch_in_button'
  });
  const punchOutButton = new Kuc.MobileButton({
    text: 'Punch-out',
    type: 'normal',
    id: 'kuc_punch_out_button'
  });
  header.appendChild(punchInButton);
  header.appendChild(punchOutButton);

CSS を使ったボタンの間隔の調整​

MobileButton コンポーネントの id プロパティに値を付与して、CSS でボタンの間隔を調整します。

@charset "UTF-8";
#kuc_punch_in_button {
  margin: 5px 5px 5px 5px;
}
#kuc_punch_out_button {
  margin: 5px 0px 5px 0px;
}

打刻する時刻の作成​

出勤ボタンと退勤ボタンをクリックしたときに、次の関数を実行して現在時刻を取得します。
時刻フィールドの形式 (HH:MM) の値を作成します。

// Create time stamp
const getTime = () => {
  const time = new Date();
  const formatedTime = time.getHours() + ':' + time.getMinutes();
  return formatedTime;
};

打刻した後のリロード処理​

タイムカードの打刻が終わったあと、画面を更新する処理を行っています。

// Reload function
const reload = (waitSeconds) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(document.location.reload());
    }, waitSeconds * 1000);
  });
};

出勤ボタンクリック時の処理​

MobileButton コンポーネントは、click イベントを指定することができます。
出勤ボタンをクリックしたときに、以下のような処理を入れています。

  • 当日のログインユーザーのレコード有無の判定
  • レコードがある場合のメッセージ表示
// Process of punchInButton
punchInButton.addEventListener('click', async () => {
  try {
    // Check for records on the day
    const getParams = {
      app,
      query: 'date = TODAY() and creator in (LOGINUSER()) order by $id desc limit 1 offset 0'
    };
    const resp = await kintone.api(kintone.api.url('/k/v1/records', true), 'GET', getParams);

    // Display the message if there are any records on the day
    if (resp.records.length) {
      const info = new Kuc.MobileNotification({
        text: 'You have already punched-in!'
      });
      info.open();
      return;
    }

レコードの有無をチェックしたあと、以下のような処理を入れています。

  • レコードがない場合、出勤時間を打刻
  • 出勤時刻の打刻が完了したときのメッセージ表示
// If there is no record on the day, punch-in
if (!resp.records.length) {
  const postParams = {
    app,
    'record': {
    　'start': {
        'value': getTime()
      }
    }
  };
  await kintone.api(kintone.api.url('/k/v1/record', true), 'POST', postParams);

  // Display the message when punch-in
  const info = new Kuc.MobileNotification({
      text: 'Registered a punch-in time!'
  });
  info.open();
  await reload(5);
}

退勤ボタンクリック時の処理​

退勤ボタンをクリックしたときも、出勤ボタンをクリックしたときと同じように、次の処理を行なっています。

  • 当日のログインユーザーのレコード有無の判定
  • レコードがない場合のメッセージ表示
  • レコードがある場合、退勤時間を打刻
  • 退勤時刻の打刻が完了したときのメッセージ表示

※ 出勤時の処理と類似している部分が多いので、コードは省略します。
※ エラーメッセージの表示も同様の処理を行います。

エラーメッセージの表示​

処理中にエラーが発生した場合、MobileNotification コンポーネントを使って、メッセージを表示しています。

} catch (error) {
  console.log(error);
  let errmsg = 'An error occurred.';
  if (error.message) {
    errmsg += ' ' + error.message;
  }
  const alert = new Kuc.MobileNotification({
    text: errmsg
  });
  alert.open();
}
備考

本記事は、 2021 年 8 月時点の kintone と Google Chrome で確認したものになります。
また、カスタマイズに使用した kintone UI Component のバージョンは、v1.0.5 です。

に最終更新