高木のブログ

Togglの作業時間をPixelaで可視化する

2020/08/13

コロナの影響で在宅勤務なり、可処分時間が増えた
せっかく増えた時間を無駄にしないようにと自己研鑽に励み、その時間をTogglで管理している
さらに可視化をしたらモチベーション上がるかなと思ったので、Pixelaに草を生やしてみた

Lambdaでやろうとしたけど、僕はひよっこエンジニアなのでGASに逃げた
GASはコーディングから定期実行の設定までサクッとできるから便利(おそらくLambdaもそう)

仕様

  • 毎日0時に前日分のTogglに記録された合計作業時間をPixelaに反映する
  • Pixelaに草を生やす単位は分

コード

※ 最初のグラフを作成する手順は省略

function myFunction() {
  const properties = PropertiesService.getScriptProperties().getProperties();

  const date = new Date();
  date.setDate(date.getDate() - 1);

  const date_toggl = Utilities.formatDate(date, 'Asia/Tokyo', 'yyyy-MM-dd');
  const toggl = new Toggl(properties.TOGGL_API_TOKEN);
  const summary = toggl.fetchSummary('toggl_to_pixela', properties.TOGGL_WORKSPACE_ID, date_toggl, date_toggl);
  const minutes = parseInt(summary['total_grand'] / 1000 / 60);

  const pixela = Pixela.create(properties.PIXELA_USERNAME, properties.PIXELA_PASSWORD);
  const date_pixela = Utilities.formatDate(date, 'Asia/Tokyo', 'yyyyMMdd');
  pixela.updatePixel('task-durations', date_pixela, minutes);
}

class Toggl {
  constructor(apiToken) {
    this.apiToken = apiToken;
  }

  fetchSummary(userAgent, workspaceId, since, until) {
    const url = 'https://toggl.com/reports/api/v2/summary?' +
      'user_agent=' + userAgent +
      '&workspace_id=' + workspaceId +
      '&since=' + since +
      '&until=' + until;

    const options = {
      'method' : 'GET',
      'headers': {'Authorization' : 'Basic ' + Utilities.base64Encode(this.apiToken + ':api_token')},
      'muteHttpExceptions' : true,
    }

    const response = UrlFetchApp.fetch(url, options);

    return JSON.parse(response);
  }
}

特に細かい説明はしないけど、

本来であれば例外処理などの対応をやっておいた方がいいが、
コケたらコケたでいいやと思ったのとスクリプトがコケた場合は、
Googleからメールが来るのでそれで十分と判断したため省略した

それぞれのAPIについて軽く触った記事

結果

無事、草グラフが出来た(https://pixe.la/v1/users/takagi/graphs/task-durationspixela

Pixelaは画像以外にも詳細のページまで用意されている
Pixela グラフの詳細画面 https://pixe.la/v1/users/takagi/graphs/task-durations.html

もう3週間ほど動かしているが、今のところ問題なく動いてるので良き

参考

“草APIサービス” Pixela の Google Apps Script ライブラリを作成しました - ChangeLog - noissefnoc


Pixela