💨

Pixela をはじめよう

Pixela は REST風の Web API しか提供していませんが、そんなに難しくはありません。
あなたのマシンのコンソールから、Pixela の世界に飛び込んでみましょう!

1. ユーザーアカウントを作成する

Users API を HTTP POST でリクエストします。API ドキュメント
$ curl -X POST https://pixe.la/v1/users -d '{"token":"thisissecret", "username":"test-user-name", "agreeTermsOfService":"yes", "notMinor":"yes"}'
{"message":"Success. Let's visit https://pixe.la/@test-user-name , it is your profile page!","isSuccess":true}
Shell

2. グラフを作成する

Graphs API を HTTP POST でリクエストします。APIドキュメント
$ curl -X POST https://pixe.la/v1/users/test-user-name/graphs -H 'X-USER-TOKEN:thisissecret' -d '{"id":"my-first-graph","name":"My first graph","unit":"pages","type":"int","color":"shibafu","timezone":"Asia/Tokyo"}'
{"message":"Success.","isSuccess":true}
Shell

3. グラフを表示させてみる

https://pixe.la/v1/users/test-user-name/graphs/my-first-graph にブラウザでアクセスします。これは、Graphs API を HTTP GET でリクエストすることと同じです。
ブラウザで https://pixe.la/v1/users/test-user-name/graphs/my-first-graph を開いてみた様子。
ブラウザで https://pixe.la/v1/users/test-user-name/graphs/my-first-graph を開いてみた様子。
まだどの日付にも値が記録されていないグラフを作ることができました。

4. ある日に対して値を投稿する

Pixels API を HTTP POST でリクエストします。APIドキュメント
$ curl -X POST https://pixe.la/v1/users/test-user-name/graphs/my-first-graph -H 'X-USER-TOKEN:thisissecret'  -d '{"date":"20211212","quantity":"5"}'
{"message":"Success.","isSuccess":true}{"message":"Success.","isSuccess":true}
Shell

5. もう一度グラフを表示させてみる

それではもう一度 https://pixe.la/v1/users/test-user-name/graphs/my-first-graph にブラウザでアクセスしてみましょう。
もう一度ブラウザで https://pixe.la/v1/users/test-user-name/graphs/my-first-graph を開いてみた様子。
もう一度ブラウザで https://pixe.la/v1/users/test-user-name/graphs/my-first-graph を開いてみた様子。
Pixels API をリクエストする際に指定した日付の位置の Pixel の色が変化していることがわかりますね。

6. さらに詳細な情報を確認する

先程のURLに .html を付けてブラウザでアクセスしてみましょう。
ブラウザで https://pixe.la/v1/users/test-user-name/graphs/my-first-graph.html を開いてみた様子。
ブラウザで https://pixe.la/v1/users/test-user-name/graphs/my-first-graph.html を開いてみた様子。
すると、このグラフに関する様々な詳細情報を確認することができます。また、このページで表示されているグラフの各 Pixel にマウスカーソルを合わせると、ツールチップを表示させることもできます。
この小さなグラフは Retina と呼ばれるものです。
この小さなグラフは Retina と呼ばれるものです。