Pixelaを使ってはてなブログにPV数の草を生やしてみた

今回のエントリの内容はメモレベルです。

去年のMashupAwards2018で出た作品でFesta(最後のイベント)に参加したときに、githubのような感じででコミットの状態を出すサービスでPixelaというものがあるということを知りました。そのときはおもしろいなと思ってましたが、自分にはあんまり関係ないのかな~という感じでみていました。

ただ、少し前まで使用していた、ブログのPV数をTwitterでつぶやいてくれるサービスがうまく動作してない(多分https化したときに設定が変わったから?)という状況と、最近はTwitterのタイムラインを見る機会がそれほど多くなくなってきたということもあるので、別の手段でなんか見れないかなと思っていました。

んで、ググってみたところPixelaの作者さんのエントリーに当たりました。

pixe.la

blog.a-know.me

このやり方をそのまま進めれば問題ないのですが、設定していたところちょっと躓いたのでメモ。 上記の2つのエントリーを読んでについて書いています。

  1. ユーザの登録
  2. グラフデータの作成の仕方
  3. はてなブログへの貼付け方法

ただ、設定してブログに貼り付けたあとPV数の更新(カウントアップ)がされない状況になります。これだけではなにかが足りないような感じです。グラフの生成はされているので、外部にカウント機能を持った何かが必要なのかなと思っていたのですが、以下のエントリを読み込んでみてわかりました。

blog.a-know.me

ここで、これまでの Pixela を知っている人向けの説明として、今回のバージョンアップで selfSufficient というフィールドが指定できるようになっています。直訳すると自給自足。これはつまり、グラフが見られるごとに自分自身を加算(もしくは減算)していく、ということを指定するための属性になります。

グラフの生成時のJSON"selfSufficient":"increment"のフィールドを追加することでグラフへアクセスするたびにカウントできるということです。これを指定すれば問題は解決します。

ただサンプルにあるコマンド例がcurlのため、Windowsではかなり不安ですw。

そこで作者の方が別途作成されたpiというCLIツールを使用することにします。ここまでやると別途curlをインストールしてもいいんですけどね。

blog.a-know.me

まずはこちらからダウンロードします。 Windows処理系なのでリスト中からpi_v1.0.1_windows_amd64.zipを選んでダウンロードします。 Windows処理系なのでリスト中からpi_v1.0.2_windows_amd64.zipを選んでダウンロードします。 アーカイブを展開するとこんな感じになるので、テキトーな場所に展開します。

f:id:ueponx:20190421182625p:plain

実はこのままだとうまくいかないです。 実行ファイルのpiに拡張子がないので実行しようとしても失敗します。リネームしてpi.exeにします。 念の為githubで作者の方にissueを投げたところ、version 1.0.2にバージョンアップして対応していただきました。超感謝! これで準備完了です。

あとは事前に以下を決めておきます。

  • ユーザーネーム
  • アクセスに必要なAPIトーク
  • グラフ名(URLで使用)
  • グラフ名(人間識別用)

この実行ファイルはAPIトークンを環境変数で使用するのでユーザー登録をしたときのトークンは登録が成功したら環境変数PIXELA_USER_TOKENに登録しておきましょう。

今回は以下の様に決める前提としようと思います。

設定項目 設定値
ユーザーネーム hogepon
APIトーク fuga2019
グラフ名(URLで使用) hatena-pv
グラフ名(人間識別用) "HatenaPV graph"

これを使って実行していきます。

> pi users create --username hogepon --token fuga2019 --agree-terms-of-service yes --not-minor yes
> set PIXELA_USER_TOKEN=fuga2019
> pi graphs create -u hogepon -g hatena-pv -n "HatenaPV graph" -i view -t int -c shibafu -z "Asia/Tokyo" -s increment

f:id:ueponx:20190421143451p:plain

piコマンドは成功すると以下の様なJSONが帰ってくるので判断に使用します。

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

上記のコマンドが成功すると以下のURLでグラフの状況を見ることができます。 ユーザー名、グラフ名が自分のものになっているかを確認しましょう!

https://pixe.la/v1/users/hogepon/graphs/hatena-pv.html

f:id:ueponx:20190421143749p:plain

これでOKです。

リロードするとちゃんとカウントアップできました。

f:id:ueponx:20190421144231p:plain

あとは

blog.a-know.me

上記のブログ通りに設定すれば問題ありません。あとは引っかかるところはほとんどありませんが、 テストで使用しているURLは作者さんのページなので自分のグラフのURLに書き換えましょう。

おわりに

今回はちょっと引っかかった部分があったのでやってみましたが、REST API経由でこういうグラフが出せるのは便利かも。あとカウンタの値がページ描画完了してからのカウントになっているのではてなブログのアクセスカウンターよりも少なく表示されています。多分、ちゃんとページロードが走った部分だけがカウントされているからだと推測。はてなさんのアクセス数はGoogleさんのBots経由のアクセスも含まれているのかもしれませんね。

以下が設定して配置した結果です。

f:id:ueponx:20190421145502p:plain

これからの草生え具合を楽しみにします。

/* -----codeの行番号----- */