pixelaというAPIサービスがあったことは知ってるのですが、Windows環境でどうやればいいかというところで特に何もせずでした。
ところが、2019年2月のa-knowさんの記事“草APIサービス” Pixela のコマンドラインツールを作ったので、OSごとのインストール・使い方を書きます！で、Windowsでもできまっせということなので、この記事を見つつ、同時にScrapbox への更新がどれくらい活発におこなわれているかを Pixela で可視化するも見つけたので、どうせやるなら、Scrapboxを使っているところで楽しそうなことをやるかということで、タイトルの通りです。
Windows環境でpixelaで遊びたい（草を生やしたい）人向けに参考になれば幸いです。
環境構築
１．Windows環境で使うpiソフトをダウンロードする
２．pi_v1.0.0_windows_amd64.zipファイルを展開する
展開自体はWindows10でファイルを全て展開するとかやればオッケーです。
３．展開したファイルをパスの通ったフォルダにコピーする（または指定したフォルダでパスを通す）
これが一番分かりづらいかと思いますが、そもそもこのpixelaというサービスが開発者や技術者、つまりプログラミングをナリワイとする人向けのものですから、ダウンロードやzipファイル展開はいけても、このパスを通すは意味が分からない人も多いと思います。
以下のサイトなど参考にしてみてください。
「PATH を通す」の意味をできるだけわかりやすく説明する試み
など分かりやすくていいかと思います。
ここまで出来たらコマンドプロンプトでの作業がメインです。piソフトということですね。これもですが、コマンドプロンプトで何か打ち込んでやるとかが怖すぎて出来ない人はここで諦めてください（笑）
コマンドプロンプト
環境構築したら次はコマンドプロンプトで実際にpiソフトを動かして草を生やす準備をします。
１．コマンドプロンプトを起動する
- キーボードの「Windowsキー」＋Rを押したあとに「cmd」と入れて実行する。
- それかタスクバーのWindowsアイコンを押して「コマンドプロンプト」で検索してプログラム実行する。
２．ユーザートークンを設定する
set PIXELA_USER_TOKEN=thisissecretthisissecretに自分のパスワードをいれる。コマンドプロンプト再起動でセットする必要あり。セットされてなくて、コマンドを入れると、エラーとして、
Failed to generate create api request : token is not set. please specify your token by PIXELA_USER_TOKEN environment variableと出来ますので注意してください。
３．ユーザーを作成する
pi users create --username ユーザー名 --token thisissecret --agree-terms-of-service yes --not-minor yesthisissecretは先程自分で設定したものを入れます。ユーザー名と書かれたところを好きな名前にしてください。半角英数ですね。
４．グラフを作成する
pi graphs create -u ユーザー名 -g グラフID -n <グラフ名称> -i pages -t int -c shibafu -z <Asia/Tokyo>ユーザー名、グラフID、グラフ名称を入れて上のコマンドを入れてください。pagesもお好きなものでオッケーです。このあたりは問題なくいけるはずです。成功すると、
{"message":"Success.isSuccess":true}とでてきます。
このあたり、エスケープシーケンスしてでてたので修正してみましたので微妙に違ってたらごめんなさい。
５．ブラウザでグラフを確認してみる
既にこの時点でグラフで値が入ってないですが閲覧出来ます。
グラフ自体のURLは、
https://pixe.la/v1/users/ユーザー名/graphs/グラフID.html
となっている。ユーザー名とグラフIDは先程指定したものを入れる。
僕ならこんな感じになりましたということですね。これを見ても面白くもないのであなたのユーザー名とグラフIDでみてくださいね。
おまけ
piからももちろん取得出来ます。
pi graphs detail -g scrapboxとやれば、上のURLが取得出来ます。
ただし、PIXELA_USER_NAMEをsetしておく必要がある。これもsetしないとエラーが出る。
エラーは、
username not specified. Please specify username by command line option or PIXELA_USER_NAME environment variablesこんな感じでした。
以上がコマンドプロンプトでグラフ作成までいきました。あと値をどうセットするかは、直接日付を入れて打ち込むことも出来ますが、Scrapboxでメモを作ったらピクセルの色を塗るのが今回の狙いなので、次へこのまま進みます。
Scrapboxと連携する
１．piでWebhookトークンを作成する
pi webhooks create -g scrapbox -t increment |
webhooksコマンドというのがあるのでこれでscrapboxというグラフIDのWebhookトークンが作成出来ます。
このコマンドが成功すると、
{"message":"Success.","isSuccess":true,"webhookHash":"webhookhashの値} |
とでてきます。最後のWebhookshashの値とはランダムな文字列みたいなものです。この値を次で使います。
２．ScrapboxのSetting＞Notificationsで設定する
画面にあるAdd slack notificationを押す。
テキストボックスでURL欄が出てくるのでそこに、上でコピーしたWebhookトークンの値を組み合わせたものを使います。
https://pixe.la/v1/users/readmaster/webhooks/Webhookトークンの値
みたいな感じです。これを貼り付けましょう。そしてAddボタンを押せばオッケーです。
３．Scrapboxに最後に書き込んだら９０秒経過して通知
Scrapboxに新規メモを書いて９０秒くらい経ってから先程のグラフを見てみましょう。
でしたね。どうですか？Scrapboxメモすると「草が生える」体験をしましたね。これであなたも草仲間ですｗ
以上が、pixelaとScrapboxの連携でした。
Scrapboxとpixelaを連携するとどうなるか？
何かもらえるとかそういうことではないです（笑）単にモチベアップとかですかね。僕は好きです。
Scrapboxをわりと使う人だとメモの可視化になる
どれくらいメモ書いたかが見えてモチベになるし楽しいって感じです。この感覚が分からない人にはこの連携の価値はむしろマイナスかも（笑）
記録して見える化っていいよねがないと辛いですね。ちなみに、僕はScrapboxのページ数が執筆時点で775pagesです。量が多いとかそういうことはおいておいて、よく使ってます。
手動で計算しなくていいのが楽
そもそも手動でScrapboxメモ数を記録してなかったですし、しようと思ったことはないのですがとはいえ一つのバロメーターになります。むしろ、設定してしまえば、あとは自動的にScrapboxとPixelaがやってくれるので、グラフを見てニヤニヤしたり画像(svg）を貼り付けて1年に1回とか月1回振り返るときに使えそうです。
この振り返り自体はわりとやるのでいいなあと思いました。逆に振り返らない人は価値が低いですね。
自動化しつつキレイな草になるか、知らないですがそこが面白いところです。
途中でつまずいたところ→解決メモ
curlコマンドとか分からないのでcurlで書かれているのをpiで変換する必要がある
実際には深呼吸して、piフォルダにあるREADME.mdというテキストを読めば分かるのですが、慣れてないとこういうのもやれなかったりしますよね。
例えば、webhookの作成では、PixelaのAPI Documentでは、
となっているのですが、この説明を見て一発で分かる人はそもそもこの記事を読んでないと思うのですが、Exampleの例はcurlの話になっていますよね。
例：$ curl -X POST https://pixe.la/v1/users/a-know/webhooks -H 'X-USER-TOKEN:thisissecret' -d '{"graphID":"test-graph","type":"increment"} |
これをpiで置き換えたのは先程書いたように、
pi webhooks create -g scrapbox -t increment |
となるということですね。
つまり、PIXELA_USER_TOKENをsetしておいて、 -g はグラフID、-tはtypeで増やす（インクリメント）か減らす（デクリメント）を選べるということです。curlの理解がなくても、pi自体のコマンドイメージをREADME.mdを読んで理解できないと辛そうというところです。
くどいですが、エンジニア向けということですね。
Scrapboxの設定でSlackURLとかあるけどいいの？
これは問題なしです。
a-knowさんの説明記事にもあるのだけど、Scrapbox公式ヘルプで
[/help-jp/Slackに更新を通知する]にSlack以外でも使えると明記あり。なので、使える。slackって文字は見えるのは気になるけどスルーでオッケーということです。
コマンドライン上でのヘルプももちろんある
これはpiソフトの話です。
慣れてくるとコマンドライン上でヘルプみたい気がする。コマンドとか覚えるとかでもないので。
pi
と入れれば、
Please specify one command of: graphs, pixel, users, version or webhook |
この５つのコマンドが使えることが分かる。
pi version |
pi version: 1.1.0 (rev: 95c621a) |
と出てくる。そもそもこれが出てこないとpiがうまくパスが通ってないことになる。
ヘルプが欲しいなら、 -hなり/?なりをつければヘルプメッセージが出ます。graphコマンドのヘルプが欲しいなら
pi graph -h |
で出てきます。piはメインコマンドとサブコマンドで成り立っているという感じもよく分かりますね。
当然外でも応用出来る
Webhookを使えば手軽にカウント出来ることが分かりました。
WordPresssの投稿記事公開で草生やす
例えばWordpressの記事を公開したら草を生やすことができそうです。これも設定すれば後は勝手にやってくれるので可視化グラフが勝手にできるので面白いですよね。
少し調べたら、WP Webhooksというプラグインを使えば出来そうです。試してみたら無事出来たのでこれもまたメモアップします。めちゃくちゃ難しいわけでもないのでっすが、実際にはSendDataにWebhookトークンを入れて、細かいSettingで公開済みとかだけにするとか設定すればいけるはずです。参考までに空色グラフで作ってみました。
iframeタグでこんな感じで埋め込むのも簡単にできます。たまに使うかもしれませんね。草グラフを iframe タグで簡単に埋め込む（Pixela v1.12.1）で説明があります。
シゴクリブログ更新状況
iPhone使って任意の行動で草生やす
iPhoneでもiOSのショートカット機能でいけるっぽいです。自分が普段していることをカウントしたいのであれば面白い仕掛けですよね。こちらの記事など参考にしてみてください。pixelaを使ってScrapboxに草を生やした
ショートカットはあまり使ってないのでまたこれもメモ起こしたいと思います。
Windowsで草生やしたい人の参考になれば幸いです。
