Daily Report Generator
タイムトラッキングツール Clockify で収集したデータを日報様にフォーマットして出力する Chrome 拡張 Daily Report Generator を作りました！
スクリーンショット
できること
Clockify でタイムトラッキングした結果を、
下記の様にテキスト形式で出力できます。
■ 全社
【ミーティング】
┗ 0.7 h 部署間レクキックオフ
【その他】
┗ 0.6 h FE 会ミーティング準備
■ クラウド開発G
【開発】
┗ 3.0 h #82 事務局ユーザーで投稿を編集しようとするとプルダウンが表示されない
┗ 2.1 h #81 運営からのお知らせをホーム画面に表示する
┗ 0.4 h Prettier 設定
【その他】
┗ 1.3 h Sentry エラー起票
【ミーティング】
┗ 0.3 h 朝会
- 集計期間
- 見出しやタスク名フォーマット
- 所要時間有無
- ソート順
などを自由に変更することができます。
Clokify の使い方
Clockify は有名なタイムトラッキングツールです。
使い方については記事にまとめたのでご覧ください！
Daily Report Generator の使い方
インストールして使ってみれば使い方はすぐに分かると思います！
- 拡張アイコンをクリックして日報作成画面を開きます。
- 設定パネルの
Clockify API KeyとClockify Workspace IDを入力します。(取得方法は 後述 します。) - 集計期間パネルで集計開始日と終了日を入力します。
今日今週などを選択して期間を選択することも可能です。 - 集計オプションパネルでオプションを入力します。
-
XX のフォーマット: 見出しやタスク名の表示フォーマットを設定できます。 -
並び替え: タイムエントリーのソート順を名前 昇順または合計時間の降順のどちらかで選択できます。 -
時間を表示しない: チェックすると、各タイムエントリーの0.2hのような時間表示を非表示にします。
-
Clockify API Key の取得方法
- Clockify を開く
- 右上のアカウントアイコンをクリック
- Profile Settings をクリック
- ページ下部で API Key を生成して取得
Clockify Workspace ID の取得方法
- 左メニューバーの Settings をクリック
- 設定ページの URL に含まれるワークスペース ID を取得
使用技術
- TypeScript
- Vue.js
- Vuetify3
vitesse-webext というテンプレートを使うことで爆速開発を実現しています。
少し古いですが、特徴や使い方をまとめた記事を書いたので参考にどうぞ。
OSS として公開しているので、機能追加要望や PR お待ちしております。
なぜ Chrome 拡張？
Chrome 拡張を選んだ理由は下記です。
- 外部 API を叩く処理がある
- とはいえサーバーを立てるのは大げさな気がした
- ユーザの Clockify API Key などの秘匿情報を管理したくなかった
外部 API を使うアプリを作りたいが、ユーザのデータの管理をしたくない、という人に Chrome 拡張は非常にオススメです。
Chrome 拡張開発に興味を持った人は下記の記事を参考にしてみてください。