えいのうにっき

誤字脱字・記述の誤りなどはこちら https://github.com/a-know/blog.a-know.me へお願いします

Scrapbox への更新がどれくらい活発におこなわれているかを Pixela で可視化する

現在、個人メモのソリューションを Scrapbox に移行することを試しております。

scrapbox.io

もともと Scrapbox に対しては「本当に......?」と訝しんでいたところもあったんですが(スミマセン)、働いてる会社に導入されて実際に触ってみてからというもの、その書き心地にすっかりハマってしまいました。特にハッシュタグの機能がとてもイイですね。このブログの下書きも Scrapbox で書いてます。

一方の Pixela は、拙作の Web API サービスです。日付単位で数値を記録することができ、その大小を GitHub のアレみたくグラフ化することができます。基本無料です。

pixe.la

Patreon で支援いただくこともできて、その場合いくつかの限定機能を使うこともできるようになります。

www.patreon.com

この Pixela と Scrapbox を掛け合わせて、記事タイトルのようなことをやってみました。まさに!ってかんじの要望も挙げられていたみたいだったので、厳密ではないにしろ、今回の内容はおもしろいと思います。

scrapbox.io

Scrapbox には更新通知を Slack に連携する機能がある

Settings > Notifications ( https://scrapbox.io/projects/<project-name>/settings/notifications )で、Slack の Incoming Webhook URL を設定できるようになっています。

f:id:a-know:20191022181600p:plain

Scrapbox のヘルプもあります。

scrapbox.io

ヘルプにも記載されているとおり、以下のような特徴があります。

  • Scrapboxへ最後に書き込んだ後、90秒経過すると通知される
  • 連続して書き続けている間は通知されない
  • Slack以外のURLにも、通知は送信可能
    • データフォーマットはSlackと同じ物になる

Pixela には POST リクエストを送るだけでインクリメント / デクリメントができる Webhook 機能がある

あるんです。

まずはユーザー登録。APIドキュメントはこちら POST - /v1/users - Pixela API Document

$ curl -X POST https://pixe.la/v1/users -d '{"token":"thisissecret", "username":"a-know", "agreeTermsOfService":"yes", "notMinor":"yes", "thanksCode":"ThisIsThanksCode"}'
{"message":"Success.","isSuccess":true}

続いてグラフの作成。APIドキュメントはこちら POST - /v1/users/<username>/graphs - Pixela API Document

$ curl -X POST https://pixe.la/v1/users/a-know/graphs -H 'X-USER-TOKEN:thisissecret' -d '{"id":"test-graph","name":"graph-name","unit":"updates","type":"int","color":"shibafu","timezone":"Asia/Tokyo"}'
{"message":"Success.","isSuccess":true}

ここまでできれば https://pixe.la/v1/users/a-know/graphs/test-graph.html でグラフは見られます。

次に Webhook の作成。APIドキュメントは POST - /v1/users/<username>/webhooks - Pixela API Document 。Webhook の対象となるグラフのIDと、その Webhook が invoke されたときの挙動(increment or decrement )を指定するかんじになります。

$ curl -X POST https://pixe.la/v1/users/a-know/webhooks -H 'X-USER-TOKEN:thisissecret' -d '{"graphID":"test-graph","type":"increment"}'
{"webhookHash":"","message":"Success.","isSuccess":true}

これで準備はOK。https://pixe.la/v1/users/a-know/webhooks/<WebhookHashString> に対して POST リクエストをおこなうことで、指定したグラフの当日の値がインクリメント / デクリメントされるようになります。いちおう、APIドキュメントは POST - /v1/users/<username>/webhooks/<webhookHash> - Pixela API Document です。

このとき、リクエストボディは不要で、仮に何かセットされていても無視します。つまり、Scrapbox の Notification の宛先としても指定できる、ってことですね!

やってみた

Scrapbox の Notifications の設定はこんなかんじになります。

f:id:a-know:20191022181936p:plain

ただグラフを見てもつまんないので、僕は↓のような Scrapbox ページを作ってプロジェクトにピン留めしてみました。

f:id:a-know:20191022181956p:plain

このページのソース(?)は、こんな↓かんじ。

[https://pixe.la/v1/users/a-know/graphs/scrapbox.svg?mode=line]
[https://pixe.la/v1/users/a-know/graphs/scrapbox.svg]
[a-know/scrapbox - Pixela https://pixe.la/v1/users/a-know/graphs/scrapbox.html]

シンプルですね!

まとめ

今回は Scrapbox と Pixela の連携をやってみました。

「作成されたページ数」とか「書かれた行数」とか、そこまで厳密な活動量の記録・可視化ではないにしても、「更新がどれくらい活発におこなわれているか」の目安くらいにはなるかと思います(Scrapbox と Pixela の間に何かを挟んでゴニョゴニョすれば、厳密な活動量の可視化もできなくはないと思います)。

しかし、メモソリューションの移行は大変かつ面倒で、それでいて楽しいものですね......。