pixelaアクセスカウンターウィジェット自作してこのhugoブログに設置
pixelaアクセスカウンターウィジェットを自作し、このhugoブログの各エントリーに設置してみました。
最高のアクセスカウンタソリューションができたとのことなので、早速設置してみました。
最高のアクセスカウンターソリューションができたよー！ - えいのうにっき
すみません釣りタイトルです。最高かどうかはわからないけどでもおもしろいと思うので、ぜひ試してみて欲しいです。 拙作の Pixelaで、比較的かんたんに、サイトのアクセスカウンター（PV数）を GitHub のグラフっぽいやつで設置できるようになったよーというエントリです。 どんなのが設置できるのよ、というと、↓こういうやつが設置できるようになります。 内容的には、 プログラマ …
そのまま貼ってもつまらないと思ったので、ちょっと(だいぶ?)ひねくれた感じで貼ってみました。
すなわち、総PV数を数字で表示するようにしてみました。
もはや草関係ない。
できたのはこんな感じです↓
https://t.co/asmvmsiHJS こういう、はてブボタンのチップ？みたいなやつ勝手に自作してみました！ JSでのスクレイピングなんでDOM変わるとぶっ壊れますが。 いいでしょ！ pic.twitter.com/Qklp7LwXr0
— 星野PRO (@hoppiestar) January 30, 2019
このエントリーのフッター(#)にも貼っております。
実装方針
pixelaの、ここの部分をスクレイピングします。
非同期アクセスはfetchAPI、スクレイピングはDOMParserを使いました。
怒られそうな使い方ですが、怒られるまで気にしないことにします。
ウィジェット
以下のコード片を作り、layouts/shortcodes配下に保存。今回は pixela_access_counter.html という名前にしました。
(JS部分はこの記事をかなり参考にしました。)
// pixela_access_counter
{{ $number := .Get 0 }}
// ..(snip)...
// ..svgやstyle要素を貼る...
// ..(snip)...
<script>
(() => {
const url = 'https://pixe.la/v1/users/{{$number}}.html';
const decoder = new TextDecoder();
const parser = new DOMParser();
let string = '';
fetch(url).then(response => response.body.getReader())
.then(reader => {
const readChunk = ({done, value}) => {
if(done) {
const doc = parser.parseFromString(string,'text/html');
document.getElementById('cnt').innerHTML = doc.querySelector('h5.text-success').innerText.match(/Total:\s*(\d+)\s*view/)[1];
return;
}
string += decoder.decode(value);
reader.read().then(readChunk);
};
reader.read().then(readChunk)
})
})();
</script>
各ポストからの呼び出し
こんな感じ。
{{ % pixela_access_counter "hoshinotsuyoshi/graphs/hblog-20160302-1" %}}
なお、エントリーを作るたびに都度pixela側にグラフを作る必要があります。
例:
$ curl -X POST https://pixe.la/v1/users/hoshinotsuyoshi/graphs \
-H "X-USER-TOKEN:${PIXELA_TOKEN}" \
-d '{"id":"hblog-20190202-1","name":"hblog-20190202-1","unit":"view(s)","type":"int","color":"shibafu","timezone":"Asia/Tokyo","selfSufficient":"increment"}'
✎まとめ
- 普通に、hugoブログでウィジェット作るやり方について、勉強になった。👽
