🗓️

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

に公開

こんにちは、つくぼし(tsukuboshi0755)です!

皆さん、Googleカレンダーで予定を管理する際、プロジェクト毎に工数を集計したいと思った事はありますでしょうか。

今回はカレンダーの予定から色毎に工数をカウントして集計する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招待を邪魔する事なく工数をカウント可能です。

まとめ

今回はGoogleカレンダーの予定を色別に工数集計するGASアプリを作成してみました。

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

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

以上、つくぼし(tsukuboshi0755)でした!

Discussion