Pixelaを使って生存記録をつけている

Pixelaというグッドなウェブサービスがある。

pixe.la

GitHubの草と同様のコントリビューショングラフを作れるサービス。ユーザ登録からグラフの作成、グラフに草を生やすまで全部cliで完結できていい。

基本的に草のグラフは日々の継続の可視化するために使われるはずで、どうやら世の中の人は筋トレ習慣とかを記録したりしているらしい。

PixelaはたしかリリースされてTwitterで話題になってるのを見てすぐ登録した。

生存記録をつけている

https://pixe.la/v1/users/hitonatsu/graphs/alive

僕は筋トレはグラフをつけるほど毎日ガチでやっていない。筋トレ記録のような毎日継続してかつ記録をつけたいことって案外ないなと思っていたのだけど、なにかないかと考えてたら唯一記録をつけたいものがあって、それが生存記録だった。

僕たちは毎日生きている以上この世に生をコントリビュートしているはずなので、これを記録していきたいと思ってつけている(なんで生存記録をつけるモチベーションがあるのかについては日記のほうに書いた)。

生存報告の仕組み

Pixelaの公式にiOS12のショートカット使うと便利かもって書いてあるので、マネしてショートカットを作って毎朝起きたら通知センターからボタンを押している。

f:id:hitonatsu:20181101163752p:plain
長くてごめん

PixelaへのPOST成功したらSiriになんかランダムで喋ってもらえるようにしている。もうちょいフレーズを足したいけどあんまり思いつかないのでいい感じの一日を生きていきましょうフレーズを募集しております。

ボタン押すのめんどくさいから「Hey,Siri. 生存」っていうと生存報告できるようにもしている。でもiOSのショートカットをSiri経由で頼むと、ボタン押すときよりもなぜか妙に時間がかかってしまう。だから現状は素朴にボタンを押す運用になってしまっている。改善されてほしい。

ホントはスマートウォッチとかフィットネスバンドで当日の何時に心拍数を検知したらiftttに飛ばして〜みたいなことをするのが1番なんだろうけど、自分はこの手のデバイスを持ってないのでできない…。この手のデバイス欲しいですねという感情はある。お金がない。

iOSショートカットはいまは正直トリガーが非常に不便で、【家の位置情報+充電中になったら】というような条件でトリガーできたらいいんだけど現状できない。Siriに頼むか素朴にボタン押すかしか現状作ったショートカットを発火できないのでこういった牧歌的な運用になってしまっている。

Webサイトにグラフを表示する

この生存状況グラフを日記のほうのブログのヘッダーに表示させている。これによって訪れた人が「筆者がまだ生きているのかそれとも故人のブログなのか」の判別ができるようにしている。

ただ表示させるまでに紆余曲折を経てしまった。

紆余曲折

PixelaはSVGでこのグラフを描画していてそれを提供してくれている。どうやってWebサイトに貼ろうかと思って、最初にFetchAPIで素朴に叩いてDOMに挿入しようとしたけど、当時はcorsの問題があってFetchできなかった(これはPixelaリリース当初で今はcorsでも取れるようになっている…GitHubのカンバンみて気づいた)

あと当時はcorsで引っかかったけど仮にそもそもfetchで取れてもSVGはレスポンシブにするのめんどくさいんだよな〜ってなっていた。とりあえずシュッとブログに貼ってみたかったので最初はHTMLのirameタグで牧歌的に貼り付けていた。iframeでSVGを描画すると中の<g>タグにアクセスできないからレスポンシブにできない(やろうと思えばできるけどダルい)のでPCでのみ表示させていた。

レスポンシブでSVGなら簡単に画像だよな〜ってことで画像で欲しかったから自分でFirebase Cloud FunctionsでPuppeteerを動かしてPixelaのSVG部分をキャプチャして、せっかくだからFirebase Storageで配信するかと思って途中まで手を動かしていた。

で、途中でなんとなくPixelaのカンバン覗いてみたらリリース当初より少しずつアップデートがされていて、ボヤ〜っと考えてたらふと『これもしかしてそもそも直接<img src="">で取れるんじゃない?』って思ってやったらできた。

PixelaのグラフAPI<body>タグなしで直接SVGを返してくれているのに気づいていなくて、こんな遠回りをしてしまった。普通に<img src="https://pixe.la/v1/users/hitonatsu/graphs/alive">で表示できてしまった。

そういう感じで今は<img>タグでめっちゃ普通にグラフ表示させて頂いている。

今はせっかくPuppeteer動かすのやってしまったから、使わないけど最後までコード書き上げるかどうかを悩んでいるところです。


wlが貼られています