草を生やして自分の活動を可視化する

2019-06-11 サービス

個人esaのトップページは、もともとpixelaを使って esa.io の投稿とTweet数を出していました。

これだけでも楽しかったのですが、試しにブログ更新とGitHubへのコミット数も出すようにしてみたら、どのくらい活動してるかがいろんな方面から可視化されて、とても良い感じになりました。

さらに、昨日からRambox Proを使い始めたのでダッシュボードにも配置してみました。

16b46e030c3b08ae9d9bf886.png (302.6 kB)

真ん中にはメモ用のGoogle Keepを配置して、さっとメモが取れるようにしています。(古いメモを片付けたので、今のところなにもないけど)

これでRamboxを開くたびに、いろんなサービスでどのくらい草を生やしてるか見えるわけですね。良さ。

大したことはしてないですが、それぞれどんな感じに設定してるかをまとめていこうと思います。

🐙 GitHub

Grass-Graph で作ったimageタグをそのまま貼っているだけです。

ただもともとはPrivate Repositoryへのコミットが反映されず寂しい芝の生え具合だったので、Private Contributionsの設定を変えてそれらも反映されるようにしました。

平日はだいたい緑ですが、休日はほとんど真っ白ですね。

もうちょっとプライベートでもコードを書いてpushしていきたいところ。

📝 ブログ記事の公開数

ブログの更新カウントはNetlifyでdeployされたらPixelaに草を生やすを参考に入れました。

とは言っても、Netlifyにリリース成功時のWebHook設定があるのでそれに追加するだけですね。お手軽。

blog activity

過去のデータは直近1年くらいだけ手で入れました。しばらくサボってたのでほとんどなかったですが……

1日に出しても1記事なので、色があんまり濃くならないのがちょっとさみしい。

🥚 esaの更新数

これは esa.io のWebhookを設定しているだけですね。

16b46f020cf0fab5fc37f55e.png (75.4 kB)

こんな感じで、post関連のものだけフックが飛ぶようにしています。

まぁひとりで使ってるので、コメントとかmember joinとかはそもそも飛びませんが。

esa activity

3月末に使い始めてからは、結構コンスタントに使っていますね。

esa feederを使って日報を極力省力化しつつ書いてるので、それが大きそう。

🐦 Tweet数

Pixelaで自分のツイート数を草化したを参考に設定しました。

CircleCIでサクッと設定できるので便利。

twitter activity

こちらもしばらく放置して、3月くらいから復帰してる感がありますね。

ちなみに、これを設定する過程でtweet_pixelsにめっちゃ細かいPRを2本ほど出したりしました。(#38, #39)

🐏 Ramboxのダッシュボード設定

esaの公開リンクを設定するだけですが、ダッシュボードに表示する目的だとヘッダーやフッターがちょっと邪魔になります。

このため、以下のようなカスタムCSSを当てて必要な要素だけを表示したり位置を調整したりしています。

.navbar-published, .post-header, .toc, .footer {
  display: none !important;
}

body {
  background: white !important;
}

.layout-wrapper {
  padding-top: 0 !important;
}

.main-column h1:first-child {
  margin-top: 18px;
}

またRamboxはWebアプリを前提にしているので、そのままだと更新されなくなってしまいます。

このため、以下のようなカスタムスクリプトも当てています。

setInterval("location.reload()",3600000);

これで1時間に1回リロードされる……はず。

💬 感想

わりと先人の知見通りにやったみたいなのばかりですが、活動が可視化されるのは楽しいですね。

今後も面白い指標が取れそうだったらどんどん測定・可視化していきたいと思います。