pixe.laで読書ログを作ってみた

技術

んんwww草を禁じえませんなwwww (二回目)

芝生が欲しい

ぼくはプログラミング以外にも、合唱や記号論、教育心理学を学んでいる。 それらのモチベーションを保つため、プログラミング以外の趣味でもGitHubの草にあたるものを生やせればなと思っていた。

そこで pixe.la である。

3596fc48-5ec5-49c9-bc17-2088679843fe.png

Pixela | あなたの頑張りや継続を記録し、育てたい。そのすべてを、APIで。

自分の好きな数、好きな目的ごとにHeatmapを作れる、まさになサービスだ。

今回はこれで草を生やしていこうと思う。

やっていく

ともかくやってみる。 ドキュメント を見ながら curl をポチポチ叩いていく。

1fd80dbf-3833-4b32-b9b8-5500227229b5.png

usagiga/reading-log | Pixela

数回curlを叩いたらグラフができた。

これは読書ログの想定なので、あとは本を読んだときに /increment とかのAPIを叩くだけだ。読んで字のごとく、いつか野となり山となるだろう。

Google Forms & GASでいい感じに草を生やす

せっかくなので、読書ログらしく何を読んで何を理解したのかの記録と一緒に草を生やしてみる。

d9918af9-d51f-4be8-b6fa-6dc67d03f419.png

ということでGoogleフォームでそのようにフォームを作る。

当然ながらこのままでは pixe.la で草は生えない。そこで、GASを使ってフォームの送信時に以下のような関数を走らせ、グラフにピクセルを送るようにする。

function onSendForm(ev) {
  // Setting up here!
  const userName = "usagiga";
  const graphID = "reading-log";
  const accessToken = "xxxxx";
  // ////////////////
  
  const opts = {
    "method": "put",
    "headers": {
      "X-USER-TOKEN": accessToken,
    },
  };
  
  UrlFetchApp.fetch(`https://pixe.la/v1/users/${userName}/graphs/${graphID}/increment`, opts);
}

ちょっと挙動が想定と違い、いくらかハマった。

  • POST /users/USERNAME/graphs/GRAPH_ID は日付がUniqueなUpsertなので、メタデータを送る場合は上書きで消し飛ばないよう注意
  • PUT /users/USERNAME/graphs/GRAPH_ID/increment もUpsertなので、先にRowを作っておかなくても普通に動く
  • Content-Length:0UrlFetchApp で指定すると怒られる(GAS側が勝手にやるので書かなくていい)
  • Webhookを作れるAPIがあり、それを使えばIFTTTのような制限のある環境でもいい感じにできる

気をつけよう。

ともかくこれで設定は完了だ。 読書をしたらフォームを開いて

ac3d77e5-fba7-43d8-9d5a-b8b6ca99b238.png

送信すると

d9c7111d-4274-4da5-a921-26e13efc361a.png

草が生える。

2時間くらいでできた。 そのほとんどはGASのコーディングとデバッグで、pixe.la の設定自体は10分くらいだったと思う。

やってみて

特筆すべきこととして、pixe.la は作りこみがすごい。 APIのエラーメッセージが明確だし、バリデーションのルールまで公開されているので、そのへんのAPIなんかよりも開発がしやすいなと感じた。また、 Twitterでも書いた が個人のプロダクトなのにブランディングがしっかりしていてすごい(なんと Suzuri まである)。 こうした姿勢は今後の開発で参考にしていきたいと思う。

また、今回の実装にあたりGASをはじめて触ったが、こちらもよかった。 fetch APIが同期になってるくらいで、普通にJSを書いたら動く。補完がないしフォーマットもどうやるのか知らないが、まあワンオフでサっと書く分にはそこまで問題にもならない。

(2020/08/29 追記)

いくつかバグがあったので、記事も修正した。 その過程で気付いたのだが、今回の要件はWebhook APIを駆使すればIFTTT経由でサクっと同じことができる。 作例と同じことをするならぶっちゃけGASを使わないほうがいい。

ただ、GAS自体はGoogle(とそのOfficeスイート)という超大型巨人の肩に乗れるので、キッカケがなくて未だに触っていないなら試す価値はある。 「ふーん、おもしれー オモチャ……」となること請け合いである。