Chiroru's Diary

日々の学びをちょこちょこメモしていきます

Scrapboxに草を生やす

最近自分のメモ書き用にScrapboxを使用しており、結構使い心地が良くなってきました。ブログと違い、気軽にまとめたり小さな単位でアウトプットできることが良いなと思っています。

利用頻度がある程度増えてきたので、Scrapboxに草を生やすことにしました。

Pixela

Githubのグラフのような物を提供してくれるWebAPIです。 今回はScrapboxの投稿を可視化するのに利用しました。

手順

Pixelaにユーザー登録

$ curl -X POST https://pixe.la/v1/users -d '{"token":"XXXXX", "username":"chiroru", "agreeTermsOfService":"yes", "notMinor":"yes"}'

=>{"message":"Success. Let's visit ~~~ , it is your profile page!","isSuccess":true}

今回利用するグラフの作成

$ curl -X POST https://pixe.la/v1/users/chiroru/graphs -H 'X-USER-TOKEN:XXXXX' -d '{"id":"scrapbox-graph", "name":"my-scrapbox-graph", "unit":"updates", "type":"int", "color":"shibafu", "timezone":"Asia/Tokyo"}'

=>{"message":"Success.","isSuccess":true}

Webhook作成

Webhookとは、あるアプリケーションの更新情報を、他のアプリに提供する仕組みのことで、今回でいうとScrapboxの投稿情報を、Pixelaに提供してグラフの草を生やすのに利用します。

$ curl -X POST https://pixe.la/v1/users/chiroru/webhooks -H 'X-USER-TOKEN:XXXXX' -d '{"graphID":"scrapbox-graph", "type":"increment"}'

=>{"message":"Success.","isSuccess":true,"webhookHash":"~~~~~"}

※ 参考:Webhookとは?

ScrapboxでNotificationsに設定する

Project settings/Notificationsに、以下を追加する。

https://pixe.la/v1/users/chiroru/webhooks/webhookHash

Scrapboxで表示する

以下のようにURLを追加します。

https://pixe.la/v1/users/chiroru/graphs/scrapbox-graph.svg

するとこんな感じで表示できます↓あっという間!

f:id:chiroru_memo:20201229234653p:plain

参考