Pixela, Record and Track your habits or effort. All by API. Pixela is the Pixelation API service. With this service, you can get a GitHub like graph that expresses the degree of your daily various activities on a basis with a vivid gradation. This document is an introduction to Pixela. Used in builderscon 2019 https://builderscon.io/tokyo/2019 .

1. How to use Pixela
〜 Basic 〜

2. Create your first graph
1. Create your user.
2. Create your graph.
3. Take a look at the graph. Open https://pixe.la/v1/users/a-know/graphs/test-graph
in your browser. This is SVG format.
🎉
API docs QR

3. Post your first value
1. Post a value.
2. Take a look at the graph. Open https://pixe.la/v1/users/a-know/graphs/test-graph
in your browser.
API docs QR
🎉

4. Get small graph
1. Open https://pixe.la/v1/users/a-know/graphs/test-graph?mode=short in your browser.
API docs QR
🎉

5. Get past period graph
1. Open https://pixe.la/v1/users/a-know/graphs/test-graph?date=20190331 in your
browser.
API docs QR
🎉

6. 1. Open https://pixe.la/v1/users/a-know/graphs/test-graph?mode=line in your browser.
Other example:
Get a line graph
API docs QR
🎉

7. View a graph detail
1. Open https://pixe.la/v1/users/a-know/graphs/test-graph.html in your browser.
API docs QR
🎉

8. Get a graph stats
1. GET request to /stats endpoint.
2. Get results.
API docs QR
🎉

9. Change the color-schema or timezone, etc. of the graph
1. PUT request to /graphs/<graphID> endpoint.
2. View a graph detail page.
API docs QR
🎉

10. Change user-token
1. PUT request to /users/<username> endpoint.
2. Confirm the user-token has been changed.
API docs QR
🎉

11. Delete a pixel, graph, and user
1. DELETE request to /<graphID>/<yyyyMMdd> endpoint.
2. DELETE request to /graphs/<graphID> endpoint.
3. DELETE request to /users/<username> endpoint.
API docs QR
🎉

12. How to use Pixela
〜 Advanced 〜

13. List registered graphs
1. Open https://pixe.la/v1/users/a-know/graphs.html in your browser.
API docs QR
🎉

14. Make it private in the registered graph list（★）
1. Updates the graph `isSecret` property.
2. After that, the graph will disappear when you open the registered graph list.
API docs QR
★ This feature is exclusive to Pixela Supporter. For more details, see the“Become a Pixela supporter and use
limited features”page.

15. Link with iOS 12“Shortcuts”(Increase or decrease the value by request)
1. Create a shortcut like the following.
API docs QR
2. Tap the shortcut.
🎉

16. Use without specifying X-USER-TOKEN in the request header
Ø Use Pixela Webhook. Create a webhook;
Get webhook list;
Invoke a webhook;
API docs QR

17. Easy to use Pixela with official command line tools, `pi`
Ø Pixela has an official command line tool, `pi` .
If you use macOS and homebrew, installing is easy.
Set the environment variable, PIXELA_USER_TOKEN.
This is all you need. For details, run `pi -h` .

18. Pixela Useful Examples
〜 from Pixela breeders
https://github.com/a-know/Pixela/wiki/Useful-case-examples

19. Post with Slack
Ø [In Japanese] Pixela をSlackにつないで遊んでみた
Ø https://daisuki.nichiyoubi.land/entry/2018/10/16/134123
Ø This example is SlackBot that performs API Post for Pixela.

20. Link with Mackerel
Ø [In Japanese]サービスのアラート発生状況をMackerelとPixelaで
（ゆるふわに）可視化する
Ø https://blog.a-know.me/entry/2018/10/25/095630
Ø Mackerel（mackerel.io）is server-monitoring SaaS.
Ø Alerts determined by Mackerel can be notified to the outside via Webhook. This is an
example of visualizing the alert occurrence status by linking with Pixela webhook.

21. Link with Backlog
Ø [In Japanese] Backlogのダッシュボードに草を生やす
Ø https://inet-engineer.hatenablog.com/entry/2018/12/05/100000
Ø Backlog（backlog.com）is project management SaaS.
Ø This is an example of visualizing the frequency of open/update issue or wiki page in
Backlog.

22. Link with esa
Ø [In Japanese] Pixelaでesaのkusaを生やす
Ø https://sue445.hatenablog.com/entry/2018/12/06/111927
Ø esa（esa.io）is document sharing service.
Ø This is an example of visualizing the activity on esa.io.

23. Embed in Hatena Blog and enable tooltips
Ø [In Japanese]はてなブログに Pixela グラフを埋め込んで、さらに
ツールチップを表示させる方法
Ø https://blog.a-know.me/entry/2018/11/20/220257
Ø Hatena Blog（hatenablog.com）is blog platform service.
Ø This is an example of embedding a graph in a blog with tooltips available.

