GASとVueでサーバレス社内向け工数管理(勤怠管理)を作ってみた。

初めまして、ホットファクトリーでフロントエンドを担当しています森本です。

これまでスプレッドシートを使って社内チームの工数管理を行なっていたのですが、

「もう少し細かい工数管理がしたい。」
「集計がしずらい」
「残業管理もできれば」

みたいな要望が上がってきたのと、最近自分の中でVueが熱かったのと、あくまでコストをかけないという事でgoogleスプレッドシートとGASを使って、サーバレスの環境で今回の実装をしてみました。

ざっくりこんな仕様です。

・スプレッドシートでクライアント、プロジェクト、案件を管理
・ユーザーが投稿するフォームにはスプレッドシートのクライアント、プロジェクト、案件が選んだ内容でプルダウンが切り替わる。
・ユーザーは1日ごとに行なった「クライアント」「プロジェクト案件」「かかった時間」をフォームから入力
・フォームがSUBMITされた内容を計算用シートにぶち込む。

やってみてわかった事

他チームからも使いたいという要望が上がってきた。
最初は僕が所属しているチームだけで使っていたのですが、これは単純に嬉しかったです。

他チームも使う=思ってなかった要望が色々と出てくる

・プルダウンを選ぶのが面倒なので、サジェストやよく使うクライアントを最初に出してほしい。
・他チームも使える共通したクライアントの保持方法どうしよう?

などなど、確かにそれあった方がいいですね的な要望が出てきて、青ざめながらも複数のチームで使えると強固なシステムになるなーという、自分の中でのこの案件に対してのモチベーションは上がりました。

やってみてわかった事と主な実装をQiitaにまとめてみましたので、皆さんご覧ください。(絶賛Qiita側でも編集リクエスト受付中です。)

GASとVueでサーバレス社内チーム向け工数管理
Google Apps Script でHTMLファイルを作って表示。
VueのイベントハンドラとGAS関数のスプレッドシートデータ連携方法(その1)
VueのイベントハンドラとGAS関数のスプレッドシートデータ連携方法(その2)
VueからGAS関数でスプレッドシートにデータを入力


ホットファクトリークリエイターズのfacebookページにて社内の雰囲気、スタッフ紹介、最新の制作実績など公開中。

ホットファクトリークリエイターズのFacebook
ホットファクトリーコーポレートサイト

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

25

WEB

Webに関する情報やトークなどに関するマガジン
3つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。