blog.textfile.org結城浩のブログ

blog.textfile.org

自分の作業をざっくり把握するための工夫(JSON + SVG)

背景

  • 自分が今日どんな作業をしたかをざっくりとらえるために「色つき星取表」というものを作っている。

問題

  • 自分でいちいち「今日何をやった」を入力するのがめんどうである。

解法

  • 自分の作業で必ず実行するコマンドに、以下のようなJSON形式で作業記録を付ける処理を混ぜ込む。
  • pwd は作業ディレクトリで、dateは今日の日付。
work.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[
  // (省略)
  {
    "pwd": "/Users/hyuki/girl",
    "date": "2014-11-14"
  },
  {
    "pwd": "/Users/hyuki/private",
    "date": "2014-11-12"
  },
  {
    "pwd": "/Users/hyuki/girl/note",
    "date": "2014-11-14"
  },
  // (省略)
]
  • そのファイルを読み込んで、自作スクリプトでHTMLに変換する(実質はSVG)。
work.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<body>
<svg width="1000" height="500">
(省略)
<rect x="0" y="0" width="16" height="16" fill="#f0f0f0"/>
<rect x="18" y="0" width="16" height="16" fill="#6666ff"/>
<rect x="36" y="0" width="16" height="16" fill="#f0f0f0"/>
<rect x="54" y="0" width="16" height="16" fill="#6666ff"/>
<rect x="72" y="0" width="16" height="16" fill="#6666ff"/>
<text x="92" y="14" fill="black" font-family="Verdana" font-size="16" stroke="black">girl</text>
<rect x="0" y="18" width="16" height="16" fill="#f0f0f0"/>
<rect x="18" y="18" width="16" height="16" fill="#f0f0f0"/>
<rect x="36" y="18" width="16" height="16" fill="#f0f0f0"/>
<rect x="54" y="18" width="16" height="16" fill="#6666ff"/>
<rect x="72" y="18" width="16" height="16" fill="#f0f0f0"/>
<text x="92" y="32" fill="black" font-family="Verdana" font-size="16" stroke="black">girl/note</text>
<rect x="0" y="36" width="16" height="16" fill="#f0f0f0"/>
<rect x="18" y="36" width="16" height="16" fill="#f0f0f0"/>
<rect x="36" y="36" width="16" height="16" fill="#6666ff"/>
<rect x="54" y="36" width="16" height="16" fill="#f0f0f0"/>
<rect x="72" y="36" width="16" height="16" fill="#f0f0f0"/>
<text x="92" y="50" fill="black" font-family="Verdana" font-size="16" stroke="black">private</text>
(省略)
</svg>
</body>
</html>

結果

  • 以下のようなグラフができる。

参照

  • 以下の連続ツイートは作業のメモです。

work_hereを作る。

もう少し考えを進める。

work_mapを作る。

追記(2014-11-20)

  • 具体的なスクリプトはYukiTaskで公開。