作業時間を簡単に可視化したい！！

# シチュエーション
今日もいっぱい作業したな・・・あれもしたしこれもやったし・・・
でもあの作業はどれくらいかかってやったっけ・・・って時に役立つツールを紹介します。

# 使用するもの
[WakaTime](https://wakatime.com/)
<img width="1452" alt="スクリーンショット 2019-12-10 16.50.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/91be1728-cc96-ff87-c3c3-41d2e37df85f.png">


これを使うことで自動でどのくらいの時間、どの時間帯に何の作業をしていたかを可視化してくれます！！

# 対応ソフト
<img width="1134" alt="スクリーンショット 2019-12-10 16.55.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/0b0790ae-ab77-8f5f-1059-3461f3686f8f.png">
[Plugin install instructions](https://wakatime.com/plugins)

現在これだけの数のIDE(一部ブラウザ等もあります)に対応しているためほとんどの方が使用できると思います!!

# アカウント作成
まずはアカウント作成をしましょう。GitHubアカウントでもログインできるのでそちらが楽かもしれません。

# インストール方法
各エディタごとのインストール方法を書くととんでもない量になってしまうので[Plugin install instructions](https://wakatime.com/plugins) にある各エディタごとのインストール方法を見てください。

ちなみに、各エディタに設定する際に頻繁に使用するAPIキーは右上のSettingから見ることができます。
<img width="1101" alt="スクリーンショット 2019-12-10 17.39.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/f7ebae15-3086-1193-b549-48867924d17f.png">


# できること
<img width="1452" alt="スクリーンショット 2019-12-10 16.50.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/91be1728-cc96-ff87-c3c3-41d2e37df85f.png">

最初にも記載した通りダッシュボードに見やすくどんな作業をがどれくらい行ったのかが表示されます。各項目をクリックすることでもっと詳細な内容を見ることができるのでそれを紹介したいと思います。

## プロジェクトごとの作業内容の詳細
<img width="720" alt="スクリーンショット 2019-12-10 17.02.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/4bb1a408-16c5-8e24-f529-451ec8ac122d.png">
この場所を押すことで各プロジェクトでどんなファイルをどんな時間編集していたかを見ることができます。
<img width="1350" alt="スクリーンショット 2019-12-10 17.03.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/7a449411-d7cd-26a8-7f1d-737029fe4b75.png">

## コーディング：ブラウジングの時間
<img width="717" alt="スクリーンショット 2019-12-10 17.05.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/e1035832-72ee-055d-415d-36d4319e972e.png">
右上のこのグラフはコーディングとブラウジングの時間をそれぞれまとめて表示してくれます。
この記事を公開することで少なくとも今週僕がコーディングよりもブラウジングをしていたことがバレてしまいました。

## 当日の作業内容と作業時間
<img width="720" alt="スクリーンショット 2019-12-10 17.09.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/b0229afc-9986-2323-62ef-6f4b2634d687.png">
その日行った作業名と作業時間がプロジェクトごとに表示されます。上の矢印で遡ることもできます。

## 前日比
<img width="718" alt="スクリーンショット 2019-12-10 17.09.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/5a38404a-06eb-32a8-3802-fde44014693c.png">
前日に比べて何%作業をしたかが表示されます。こういうものをモチベーションにするのもいいのではないかと思います。(毎日24時間作業をして「今日も前日比100%だ！！」みたいに喜ぶのはやめてください。死んでしまいます。)

## 使用言語
<img width="716" alt="スクリーンショット 2019-12-10 17.13.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/963d565f-9ad6-af3d-9558-f21b8d6d7d9a.png">
個人的にはとても好きな機能でどの言語をどれだけの時間書いていたかを表示してくれます。ただここにOtherとしてブラウザ等が含まれてしまうのが・・・

## エディタ
<img width="716" alt="スクリーンショット 2019-12-10 17.15.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144491/41ed75d2-058a-3a9a-c8bf-878d79d3c64a.png">

どのエディタをどのくらいの時間使っていたのかを表示してくれます。ここでも僕がブラウジングばかりしていることがバレました。

# その他の機能
その他にも作業時間の目標を「Goal」という機能として設定したり、GitHubなどに作業時間をバッヂとして付けたり、様々なことができます！！
無料のプランでは2週間分までしか履歴を遡ることができませんが、[有料プラン](https://wakatime.com/pricing)で無制限に履歴を遡ることもできます。(もちろんそれ以外にもたくさんメリットがあります)

[API](https://wakatime.com/developers)も公開されているので皆さんぜひいろいろ活用してみてください！！