🗓️

Google Calenderの予定をTypeScriptを用いて色別で工数集計してみた

に公開

タイトルの通り、カレンダーの予定から色毎に工数をカウントして集計するGASアプリを、TypeScriptを用いて作ってみたので紹介する。

https://github.com/tsukuboshi/gas-count-schedule-time

このGASアプリを使用すると、Googleカレンダーに記載されている予定の色を元に、以下のような形でスプレッドシートに自動で予定一覧を書き出しされ、工数合計が算出されるようになる。

背景

今までも参加するプロジェクトで稼働を集計し報告するタスクが度々あったが、その際はGoogleカレンダーを目視しながら集計していた。

しかしながら最近関わるプロジェクトが増えてきており、個人的に目視での集計が面倒に感じてきていた。

上記の問題を解消するため、当初はGoogleカレンダーの「時間の分析情報」を用いて、色ラベル毎に種類別で工数を集計しようと考えていた。

https://support.google.com/calendar/answer/12377581?hl=ja&co=GENIE.Platform%3DDesktop

https://support.google.com/calendar/answer/10738043?hl=ja

ただしこちらの機能は、有料プランに加入しているカレンダーでないと使えず、また別ファイルへのエクスポートに対応しておらずデータを管理しづらいという理由で、最終的に断念した。

そこで自分で「GASアプリを自作して集計してしまえば良いのでは?」と考え、今回のGASアプリ作成に至る。

前提条件

今回はGAS開発にasideというツールを使用し、TypeScriptを用いて開発を行っている。

TypeScriptで開発する事で、型安全性を保ちながらバックエンド開発を進める事ができるためオススメしたい。

https://github.com/google/aside

アプリケーション仕様

今回のGASアプリの本体はsrc/index.tsからなる。

src/index.tsは、工数集計処理を実施する本体である。

このファイルはスプレッドシートの「プロパティ」シートに記載された引数を用いて、以下の関数毎に対応した処理を実施する。

  • onOpen: スプレッドシートを開いたときに、カスタムメニューの追加とプロパティシートの初期化を行う。
    • addCustomMenuToUi: スプレッドシートのUIに「工数計算」というカスタムメニューを追加する。
    • writePropertyToSheet1: スプレッドシートの最初のシートに、カレンダーID、色、ラベル、対象年月の設定項目を書き込む。
  • main: メイン処理を行い、カレンダーからイベントを取得し、工数を計算してシートに書き込み、チャートを更新する。
    • getCurrentYearMonth: スプレッドシートから対象年月の設定を読み込み、未設定の場合は現在の年月を返す。
    • getOrCreateCurrentMonthSheet: 指定された年月のシートを取得し、存在しない場合は新しいシートを作成する。
    • getCalendar: 指定されたカレンダーIDのカレンダーオブジェクトを取得する。
    • getStartTimeAndEndTime: 指定された年月の月初と月末の日時を取得する。
      • getEventsfromCalendar: 指定されたカレンダーから、指定期間内のイベントを取得する。
    • writeHeaderColumn: 指定されたシートに、イベント一覧と集計結果のヘッダー行を書き込む。
    • writeEventsToSheet: 取得したイベントの情報を、指定されたシートに書き込む。
      • getEventContent: イベントオブジェクトから、タイトル、色、ステータス、開始日時、工数などの情報を取得する。
    • calculateWorkHoursByColor: ステータスがOWNERまたはYESのイベントについて、色番号ごとに工数を合計する。
      • getEventContent: イベントオブジェクトから、タイトル、色、ステータス、開始日時、工数などの情報を取得する。
    • writeSummaryToSheet: 色番号ごとの工数集計結果をシートに書き込み、集計範囲を返す。
    • createOrUpdateChart: 工数集計結果を基に、円グラフを作成または更新する。

なお工数の集計対象は自身が作成した予定、または他の人から招待され自身が承諾した予定のみとし、それ以外の予定は集計対象外としている。

https://github.com/tsukuboshi/gas-count-schedule-time/blob/main/src/index.ts

デプロイ手順

デプロイ手順については、リポジトリのREADMEに記載しているため以下を参考にしてほしい。

https://github.com/tsukuboshi/gas-count-schedule-time/blob/main/README.md

使い方

GASアプリのデプロイ後、以下の手順を実施する必要がある。

Googleカレンダー側の設定

事前にGoogleカレンダーで、以下のように集計したい予定について色分けをしておく。

またGoogleカレンダーIDを、カレンダー毎の「設定メニュー」→「設定」→「マイカレンダーの設定」→「カレンダーの統合」より確認しメモしておく。

スプレッドシートでのパラメータ設定

以下のいずれかを実施する事で、GASプロジェクトに紐づいているSpreadSheetを開く。

  • ブラウザ:GASプロジェクトホームより、GASプロジェクトに紐づいているスプレッドシートを開く
  • ターミナル:npx clasp open --addonコマンドで開く

SpreadSheetの「プロパティ」シートを開いたら、以下の通りA列に対して工数計算したいGoogleカレンダーID、D列に対してカレンダー色に対応するラベル名、G列に対して対象の年月を入力する。

なおG列の対象の年月は空欄でも良いが、その場合実行時の年月が自動で設定される。

カスタムメニューによるGAS設定

SpreadSheetの上部にカスタムメニューが追加されているので、ここからmain関数を実行できる。

「工数計算」をクリックする事で、対応する年月のシートが自動作成または更新され、以下のように工数計算の結果及び円グラフが表示されるようになる。

補足

例えばプロジェクトの工数のみならず、1日の稼働工数全てを割り出したい場面もあるだろう。

その場合は、複数カレンダーを作成し、全てのGoogleカレンダーIDを配列で指定する形にすると使いやすい。

例えば片方のカレンダーはMTG用でメンバー全員に共有する形にしつつ、もう片方のカレンダーはタスク用として自分の管理専用とする事で、他の人からのMTG招待を邪魔する事なく工数をカウント可能である。

最後に

GASアプリは使い慣れた言語で開発でき、かつ自動化の第一歩として非常にオススメである。

asideを用いる事でTypeScriptでも簡単に書けるようになるので、他に自動化のアイデアを思いついた際はぜひ作成してみたい。

Discussion