カテゴリー内の他の記事

一時的にデータを保存するためにフィールドを使う ~勤怠管理アプリを例に~

フォローする

(著者: サイボウズ ソリューション営業部 Si-G 今村 健一郎

Index

はじめに

皆様、初めまして。サイボウズの技術営業担当の今村と申します。よろしくお願いいたします!

kintone の JavaScript プログラムを書けると、営業時にも便利です。
買うか迷われているお客様に、サンプルプログラムを提供したり、サクッと作ってデモを披露すると当然ながら好印象になります。
『商談の押しの一手は JavaScript が左右する!』・・・かもしれません(笑)

今回は、カスタマイズビューを利用してタイムカードアプリを作成します。その中でも、「休憩時間」を算出する方法を紹介します。

完成イメージ


  図1. タイムカードアプリではこのようなシンプルなものを作ってみました。

出社してから退社するまでの間、仕事に没頭し続けている人は素晴らしいとは思いますが、だいぶ稀有な人材かと思います ^^; M
人間の集中力の限界は一般的に90分と言われており、休憩時間を有効に活用することも大切ですよね。
勤怠管理アプリでは、出退勤の時刻を打刻する以外に、総休憩時間を管理する必要があります。
ただし、毎回の休憩開始/終了の時間までは管理しないという前提です。


  図2. 休憩時間は一日に取得した休憩時間の総和だけが残れば良いという話

ポイントは「休憩開始時間をどう管理するか?」です。休憩終了までは、保持しておきたいけど、休憩終了時に時間差計算で使ったら、もういらない!という一時利用データです(図3 参照)。


  図3. 休憩開始時刻は「復帰」ボタンがクリックされるまで必要です

つまり、休憩終了後は「休憩開始」時間など ゴミ のようなものです。そんなものはわざわざ蓄積したくないですよね。
一時保存して、図3 の計算により、復帰時の「休憩時間」を算出したらすぐに捨てましょう!

kintone アプリ作成

アプリの作成

以下のフィールドを配置したタイムカードアプリを作成します。
アプリの作成方法については、「アプリをはじめから作成する」をご参照ください。

従業員名簿

フィールドの種類 フィールド名 フィールドコード 備考
文字列(1行) 社員番号 社員番号
  • 「値の重複を禁止する」にチェックする
  • 「タイムカード」アプリに値がコピーされるフィールド
文字列(1行) 氏名 氏名
  •  「タイムカード」アプリに値がコピーされるフィールド
文字列(1行) フリガナ フリガナ   
文字列(1行)  アカウント名 アカウント名 
  • kintone のログイン IDを入力する
    「タイムカード」アプリでは、ログインしているユーザーのID と「アカウント名」フィールドの値が一致するレコードを従業員情報として利用します。

タイムカード

フィールドの種類 フィールド名 フィールドコード 備考
ルックアップ 社員番号 社員番号
  • 「関連付けるアプリ」に、作成した「従業員名簿」アプリを指定する
  • 「コピー元のレコードの選択時に表示するフィールド」に「氏名」「アカウント名」を指定する
文字列(1行) 氏名 氏名  
文字列(1行) アカウント名 アカウント名  
日付 日付 日付  
時刻 出勤 出勤
  •  「レコード登録時の時刻を初期値にする」のチェックを外す
時刻 退勤 退勤
  • 「レコード登録時の時刻を初期値にする」のチェックを外す
数値 休憩[分] 休憩  
チェックボックス 休憩中 休憩中
  • 「フィールド名を表示しない」にチェックする
  • 「項目と順番」に「休憩中」を設定する
日時 休憩開始時刻(計算用) 休憩開始
  • 「フィールド名を表示しない」にチェックする
  • 「レコード登録時の時刻を初期値にする」のチェックを外す
文字列(1行) 備考(ワークフローURL) 備考  

カスタマイズビューの作成

「タイムカード」アプリに作成します。

タイムカード画面に出退勤や休憩時間を打刻するボタンを配置するため、カスタマイズビュー(カスタマイズ形式の一覧)を作成します。
カスタマイズ形式の一覧の作成方法については、「一覧を設定する」をご参照ください。

カスタマイズビューの「HTML」には、以下の内容を入力してください。また、「ページネーションを表示する」のチェックは外してください。

JavaScript カスタマイズ

TimeCard.js

タイムカードを表示する JavaScript ファイルです。

  • 46行目の CUSTOM_VIEW_ID は、作成したカスタマイズビュー ID に変更してください。

「タイムカード」アプリにカスタマイズを設定します。

このカスタマイズでは、JavaScript ライブラリを使っているので、それらも kintone に適用します。
TimeCard.js と合わせて、「JavaScript / CSSでカスタマイズ」画面にて、以下のライブラリ URL を「PC用のJavaScriptファイル」に設定してください。

  • jQuery 2.2.0
    https://js.cybozu.com/jquery/2.2.0/jquery.min.js
  • jQuery UI 1.11.4
    https://js.cybozu.com/jqueryui/1.11.4/jquery-ui.min.js

※ TimeCard.js より先に jQuery および jQuery UI を指定してください。

「休憩時間」算出の流れ

今回は、「休憩開始」時間を 『日時フィールド』 に一時保存して「休憩時間」を算出する方法で実装しました。手順は以下です。

1. 「休憩」ボタンクリック

 → 「休憩中」ステータスになり、「休憩開始」時間が日時フィールドに保存される。

2. 「復帰」ボタンクリック

→ 「休憩中」ステータスは解除され、ボタンクリック時の「休憩終了」時間から 1. で取得してあった「休憩開始」時間の差分が「休憩[分]」に登録される。「休憩開始」時間の値はクリアされる。

補足) 編集はできないようにしています

 → 編集画面では「日時フィールド」は編集できないようにフィールドの属性を操作しています。

