Gaiax Engineers' Blog

Gaiaxのエンジニアブログです。 社内のエンジニア様子、イベントレポート等を発信していきます。

Kibela の活用状況を Pixela で可視化してみた

こういうのを作りました

f:id:chanyou0311:20210805154607p:plain
Kibela の活用状況を Pixela で可視化した

発端

社内のナレッジ共有ツールとして Kibela を導入することになりました。

KibelaAPI で記事の投稿状況をいい感じに可視化できると、利用者の執筆モチベーションにつながっていいなと思っていました。

なんてことをつぶやいていると、

Pixela の開発者の @a-know さんから、Webhook で簡単に連携できそうだとリプライいただきました。

よし、早速やってみよう。

手順

アカウントとグラフを作成する

基本は公式の使い方の手順に従って、ユーザーアカウントとグラフを作成します。

Pixela | あなたの頑張りや継続を記録し、育てたい。そのすべてを、APIで。

# create user
$ curl -X POST https://pixe.la/v1/users -d '{"token":"thisissecret", "username":"chanyou", "agreeTermsOfService":"yes", "notMinor":"yes"}'
{"message":"Success.","isSuccess":true}

# create graph
$ curl -X POST https://pixe.la/v1/users/chanyou/graphs -H 'X-USER-TOKEN:thisissecret' -d '{"id":"kibela","name":"Kibela Activity","unit":"view","type":"int","color":"sora","timezone":"Asia/Tokyo}'
{"message":"Success.","isSuccess":true}

ひとまずグラフが作成されたことを確認します。

https://pixe.la/v1/users/chanyou/graphs/kibela.html

よしよし。

Webhook の Hash を作成する

次は https://docs.pixe.la/entry/post-webhook を参考に、 Webhook の Hash を作成します。

$ curl -X POST https://pixe.la/v1/users/chanyou/webhooks -H 'X-USER-TOKEN:thisissecret' -d '{"graphID":"kibela","type":"increment"}'
{"webhookHash":"<WebhookHashString>","message":"Success.","isSuccess":true}

Hash の値を使って Webhook URL を設定するので <WebhookHashString> を控えておきます。

Kibela で Outgoing Webhooks を設定する

設定の Outgoing Webhooks から、 Outgoing Webhook を追加します。

https://my.kibe.la/team/settings/outgoing_webhooks

Webhook として設定する URL は https://pixe.la/v1/users/<user>/webhooks/<WebhookHashString> となります。

f:id:chanyou0311:20210805155607p:plain:w400

テスト送信をして問題なければ、Webhook の表示名や対象記事などの設定をして完了です。

Kibela で Pixela のグラフを表示する

既に @a-know さんが iframe で埋め込む方法をまとめてくださっていたので、それに従っていきます。

草グラフを iframe タグで簡単に埋め込む(Pixela v1.12.1) - えいのうにっき

このタグを記事などに記入すれば DONE !!

<iframe src="https://pixe.la/v1/users/chanyou/graphs/kibela.html?mode=simple" height="155" width="720" frameborder="0"></iframe>

実際に表示するとこんな感じ。

mode パラメータを付与することで表示が切り替わる仕様で、 simple もしくは simple-short が指定できます。

Kibela のサイドバーだと simple-short のサイズがちょうどよかったです。

 <iframe src="https://pixe.la/v1/users/chanyou/graphs/kibela.html?mode=simple-short" height="200" frameborder="0"></iframe>

アクセスカウンタも試してみた

今回の Webhook による方法の他に、グラフ作成時のパラメータに、 selfSufficient を指定することで、グラフ表示時にカウントアップもしくはカウントダウンを行うこともできます。

$ curl -X POST https://pixe.la/v1/users/chanyou/graphs -H 'X-USER-TOKEN:thisissecret' -d '{"id":"kibela-pv","name":"Kibela PV","unit":"view","type":"int","color":"sora","timezone":"Asia/Tokyo,"selfSufficient":"increment"}'
{"message":"Success.","isSuccess":true}

今回は increment を指定して、表示の度にカウントアップするグラフを作成しました。

これを Kibela の自己紹介記事の末尾にグラフを埋め込むことで、いつどれくらい閲覧してもらったか、簡易的にわかるようになりました。

f:id:chanyou0311:20210805155143p:plain

すごーい手軽!

まとめ

初めて Pixela 使ってみたのですが、めちゃくちゃ簡単に使えました!

趣味でも使っていきたいと思います。

おわり。