24. Embed a graph at any place using iframe tags with tooltips available
Ø [In Japanese]草グラフを iframe タグで簡単に埋め込む
Ø https://blog.a-know.me/entry/2019/06/16/210915
Ø This is an example of embed a graph using iframe tags. Tooltips are available!

25. Use Pixela as a page view counter
Ø [In Japanese]最高のアクセスカウンターソリューションができたよー！
Ø https://blog.a-know.me/entry/2019/01/30/225550
Ø This is an example of using it as a page view counter by using the function to
increment the value of the graph each time the graph is displayed.

26. Visualize the number of Vim activations
Ø mattn/vim-pixela
Øhttps://github.com/mattn/vim-pixela
https://twitter.com/mattn_jp/status/1056782610205048832

27. Link with GitHub Actions
Ø [In Japanese] Pull RequestがきたらGitHub Actions経由でPixela
に草を生やす
Ø http://ryosms.livedoor.blog/archives/9272516.html
Ø GitHub Actions is GitHub workflow automation service.
Ø This is an example of visualizing the activity on GitHub.

28. Register optional data and make it visible on the graph
Ø [In Japanese] Pixela v1.12.0 から可能になった機能で、草グラフ
に付加情報を表示させる
Ø https://blog.a-know.me/entry/2019/06/02/215237
Ø This is an example of posting optional data along with values so that you can see
them on a graph.
★ This feature is exclusive to Pixela Supporter. For more details, see the“Become a Pixela supporter and use
limited features”page.

29. Link with Travis CI
Ø [In Japanese] Travis CIのビルド終了後にPixelaで草を生やす
Ø https://sue445.hatenablog.com/entry/2019/02/18/235444
Ø Travis CI（travis-ci.org）is continuous integration service.
Ø This is an example of visualizing the CI running activity on Travis CI.

30. Learn useful examples from“Pixela breeders”
Ø“Pixela breeders”are people who create and publish examples
and libraries using Pixela.
Ø Their output is summarized on the GitHub Wiki below. You can use Pixela based on what
is written on the Wiki.
Ø https://github.com/a-know/Pixela/wiki/Useful-case-examples
Ø https://github.com/a-know/Pixela/wiki/Third-Party-Libraries

31. Appendix

32. Become a Pixela breeder and get exclusive novelty goods
Ø“Pixela breeders”are people who create and publish examples
and libraries using Pixela.
Ø If you have developed a third party library for Pixela or
published a useful case on a blog, please contact @a_know .
Ø I will post it on the wiki and present limited novelty goods.
Please check the following URL for details.
Ø https://blog.a-know.me/entry/2019/01/20/103046

33. Become a“Pixela supporter”and use limited features
Ø Pixela accepts supports using Patreon (patreon.com).
“Pixela supporter”is a patron who provided support.
Ø If you become patron, Patreon will send you a registration code.
By setting this to the `Thanks Code` property of Pixela user, you can
use some limited functions. Please check the following URL for details.
Ø https://github.com/a-know/Pixela/wiki/Patreon-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-
Pixela-
%E3%82%92%E6%94%AF%E6%8F%B4%E3%81%99%E3%82%8B%EF%BC%8F%E9%99%90%E5%AE%9A%E6%A9%9F%E8%
83%BD%E3%82%92%E4%BD%BF%E3%81%86

34. Buy Pixela goods
Ø You can purchase various goods of Pixela with a service `SUZURI` .
Ø https://suzuri.jp/pixela
Ø Sales profits are used as operating expenses for Pixela.

35. Catch up update information
Ø Information about Pixela updates is available as GitHub Releases.
Ø https://github.com/a-know/Pixela/releases
Ø Watch the Pixela GitHub repository to receive updates.

36. Understand current development status
Ø The development status of Pixela is published on GitHub Projects.
Ø https://github.com/a-know/Pixela/projects/1

37. Report bugs or request features
Ø Pixela GitHub Repository is open to issues.
Ø https://github.com/a-know/Pixela/issues
Ø Please let me know in the issue what you think is strange to use and requests for new
features. There is a corresponding result so far.
Ø Please write in English when you open an issue. I don't care if your English is good,
so feel free to report it.

38. About third-party libraries
Ø Many third-party libraries have been developed thanks to many Pixela
breeders.
Ø A list of third-party libraries can be found on Pixela's
GitHub Repository Wiki.
Ø https://github.com/a-know/Pixela/wiki/Third-Party-Libraries
Ø Use these to easily incorporate Pixela into your application.

39. You can download this document from the following URL.
https://bit.ly/pixela2019doc
by a-know（@a_know / a-know）