サンプルコードの解説

a) 「休憩」クリック 【休憩開始時間の取得 → 日時フィールドに保存】

「休憩」ボタンクリックのイベントをトリガーとして実施される処理箇所のソースは以下です。

1. cybozu 環境のサーバー時間を取得する関数を用意

クライアント端末の時刻を基にすると、端末間での誤差が生じたり、利用ユーザー側で時刻操作等が可能になってしまうため、打刻に利用する時間は、cybozu 環境のサーバー時間を利用します。

~サーバー時間取得関数~

2. 「休憩」ボタンクリック時に実行されるハンドラ

カスタムビューの「休憩」ボタンクリック時は、ログインIDと現在の日付を利用してレコードを絞り込み、アプリID(appId)と絞り込んだ対象のレコードID(employeeRecId)を基に以下の処理を行っています。

1) 「休憩中」チェックボックスにチェックを入れる
2) 「休憩開始」日時フィールドに "yyyy-MM-ddThh:mm:00+09:00" という ISO8601 に準拠した日時フォーマットでサーバー時間を登録する
※なお、前段階で「出勤していて休憩に入っていない」という状態の特定は行っています。

~「休憩」ボタンクリック時に実施されるハンドラ~

b) 「復帰」クリック  【休憩終了時間の取得 → 「休憩終了時間 - 休憩開始時間」算出 → 休憩[分]に保存】

「復帰」ボタンクリックのイベントをトリガーとして実施される処理箇所のソースは以下です。
「休憩」ボタンクリック時の実施内容よりも多くの処理が含まれています。

1) 「休憩中」チェックボックスのチェックを外す
2) 現在の「休憩[分]」の値を取得
3) 「休憩開始」日時フィールドの値を取得
4) 現在のサーバー時刻を取得
5) 今回の休憩時間を算出( 4)の値 - 3)の値 )
6) 2) の値に5) の値を足したものを最新の「休憩[分]」の値としてセット
7) 「休憩開始」日時フィールドの値をクリア

補足) 「休憩開始」日時フィールドの直接編集を不可にする

JavaScriptAPI を利用する場合は、ログインユーザーのアカウントでJavaScript API を通じてフィールドの値を操作するということが必須になります。
ただし、今回の「休憩開始」日時フィールドのように、「休憩」ボタンクリックのタイミングで日時入力はされて欲しいが、GUI画面から直接編集することは不可にして欲しいという要望は多くあります。
この場合、現状の kintone 標準機能ではAPI操作でもGUI操作でも同一のアクセス権付与しかできないため、以下のようにフィールドの属性を操作して、GUIからは操作できないようにするという仕組みが必要になります。

~「休憩開始」日時フィールドの "disabled" 属性を true にする~

これは、例えばBPMと組み合わせることで、申請者 → 上長へとステップが変わることで、入力可能なフォームを変えたいというような要望に対応することもできます。
このように、ちょっとしたカスタマイズで標準機能で実現できないない部分は、ファストに対応できるのがkintoneのいい所ですね!

おわりに

今回は、営業という立場から話多めに Tips の記載をしました。
JavaScript をちょこちょこ触りながら営業周りをしているという立場だからこそ、業務に役立つプログラムを考えることもできるかなと思っています。

このタイムカードアプリだけでも、kintoneAPIを活用した話題は色々あるので、また少しずつ、ご紹介できていければ良いなと思っています。
kintone でプログラミングを楽しみながら、そして、皆様と触れ合う機会を楽しみながら、一緒に kintone 界隈を盛り上げていければ良いなと思っています。

今後ともよろしくお願いいたします。

デモ環境

※デモ環境についての説明はこちらをご参照ください。

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

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

Avatar
pukosan

いつも実用的なTipsをご提供いただきまして、とても参考になります。

質問になりますが、
JavaScript によるコーディング箇所 の 2. 「休憩」ボタンクリック時に実行されるハンドラ にあります
プログラムで、「レコードIDの取得」がありますが、
var employeeRecId = resp['records'][0]['レコード番号']['value'];
とプログラムされているようです。

6月のアップデート情報で、レコードIDを取得できる「$id」が追加されておりますので、そちらを使ったほうが良いかと思います。
https://cybozudev.zendesk.com/hc/ja/articles/202151394-2014-06-08-kintone-API-%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E6%83%85%E5%A0%B1

なぜかといいますと、アプリにアプリコードを設定していると、レコード番号がそのコードを含み、数字として取り扱うことができなくなります。
これにより、ID(数値)を指定してレコード更新できなくなるかと思いました。

ご検討いただければ幸いです。

Avatar
Imamura Kenichiro

pukosan

コメント有難うございます!おっしゃるとおり、
「$id」を利用すると、アプリコードを設定していた場合のわずらわしさがとれますね!
最新の仕様まで熟知されていてとても頼もしいです。

是非是非、引き続き kintone 拡販のためにご協力ください!
今後ともよろしくお願いいたします。

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