【生産性アップ】Chrome拡張機能「FlowTime」を活用した効率的な仕事の進め方

#はじめに#
こんにちは！
名古屋への引っ越し準備に大忙しなインフラ女子(?)、山口です。

毎日仕事をしている中で、時間を有効に使って成果を出す、ということはとても難しいですよね。
また、先輩エンジニア、リーダー格になるとお客様やメンバーからの相談が次々と舞い込み、
想定した通りに仕事を進められることはほぼ不可能になってしまいます。

今までExcelやOUTLOOK、Webのフリーツールを使ったタイムマネジメントをいろいろやってきましたが
今回**シンプル**で**使いやすそう**なChromeの拡張機能がありましたので
実際に設定して使ってみたレポートを書こうと思います。

#FlowTimeを使ってみよう#
今回使ってみるタイムマネジメントのツールは、Chrome拡張機能**「FlowTime」**です。

タイマーを設定して時間になると、こんな感じで通知してくれます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Chrome拡張機能「FlowTime」でタイムマネジメント１ <a href="https://t.co/Y2FDHHoViS">pic.twitter.com/Y2FDHHoViS</a></p>&mdash; Joe (@Anna_Ao_) <a href="https://twitter.com/Anna_Ao_/status/1328947213645590529?ref_src=twsrc%5Etfw">November 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##アドオンのインストール方法##
では早速インストールしてみましょう。

[Chromeウェブストア](https://chrome.google.com/webstore/category/extensions?hl=ja)にアクセスします。
検索ウィンドウに**「FlowTime」**と入力するとフィルターされて出てくるので、
表示された「FlowTime」を押します。
<img width="350" alt="FlowTime_1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36592/54c8906b-fbf0-784f-38e7-b030d948bfaf.png">
[Chromeに追加]を押すと 「FlowTime」を追加しますか？ と表示されるので、
[拡張機能を追加]を押してChromeに組み込みます。
<img width="350" alt="FlowTime_2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36592/ebce938d-eb0f-f47b-51b7-83d60c2e1c5c.png">
Chromeブラウザの右上にFlowTimeのアイコンが表示されればインストール完了です。
<img width="250" alt="FlowTime_3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36592/8a6d523e-724f-82bc-ea48-a6db9fb997eb.png">

他にもChrome拡張機能を入れている方の場合は、
パズルのアイコンを開くとFlowTimeのアイコンが出てくるので📌マークを押しましょう。
<img width="350" alt="FlowTime_3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36592/ba15cc4b-bb06-113d-9267-ef6e89df26c1.png">

検索からインストールまで3分もかかりません。簡単ですね！
##使ってみよう##
FlowTimeのアイコンをクリックすると、設定を変更したり、タイマーを作動させたりできます。
仕事用の時間（青）と休憩用の時間（緑）をそれぞれ設定できます。
時間を入れて*▶*を押せば、タイマーが動きます。
<img width="300" alt="FlowTime_4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36592/e4d478c8-7886-d54d-4f43-c515bfdc00f0.png">

他のブラウザで作業していてもアイコンのところに残り時間が表示されるので
あと何分でこのターンが終わるのかが一目瞭然です。
<img width="300" alt="FlowTime_5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36592/1cc30208-76b0-3422-cbdd-b39b66532904.png">

設定した時間が経過すると、冒頭の動画の通り音と目で教えてくれます。
もし席を外していて聞き逃してもアイコンが**[Done]**に変わるので気づけますね。
<img width="300" alt="FlowTime_8" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36592/c5132715-06dc-e233-6d2f-fe90a985e496.png">


##通知の設定をアレンジ##
設定した時間が経過したことを以下の3つで通知してくれます。

・OSの通知機能で知らせる（動画では見えていません）
・新しくブラウザのタブを開く
・サウンドで知らせる

冒頭で紹介した動画はデフォルトの設定です。
新しいタブを開いて通知やデスクトップ通知はいらないので、
サウンドだけで時間が経ったことを知らせてもらうことにしました。
設定はFlowTimeアイコンを押し、下に表示される[Settings]をクリックします。
<img width="300" alt="FlowTime_6" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36592/c523331a-7c26-a510-6248-15a7a918a857.png">

設定を変更したら[Test]を押します。
<img width="350" alt="FlowTime_7" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36592/0fa1ce1f-88f8-1f43-4f81-581e666739c3.png">

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Chrome拡張機能「FlowTime」でタイムマネジメント２ <a href="https://t.co/OMVRkknAd4">pic.twitter.com/OMVRkknAd4</a></p>&mdash; Joe (@Anna_Ao_) <a href="https://twitter.com/Anna_Ao_/status/1328947700201648129?ref_src=twsrc%5Etfw">November 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ついでにサウンドも変更してみました。
音楽が流れ、FlowTimeアイコンがDoneになっているのがわかりますね。

#終わりに#
割り込みがあった時に、経過時間を一時的に止める機能があるともうちょっといいなーとは思いますが、
とはいえタイマーにそこまで多くを求めないので、個人的には十分かと。

タイムマネジメントって社会人として基本的なことだけど、なかなかうまくいかないのが現状。
意識的に時間を決めて進めることで、生産効率の高いSE目指して頑張ります！