（著者： サイボウズ ソリューション営業部 Si-G 今村 健一郎）
はじめに
皆様、初めまして。サイボウズの技術営業担当の今村と申します。よろしくお願いいたします！
kintone の JavaScript プログラムを書けると、営業時にも便利です。
買うか迷われているお客様に、サンプルプログラムを提供したり、サクッと作ってデモを披露すると当然ながら好印象になります。
『商談の押しの一手は JavaScript が左右する！』・・・かもしれません（笑）
今回は、カスタマイズビューを利用してタイムカードアプリを作成します。その中でも、「休憩時間」を算出する方法を紹介します。
デモ環境
こちらのデモ環境から実際に動作を確認できます。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
完成イメージ
図1. タイムカードアプリではこのようなシンプルなものを作ってみました。
出社してから退社するまでの間、仕事に没頭し続けている人は素晴らしいとは思いますが、だいぶ稀有な人材かと思います ^^; M
人間の集中力の限界は一般的に90分と言われており、休憩時間を有効に活用することも大切ですよね。
勤怠管理アプリでは、出退勤の時刻を打刻する以外に、総休憩時間を管理する必要があります。
ただし、毎回の休憩開始 / 終了の時間までは管理しないという前提です。
図2. 休憩時間は一日に取得した休憩時間の総和だけが残れば良いという話
ポイントは「休憩開始時間をどう管理するか？」です。休憩終了までは、保持しておきたいけど、休憩終了時に時間差計算で使ったら、もういらない！という一時利用データです（図3 参照）。
図3. 休憩開始時刻は「復帰」ボタンがクリックされるまで必要です
つまり、休憩終了後は「休憩開始」時間など ゴミ のようなものです。そんなものはわざわざ蓄積したくないですよね。
一時保存して、図3 の計算により、復帰時の「休憩時間」を算出したらすぐに捨てましょう！
kintone アプリ作成
アプリの作成
以下のフィールドを配置したタイムカードアプリを作成します。
アプリの作成方法については、「アプリをはじめから作成する」をご参照ください。
従業員名簿
| フィールドの種類 | フィールド名 | フィールドコード | 備考 |
|---|---|---|---|
| 文字列(1行) | 社員番号 | 社員番号 |
|
| 文字列(1行) | 氏名 | 氏名 |
|
| 文字列(1行) | フリガナ | フリガナ | |
| 文字列(1行) | アカウント名 | アカウント名 |
|
タイムカード
| フィールドの種類 | フィールド名 | フィールドコード | 備考 |
|---|---|---|---|
| ルックアップ | 社員番号 | 社員番号 |
|
| 文字列(1行) | 氏名 | 氏名 | |
| 文字列(1行) | アカウント名 | アカウント名 | |
| 日付 | 日付 | 日付 | |
| 時刻 | 出勤 | 出勤 |
|
| 時刻 | 退勤 | 退勤 |
|
| 数値 | 休憩[分] | 休憩 | |
| チェックボックス | 休憩中 | 休憩中 |
|
| 日時 | 休憩開始時刻（計算用） | 休憩開始 |
|
| 文字列（1行） | 備考（ワークフロー URL） | 備考 |
カスタマイズビューの作成
「タイムカード」アプリに作成します。
タイムカード画面に出退勤や休憩時間を打刻するボタンを配置するため、カスタマイズビュー（カスタマイズ形式の一覧）を作成します。
カスタマイズ形式の一覧の作成方法については、「一覧を設定する」をご参照ください。
カスタマイズビューの「HTML」には、以下の内容を入力してください。また、「ページネーションを表示する」のチェックは外してください。
JavaScript カスタマイズ
TimeCard.js
タイムカードを表示する JavaScript ファイルです。
- 48行目の 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
※ TimeCard.js より先に jQuery を指定してください。
「休憩時間」算出の流れ
今回は、「休憩開始」時間を 『日時フィールド』 に一時保存して「休憩時間」を算出する方法で実装しました。手順は以下です。
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) 「休憩開始」日時フィールドの値をクリア
補足) 「休憩」フィールドの直接編集を不可にする
JavaScript API を利用する場合は、ログインユーザーのアカウントで JavaScript API を通じてフィールドの値を操作するということが必須になります。
ただし、今回の「休憩」フィールドのように、「復帰」ボタンクリックのタイミングで休憩時間（分）を計算し入力されて欲しいが、GUI 画面から直接編集することは不可にして欲しいという要望は多くあります。
この場合、現状の kintone 標準機能では API 操作でも GUI 操作でも同一のアクセス権付与しかできないため、以下のようにフィールドの属性を操作して、GUI からは操作できないようにするという仕組みが必要になります。
～「休憩」フィールドの "disabled" 属性を true にする～
これは、例えばBPMと組み合わせることで、申請者 → 上長へとステップが変わることで、入力可能なフォームを変えたいというような要望に対応することもできます。
このように、ちょっとしたカスタマイズで標準機能で実現できないない部分は、ファストに対応できるのが kintone のいい所ですね!
おわりに
今回は、営業という立場から話多めに Tips の記載をしました。
JavaScript をちょこちょこ触りながら営業周りをしているという立場だからこそ、業務に役立つプログラムを考えることもできるかなと思っています。
このタイムカードアプリだけでも、kintone API を活用した話題は色々あるので、また少しずつ、ご紹介できていければ良いなと思っています。
kintone でプログラミングを楽しみながら、そして、皆様と触れ合う機会を楽しみながら、一緒に kintone 界隈を盛り上げていければ良いなと思っています。
今後ともよろしくお願いいたします。
いつも実用的な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（数値）を指定してレコード更新できなくなるかと思いました。
ご検討いただければ幸いです。
pukosan
コメント有難うございます！おっしゃるとおり、
「$id」を利用すると、アプリコードを設定していた場合のわずらわしさがとれますね！
最新の仕様まで熟知されていてとても頼もしいです。
是非是非、引き続き kintone 拡販のためにご協力ください！
今後ともよろしくお願いいたします。
お世話になります。
こちらから質問しておりましたが
デモサイトでも時間が下記のように表記されているのですが
これは想定通りの動きなのでしょうか？
9時をすぎないと出勤ボタンが押せません。
お世話になります。
出勤ボタンを押しても動きません。
一度、「＋」でレコードを追加すると、休憩・復帰・退勤の処理は出来ます。
アカウント名の取得でつまづいていると思うのですが、原因や対処法をどう見つけていいのかわかりません。
お手数をお掛けしますがご教授ください。
青山昌司 様
お世話になっております。
cybozu developer network 事務局です。
返事が遅くなりまして大変申し訳ございませんでした。
ご指摘頂いたところ、只今確認中なので少々お待ちください。
倉部徳久 様
お世話になっております。
cybozu developer network 事務局です。
従業員名簿のアプリに、ログインユーザーと同じアカウント名の社員情報を登録されているのでしょうか？
お世話になっております。
「従業員名簿」アプリでは、 “アカウント名”フィールドに、サイボウズのログイン名を入れたレコードを作成しています。
「タイムカード」アプリ
“社員番号（ルックアップ）” フィールドの設定は次のようにしています。
他のフィールドのコピー
氏名 → 【従業員名簿】氏名
アカウント名 → 【従業員名簿】アカウント名
コピー元のレコードの選択時に表示するフィールド
氏名、アカウント名
倉部徳久 様
お世話になっております。
cybozu developer network 事務局です。
ご回答ありがとうございます。
“社員番号（ルックアップ）” では「社員番号」を指定しているのでしょうか？
こちらで手順通りに環境を構築して動作確認したところ、問題なく「出勤」ボタンを押すことができました。
申し訳ございませんが、頂いた情報だけでは原因を特定しかねます。
動かない？そんな時はデバッグをしてみよう！入門編
を参考し「出勤」ボタンを押したときのエラーをご確認いただけますでしょうか。
また、こちらは記事に対するフィードバックの欄となっておりますため、
それ以外のご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
青山昌司 様
お世話になっております。
cybozu developer network 事務局です。
大変お待たせしました。
ご指摘頂いた「9時をすぎないと出勤ボタンが押せない」問題を修正しました。
お手数ですが、ご確認いただけますでしょうか。
引き続きよろしくお願いいたします。
上記の手順通りにしているとおもうのですが、ボタンが作動しません。
従業員名簿にはログインアカウントの情報で登録がしてあるのですが
解決方法についてご教授いただけますと幸いです。
大変初歩的な質問で申し訳ありませんが、キントーンを使いこなせるようになりたいと考えていますので、どうぞよろしくお願いいたします。
カスタマイズビューIDの置換の方法を具体的に教えていただけますか？
篠田朋宏様
お世話になっております。
cybozu developer network 事務局です。
申し訳ございませんが、頂いた情報だけでは原因を特定しかねます。
お手数ですが、動かない？そんな時はデバッグをしてみよう！入門編 などをご覧いただき
エラーをご確認いただけますでしょうか。
また、こちらは記事に対するフィードバックの欄となっておりますので、
直接的に関連がない「記事を参考にした技術的な質問」は、
お手数ですがcybozu developer コミュニティのご利用をお願いします。
お世話になっております。
出勤ボタンが作動しません。
事前に社員番号・氏名・アカウント名・日付・出勤時刻を入力したレコードを作成しておくと退勤・休憩ボタンが押せるようになり、時刻もボタンを押下したものが入力されます。
このためおそらく出勤関数のどこかに原因があると思われます。
デモ環境などを参考にフィールドコードなどを確認いたしましたが、原因がわかりませんでした。
解決方法についてご教示いただけますと幸いです。
渡辺 様
お世話になっております。
cybozu developer network 事務局です。
念の為再度こちらでもアプリを用意しなおすなど試してみましたが動作は正常でした。
申し訳ございませんが、頂いた情報だけでは原因を特定しかねますので、
動かない？そんな時はデバッグをしてみよう！入門編
を参考し「出勤」ボタンを押したとき, エラーが発生しているか、しているのであればエラーをご確認いただけますでしょうか。
社員番号フィールドの「値の重複を禁止する」にチェックする、などの設定が抜けている可能性もあります。
また、こちらは記事に対するフィードバックの欄となっておりますため、
技術的な不明点などは、大変お手数ですがコミュニティにお願いできますでしょうか。
お世話になっております。
こちらをプラスでカスタマイズし、タイムカードとして利用しようと考えております。
＊現在、構築は完了し、社内何名かで試用中という段階です。
＊出庫時に酒気帯びのチェックを兼ねてポップアップで複数の質問に答えると時刻が登録されるという形式になっております。
スマホのアプリ版をダウンロードし、試用しているのですが
Androidでは狙い通りの挙動をしているにもかかわらず
iPhoneでは出庫時のポップアップを3回ほど繰り返さないと登録がされない
という事象が起きております。
AndroidとiPhoneで異なる挙動になってしまうという様なバグ等は発生するのでしょうか？
Koizumi 様
お世話になっております。cybozu developer network 事務局です。
恐れ入りますが、本記事に掲載しているサンプルコードはモバイルアプリに対応しておりません。
モバイルアプリでもカスタマイズを適用するためには、モバイル用のイベントを追加で記載する必要があります。
また、こちらのコメント欄は記事内容のフィードバック目的となっており、
モバイル対応など、記事から派生した技術的なご質問は、cybozu developer コミュニティをご活用ください。
今後ともcybozu developer networkよろしくお願いします。
お世話になっております。
エラーが解消できず、出勤ボタンが作動しません。動作環境はPCです。
ソースコード及び、アプリの設定はこのTipsに従っております。
発生しているエラーは、下記です。（Edgeの開発者ツールのコンソールに出ます。）
・Failed to load resource: net::ERR_FILE_NOT_FOUND
extension://（中略）/_locales/en/notification.json
・Failed to load resource: net::ERR_FILE_NOT_FOUND
extension://（中略）/_locales/en/internalPages.json
・Failed to load resource: net::ERR_FILE_NOT_FOUND
extension://（中略）/_locales/en/popup.json
※（中略）箇所は、機密情報かどうか判断できなかったため、伏せております。
必要な情報でしたら、お伝えします。
・Uncaught TypeError: Cannot read properties of undefined (reading '社員番号')（124行目）
最初の3つのエラーは、出勤ボタンを押す前より発生しております。
2つのアプリ（従業員名簿とタイムカード）以外に、作成すべきファイルがあるという事でしょうか？
4つ目のエラーは、出勤ボタンを押すと発生します。
124行目をコメントアウトすると、125行目の'氏名'でエラーが発生するため、
ルックアップでの値取得ができていないと考えられます。
手動（詳細画面）での、ルックアップは成功しているため、jsによるルックアップに原因があると思っております。
フィールドコードやチェック設定など、見直せる所は見直しましたが、解決できませんでした。
見落としていそうな箇所などありましたら、ご教授いただければ幸いです。
NK 様
お世話になっております。cybozu developer network 運営でございます。
> Uncaught TypeError: Cannot read properties of undefined (reading '社員番号')
とエラーがコンソールに表示されるとのことですが、
従業員名簿アプリのアカウント名フィールドに正しくkintoneのログイン名は入力できてますでしょうか？
このサンプルは現在ログインしている情報と、従業員名簿アプリの情報を突合し出退勤を管理する仕組みとなっていますので、
ご利用になられているアカウントのログイン名を、従業員名簿アプリのアカウント名フィールドへご入力ください。
プロフィール画面やこちら等からログイン名は確認できます。
よろしくお願い致します。
cybozu developer network様
お世話になっております。
エラーが解消できました。
ログイン名とユーザーIDを勘違いしておりました。
修正しましたところ、正常に動作する事が確認できました。
ありがとうございました。