こういうのを作りました
発端
社内のナレッジ共有ツールとして Kibela を導入することになりました。
Kibela の API で記事の投稿状況をいい感じに可視化できると、利用者の執筆モチベーションにつながっていいなと思っていました。
Kibela のアクティブ具合を Pixela で可視化する的なことがしたい、できそう
— ちゃんゆー (@chanyou0311) August 2, 2021
なんてことをつぶやいていると、
調べてみました!https://t.co/meTVfFtW6Z の「サポート対象サービス以外に通知する方法」でできそうですね!
— a-know | Daisuke Inoue (@a_know) August 2, 2021
Pixela 側での作業は https://t.co/YgjL34qmQC ですね!😊
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>
となります。
テスト送信をして問題なければ、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 の自己紹介記事の末尾にグラフを埋め込むことで、いつどれくらい閲覧してもらったか、簡易的にわかるようになりました。
すごーい手軽!
まとめ
初めて Pixela 使ってみたのですが、めちゃくちゃ簡単に使えました!
趣味でも使っていきたいと思います。
おわり。