【GAS】ワンクリックでスプレッドシート書き込み【勤怠管理】

普段勤怠管理ってどうしていますか?会社に勤めている人なら、勤怠管理のシステムが用意されていてそれ使っているっていう感じなのかな?でも中にはスプレッドシートで勤怠管理して、それを提出しているっていう人もいると思う。自分もそういう勤怠管理で仕事することがある。

だから今回はそのスプレッドシートの勤怠管理を楽にしてやろうということで、ワンクリックで出勤・退勤時間の入力なんかをしたい。以前こんな記事を書いたんだけど、これを改造すればいけちゃう気がするからやってみる。

ではやっていこう。

スプレッドシートに出勤・退勤時間を自動で記録するGASを記述する

これは以前この記事でやったやつだね。この記事のコードを元にやっていくから、やりたい人は覗いてみてください。

関数が動くと、出勤時間や退勤時間をその時の時刻で入力してくれる。ただこのままだとGASのページに行って関数を実行しないと動いてくれないからとても不便。[デスクトップ上のアイコンクリック→GAS実行→出勤時間記録]みたいな流れにしたいよね。

そうすれば、出勤時にアイコンクリックするだけでスプレッドシートには出勤時間が記録されることになる。同じように退勤時にもアイコンをクリックすれば退勤時間が記録される。

そう、今回やっていきたいのはこれだ。ワンクリックで出勤・退勤の時刻をスプレッドシートに書き込みしてくれるようにする。

スプレッドシートにワンクリックで書き込みする流れ

ワンクリックでスプレッドシートに書き込みってどんなん?って感じだけど、こんな流れでやろう。

  • GASにリクエストを投げる
  • GASがリクエストを受け取る
  • スプレッドシートに書き込みに行く

出勤時間や退勤時間を入力したい時にデスクトップ上のアイコン(まだない)をクリックすると思うんだけど、クリックするとGASにリクエストが投げられる。リクエストがきたらGASはスプレッドシートに出勤時間や退勤時間を書き込みに行くっていう作戦だ。

これを実現するために、今のままでは色々足りないから補強していきたい。まずは、GASをウェブアプリケーションとして使っていくところからか。

GASをウェブアプリケーションとして使う

GASで作ったものをウェブアプリケーションとして使うようなことができるから、それで試してみる。以前iPhoneのショートカットとGASをつなげてLINEに通知するっていうのをやったけど、これと同じようなノリでいけそう。

まずは、デプロイボタンを押して、種類は[ウェブアプリ]にしておく。

適当に説明文を書いてデプロイ。

tokenを取得する

そしたら、doPostっていう関数を用意して以下の記述をする。単純にtokenを取得したいだけだ。

const doPost = () => {
  Logger.log(DriveApp.getRootFolder().getName());
  Logger.log(ScriptApp.getOAuthToken());
}

この関数を実行するとこんな感じでtokenを取得できる。これがないと認証を突破できないからコピーしておく。

そしたら、doPostの部分の中身は元に戻そう。

const findTargetRow = (vals, today) => {
  const index = vals.findIndex((date) => {
    return date[date.length - 1].toLocaleString() === today.toLocaleString()
  })
  return index + 1
}

const isEmpty = (cell) => {
  return cell.getValue() === ''
}

const doPost = () => {
  const sheet = SpreadsheetApp.openById('自分のスプレッドシートのID')
  const dates = sheet.getRange('A:A').getValues()
  // 書き込む行を検索
  const row = findTargetRow(dates, new Date(new Date().setHours(0, 0, 0, 0)))
  // 出勤時間のセル取得
  const attendanceTimeCell = sheet.getRange(`B${row}`)
  // 退勤時間のセル取得
  const leaveTimeCell = sheet.getRange(`C${row}`)
 
  const today = new Date()
  const time = today.getHours() + ':' +  today.getMinutes()

  switch (true) {
    case isEmpty(attendanceTimeCell):
      attendanceTimeCell.setValue(time)
      break;
    case isEmpty(leaveTimeCell):
      leaveTimeCell.setValue(time)
      break;
    default:
  }
}

doPost()っていうのを使うとHTTPメソッドがPOSTで送られた時に実行されるみたいだから、その中に処理を書いてやる。何を言ってるんだ?って感じかもしれないが、GASがリクエストを受け付けられるようなことをしている感じや。

GASに向けてリクエストを投げてみる

[デプロイを管理]からURLをコピーしてやろう。

このURLに向けてリクエストを投げればスプレッドシートの出勤時刻や退勤時刻に現在時刻が入力されそう。POSTで投げればいいだけだから、ターミナルからcurlで叩いてもいいけど面倒だからChromeのAdvancedRestClientっていうやつを使う。

  • Method・・・POST
  • Request URL・・・コピーしたURL
  • Header name・・・Authorization
  • Header value・・・Bearer + コピーしたtoken

これで[SEND]をクリックしてみると、、。

現在時刻が入力されました。出勤時間も退勤時間も空なら出勤時間に入力されるはずです。

注意

今回はtokenをコピーして使ったけど、このtokenは一定時間が経つと変更されるから、そうなると実行できなくなってしまう。ちゃんと継続して使うには実行可能APIとして使うようなことをしないといけなそうだね。

デスクトップからワンクリックで入力できるようにする

今までので準備は完了だ。後はデスクトップにアイコンを用意してクリックすると、同じようにリクエストを飛ばすっていう設定をしてやればいい。自分はMacを使っているんだけど、Automatorを使ってそのアプリケーションを作るね。Automatorをよく知らない人はこんな記事も書いたからよかったらどうぞ。

Automatorを起動したらアプリケーションを選択して、[シェルスクリプトを実行]っていうアクションを右側にドラッグする。

その中に書き込むのはこれ。

curl -XPOST -H "Authorization: Bearer コピーしたtoken" コピーしたURL

うまくいかなかったら、ターミナルなんかで実際に実行できるか確かめてからの方がいいかもしれないね。記述したら右上の実行ボタンを押して、スプレッドシートに書き込まれるかどうか確認してみるといい。書き込まれていたらOKだ。

保存したらそのアプリケーションをMacならDockに持ってくるとすぐに実行できる。

このMacのアイコンは変えられるから、自分の好きなものに変えておくといいよ。(Automatorのアイコン多すぎてよくわかんなくなってきたな・・・)

そして追加されたアイコンをクリックすると、スプレッドシートに勤怠の入力がされるっていう感じだ。作るのは面倒で時間もかかるけど、これからはこのアイコンをクリックするだけで出勤と退勤の時間を入力することができる。悪くない。

まとめ

スプレッドシートで自分の出勤管理とかすることあるし、自動化するかーと思ってやってみたけど、まあやっぱりちょっと面倒だよね。ただまあ、一回作ってしまえば、後はメンテナンスしていけばワンクリックで勤怠の入力は終わるから楽だったりする。毎回スプレッドシート開いて時間を入力する面倒な作業からは解放された、おめでとう。

Twitterでフォローしよう

おすすめの記事