48
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

GASとVueでサーバレス社内チーム向け工数管理

作った経緯

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

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

みたいな話が上がってきたので、

元々スプレッドシートを使っていたので、
GASでフォームを使ってスプレッドーシートに情報が入っていくようなシステムをVueで作った。
技術的には GAS,Vue,スプレッドシート関数
と言ったところ。

現時点で実装が出来たこと

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

気をつけたところ

  • 機密情報もあるので、基本クローズドなシステムであること

実装方法

GAS+Vue.jsでサーバレスなWebアプリ①
https://qiita.com/kyhei_0727/items/f409ab53bac931d4eb77
こちらを参考に進めさせてもらいました。

実装の流れは
1. スプレッドシートに必要なデータを入れる
2. Vueからユーザーの操作に合わせて.gsファイルに記述している関数を走らせる
3. .gsファイルに記述している関数からVueのDataをリアクティブに変更する

自分の頭の中にしか設計図はなかったので、上記の3工程を平行しながらテストアンドビルドを繰り返した。

以下に細かくシリーズ化して実装内容や詰まったところを掲載して行く予定。

GASとVueでサーバレス社内チーム向け工数管理

  1. Google Apps Script でHTMLファイルを作って表示。
  2. VueのイベントハンドラとGAS関数のスプレッドシートデータ連携方法(その1)
  3. VueのイベントハンドラとGAS関数のスプレッドシートデータ連携方法(その2)
  4. VueからGAS関数でスプレッドシートにデータを入力
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
48
Help us understand the problem. What are the problem?