くりにっき

フルスタックキュアエンジニアです

Pixelaでesaのkusaを生やす

esa Pixela

esaとkusa（草）の語感が似ていたのでやってみました (\( ⁰⊖⁰)/)

やり方

Pixela の設定

以下は拙作の pixela gemを使っていますが、他言語の場合は適当に置き換えてください

require "pixela"

client = Pixela::Client.new(username: "YOUR_NAME", token: "YOUR_TOKEN")

# Pixelaにユーザ登録していないなら登録する
client.create_user(agree_terms_of_service: true, not_minor: true)

# グラフを作成する
# colorはshibafu, momiji, sora, ichou, ajisai, kuroのいずれかを選択
# c.f. https://docs.pixe.la/#/post-graph
client.create_graph(graph_id: "esa", name: "esa activity", unit: "kusa", type: "int", color: "shibafu", timezone: "Asia/Tokyo")

# webhookを作成
client.create_webhook(graph_id: "esa", type: "increment")
#=> #<Hashie::Mash isSuccess=true message="Success." webhookHash="XXXXXXXXXXXXXXXX">

create_webhook の戻り値で返ってくる webhookHash は後で使うので忘れないようにしてください

esa の設定

Ownerアカウントで「チーム情報 -> Webhook・アプリ連携」よりGeneric Webhookを登録

f:id:sue445:20181206001624p:plain

URLは https://pixe.la/v1/users/【ユーザ名】/webhooks/【webhookHash】 の形式

チェックボックスはお好みで。

実際のグラフ

https://pixe.la/v1/users/【ユーザ名】/graphs/【グラフID】がsvg、 https://pixe.la/v1/users/【ユーザ名】/graphs/【グラフID】.html がhtmlのURLです。

esaに埋め込む方法

こんな感じ

[![esa activity](https://pixe.la/v1/users/【ユーザ名】/graphs/【グラフID】)](https://pixe.la/v1/users/【ユーザ名】/graphs/【グラフID】.html)

サンプル

## esa activity
[![esa activity](https://pixe.la/v1/users/sue445/graphs/esa)](https://pixe.la/v1/users/sue445/graphs/esa.html)

で埋め込んだ図が下記です。READMEに埋め込んでおくと分かりやすいでしょう。

f:id:sue445:20181206000114p:plain

注意点

esaはログインしないと見れませんが、Pixelaのグラフ（草）はログイン無しで見れてしまいます。

そのため、もしPixelaのグラフを作る場合はURLを第三者に知られないようにし、リスク（esaのactivityがpublicになる）を認識して利用してください。