Slack のボタンで打刻し、勤怠をスプレッドシートに記録・集計する勤怠管理アプリを開発

概要

社内のやり取りを Slack（ビジネス向けのチャットツール）で行っている企業様向けに、Slack の画面からボタンを押すだけで出勤・休憩・退勤を打刻でき、記録が Google スプレッドシートに自動でたまっていく勤怠管理アプリを作りました。

打刻の記録だけでなく、労働時間・休憩時間の自動計算、直行・直帰の日の交通費の入力、打刻ミスの修正依頼と管理者の承認、出勤打刻がない人へのお知らせ、月ごと・人ごとの集計までを、社員が普段使っている Slack と、管理者が使い慣れたスプレッドシートの中で完結させています。

課題

• 勤怠の記録に専用のシステムを入れるほどの規模ではないが、毎日の出退勤を確実に残したい
• 社員が毎日触るのは Slack なので、別のアプリやページを開かせると打刻忘れが増える
• 出社・リモート・直行直帰など働き方が日によって違い、交通費の精算もそれに合わせて行いたい
• 打刻を間違えたときに、本人が勝手に書き換えるのではなく、管理者が確認してから直せるようにしたい
• 月末に出勤日数・残業時間・交通費を手で数えるのをやめたい

作ったもの

Slack のホーム画面の打刻ボタン

Slack のアプリには「ホーム」というタブがあり、ここに打刻ボタンを常に置いています。社員はホームタブを開いてボタンを押すだけで打刻できます。

• 出勤 / 休憩開始 / 休憩終了 / 退勤 / 打刻修正の依頼のボタンが並んでいます
• 出勤のときは、その日の勤務区分（会社指示の出社・自由出社・リモート・直行/直帰）を 1 つ選びます
• 休憩は 1 日に何回でも取れ、退勤のときに休憩の合計が計算されます
• ホームタブには、当日と前日の打刻の一覧と、今の状態（出勤中・休憩中・退勤済み）、勤務時間とコアタイムの案内を表示します
• 打刻すると、勤怠用のチャンネルに「名前・時刻・種別」が流れ、退勤のときは労働時間と休憩時間も一緒に通知されます

文字を打ち込むコマンド形式ではなく、ボタンを押すだけで終わる形にしました。打刻の手間を減らすことが、打刻忘れを減らすことにつながると考えたためです。また、ボタンをチャンネルに置くと通知に埋もれてしまうため、ホームタブに常駐させ、チャンネルには結果だけを流すようにしています。

直行・直帰の日の交通費入力

出勤のときに「直行/直帰」を選んだ日だけ、退勤のときに交通費の入力画面が出ます。区間と金額を 3 件まで入れられ、すべて空欄でも退勤できます。それ以外の勤務区分の日は、退勤ボタン 1 回で打刻が終わり、余計な入力を求めません。

打刻の修正依頼と承認

打刻の時刻を間違えたときは、Slack から修正を依頼します。依頼しただけでは記録は変わらず、管理者が承認して初めて時刻が直る仕組みです。

13 時の出勤打刻のお知らせ

毎日 13 時の時点で出勤打刻がない人に、Slack の個別メッセージでお知らせを送ります。打刻を忘れていた場合と遅刻の場合、それぞれの対応方法も一緒に案内します。

• 土曜・日曜・祝日は送りません。祝日は Google カレンダーの日本の祝日を、スプレッドシートのメニューから取り込みます
• 対象は、スプレッドシートの「設定」シートに登録されたメンバーだけです

スプレッドシートでの記録と集計

記録先は Google スプレッドシートです。管理者が普段使っている道具のまま、記録の確認や集計ができます。

工夫したところ

• 打刻の時刻は、ボタンを押した瞬間に確定させる: 受け付けたサーバー側で日本時間の時刻を決めてから記録を頼むため、スプレッドシートへの書き込みが遅れても時刻はずれません

• ありえない打刻を受け付けない: その日の打刻の記録から「未打刻・出勤中・休憩中・退勤済み」のどれかを判断し、出勤していないのに退勤する、休憩中に退勤するといった操作は「打刻できません」という案内を出して記録しません。一度退勤した後に戻って働く場合に備えて、退勤後の再出勤だけは認めています

• 打刻の記録を「1 日 1 行を書き換える形」から「打刻 1 回を 1 行ずつ足していく形」に変えた: 開発の途中で、最大 100 人が同時に打刻する負荷試験の仕組みを作って確かめたところ、20 人が同時に打刻すると一部の記録が消えることが分かりました。そこで、同じ行を書き換える形をやめ、打刻のたびに行を足していく形に改めました。この形にしたことで、休憩を何回取っても記録でき、修正のときも打刻 ID で 1 件を特定して直せるようになっています

• Slack の「3 秒以内に応答する」決まりに合わせた作り: Slack はボタンを押してから 3 秒以内に応答しないとエラーを出します。そこで、まず受け付けたことだけをすぐ返し、記録や通知はその後に続けて行う作りにしました。スプレッドシート側が遅いときに時間切れになっていた修正依頼の画面は、「処理中」の画面をいったん出してから結果に差し替える 2 段階の画面にしています

• やり取りの偽装を防ぐ: Slack から届くリクエストは、Slack が付ける署名を確かめ、5 分より古いものは受け付けません。サーバーからスプレッドシート側への書き込みの依頼にも、共有の秘密の鍵で作った署名と時刻を付け、スプレッドシート側で確かめてから処理します。13 時のお知らせを動かす入口も、合言葉（トークン）がないと動きません。Slack アプリに与える権限は、メッセージの送信とユーザー名の取得の 2 つだけに絞っています

• スプレッドシートの自動変換による不具合をつぶした: スプレッドシートは「09:00」のような文字を自動で時刻の値に変えるため、開発の途中で、同じ日の行が二重にできる・労働時間が 0:00 になる・修正後の時刻が正しく書き戻されないといった不具合が出ました。読み込みは表示どおりの文字で行い、日付と時刻の列は文字として書き込むように統一して、すべて直しています

• お知らせの処理で 1 人の失敗が全体を止めない: 13 時のお知らせはメンバーごとに処理し、1 人分でエラーが出ても残りの人には送ります。誰に送ったか・誰を飛ばしたか・誰で失敗したかを結果として返し、記録に残します

• 本番と検証用の環境を分けた: 本番とは別に、名前に「(Dev)」が付き色も違う検証用の Slack アプリとサーバーを用意し、打刻の動作確認は検証用で行います。13 時のお知らせも手動で検証用だけに送れるようにしています。設定手順・使い方・管理者の作業は、構成図付きの手順書と運用マニュアルにまとめました