Appendix A: 「ジョージア工科大学に合格するまでの572時間29分02秒」の作り方¶
Summary
- TodoistとToggl trackをChrome拡張機能で連携させて作業時間を記録し，Toggl APIでデータを取得
- 上記のデータを前処理した後，plotlyでインタラクティブなグラフを生成し，mkdocs-macrosで埋め込み
- MkDocsで静的サイトのコンテンツを生成し，GitHub Pagesにホスティング
概要¶
このページでは，本サイト 「ジョージア工科大学に合格するまでの572時間29分02秒」 を構築するために必要だった準備をまとめます．
まず必要なのは作業時間の記録です． 私は， Todoist のタスクを Chrome拡張機能 を使って Toggl track と連携することで，作業時間を記録しました． 記録したデータは， Toggl API を用いてダウンロードしました．
上記のデータを前処理した後で，
plotly
を用いてインタラクティブなグラフをHTMLファイルとして出力しました．
上記のHTMLファイルを，後述する
mkdocs-macros
を使ってサイトの本文に埋め込むために，
<HTML>タグや<BODY>タグを削除する必要がありました．
MkDocs を使って静的サイトのコンテンツを生成し， GitHub Pages にデプロイしました．
Todoist & Toggl track¶
Todoist のタスクを Chrome拡張機能 を使って Toggl track と連携することで，作業時間を記録しました．
Todoist はタスク管理アプリです． 私は「受験勉強」プロジェクトを作成し，OMSCS出願に関する全てのタスクを管理しました．
Note
私はプロプランを契約していますが，フリープランでもプロジェクト機能は利用可能らしいです．
Toggl track は，タイムトラッキングアプリです． 私はこのアプリを使って，2019年ごろから現在まで24時間365日，秒単位で全ての作業時間を記録しています．
Chrome拡張機能 を用いることで，TodoistとToggl trackを連携しました． 具体的には，Todoist上の各タスク上でTogglボタンを押下することで，当該タスクのプロジェクトとタスク名で作業時間を記録しました．
例えば，Ankiを解き始める時に，下記のようにTogglボタンを押下すると，
下記のように，Toggl trackで「受験勉強」プロジェクトの「Ankiを解く」作業時間の記録が開始されます．
Toggl trackのWeb画面では，下記のように表示されます．
Toggl trackのデータは， Toggl API を用いてダウンロードしました． このデータを前処理した後，plotlyでグラフを描画しました．
plotly¶
上記のデータを元に，plotlyでインタラクティブなグラフを描画し，HTMLファイルとして出力しました． ベーシックなグラフしか利用していないため，plotly公式のサンプルをご覧になればなんとなく作成方法はご理解頂けると思います．
Note
実は曜日ごとの作業時間や，時間帯ごとの作業時間をRidgeline plotで描画したりしましたが，労力の割に面白い結果が得られなかったため，割愛しました．
「作業時間の推移」の作成方法¶
Basic Range Slider and Range Selectorsのサンプルをベースに，下記のような修正を加えました．
- 「TOEFL受験」等の縦方向の点線とアノテーションを追加：Horizontal and Vertical Lines and Rectangles in Python
- ホバー時に合計作業時間を表示（
hovermode="x unified"）：Unified hovermode - 下部にDate range sliderを追加：Basic Range Slider and Range Selectors
「作業時間の内訳」の作成方法¶
Bar chart with plotly Expressのサンプルをベースに，下記のような修正を加えました．
- ホバー時に合計作業時間を表示（
hovermode="x unified"）：Unified hovermode
「作業時間の内訳の推移」の作成方法¶
Stacked Bar Chartのサンプルをベースに，下記のような修正を加えました．
- 「TOEFL受験」等の縦方向の点線とアノテーションを追加：Horizontal and Vertical Lines and Rectangles in Python
- ホバー時に合計作業時間を表示（
hovermode="x"）：Hovermode x or y - 下部にDate range sliderを追加：Basic Range Slider and Range Selectors