作った経緯
これまでスプレッドシートを使って社内チームの工数管理を行なっていたが、
「もう少し細かい工数管理がしたい。」
「集計がしずらい」
「残業管理もできれば」
みたいな話が上がってきたので、
元々スプレッドシートを使っていたので、
GASでフォームを使ってスプレッドーシートに情報が入っていくようなシステムをVueで作った。
技術的には GAS,Vue,スプレッドシート関数
と言ったところ。
現時点で実装が出来たこと
- スプレッドシートでクライアント、プロジェクト、案件を管理
- ユーザーが投稿するフォームにはスプレッドシートのクライアント、プロジェクト、案件が選んだ内容でプルダウンが切り替わる。
- ユーザーは１日ごとに行なったクライアントプロジェクト案件_かかった時間をフォームから入力
- フォームがSUBMITされた内容を計算用シートにぶち込む。
気をつけたところ
- 機密情報もあるので、基本クローズドなシステムであること
実装方法
GAS＋Vue.jsでサーバレスなWebアプリ①
https://qiita.com/kyhei_0727/items/f409ab53bac931d4eb77
こちらを参考に進めさせてもらいました。
実装の流れは
1. スプレッドシートに必要なデータを入れる
2. Vueからユーザーの操作に合わせて.gsファイルに記述している関数を走らせる
3. .gsファイルに記述している関数からVueのDataをリアクティブに変更する
自分の頭の中にしか設計図はなかったので、上記の3工程を平行しながらテストアンドビルドを繰り返した。
以下に細かくシリーズ化して実装内容や詰まったところを掲載して行く予定。