Pixela on 高木のブログ

Gatsby製のブログにPixelaグラフをツールチップ付きで表示する

Tue, 19 Oct 2021 00:00:00 +0000

Pixelaグラフをツールチップ付きで表示する方法を見つけたので、さっそくブログ下部に表示させてみた
今までもSVG画像では表示させていて、ツールチップ付きで表示できたらいいなと思っていたところだった

草グラフを iframe タグで簡単に埋め込む（Pixela v1.12.1） - えいのうにっき

<iframe src="https://pixe.la/v1/users/a-know/graphs/test-graph.html?mode=simple" height="155" width="720" frameborder="0"></iframe>

手順 🔗

コンポーネントの作成 🔗

import React from "react"

const PixelaGraph = () => {
  const userName = "takagi"
  const graphId = "task-durations"

  return (
    <div className="pixela-graph">
      <iframe src={`https://pixe.la/v1/users/${userName}/graphs/${graphId}.html?mode=simple`} title="pixela-graph" frameborder="0"></iframe>
    </div>
  )
}

export default PixelaGraph

スタイルの定義 🔗

レスポンシブに対応するため

.pixela-graph {
  position: relative;
  padding-bottom: 23%;
  height: 0;
  overflow: hidden;
}

.pixela-graph iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

padding-bottom: 23%; はアスペクト比
横720：縦155（1：0.2153）
正確には21.53%だけど、横幅を狭くするとズレが発生したのでいろいろ試して23%にした

作成したコンポーネントの読み込み 🔗

 import React from "react"
 import { Link } from "gatsby"

+import PixelaGraph from "../components/pixela-graph"
 import { rhythm } from "../utils/typography"

 const Layout = ({ location, title, children }) => {
@@ -61,7 +61,7 @@ const Layout = ({ location, title, children }) => {
       <header>{header}</header>
       <main>
         {children}
+        <PixelaGraph />
       </main>
       <footer>
         © {new Date().getFullYear()}, Built with

確認 🔗

マウスオーバーでちゃんとツールチップも表示された！

追記 🔗

サーチコンソールでモバイルユーザビリティのエラーが出てしまった（「クリック可能な要素同士が近すぎます」）

対応策として画面サイズが小さい場合は、今まで通りSVG画像を表示する

return (
  <div className="pixela-graph">
    {
      window.innerWidth < 500 ? (
        <img src={`https://pixe.la/v1/users/${username}/graphs/${graphId}`} alt="pixela-graph"/>
      ) : (
        <iframe src={`https://pixe.la/v1/users/${username}/graphs/${graphId}.html?mode=simple`} title="pixela-graph" frameborder="0"></iframe>
      )
    }
  </div>
)

雑に書くとこんな感じ？

参考 🔗

iframeで埋め込むときのレスポンシブ対応について - naeco.jp

PixelaをActiveRecordのように使う試み

Mon, 05 Apr 2021 00:00:00 +0000

※下書きにずっと放置してあって、記事も実装も中途半端な状態だけど一旦公開しておく 🔗

Pixela の利用シーンの例として「“日"系列データベース」があったので、その使い方でやるとしたらどうやるか試してみた話。
ActiveRecordみたいに使えたらいいなと思ったのでサクッと作ってみた。

最初に言い訳として雑に作ってある。
とりあえず、findとwhereだけ実装した。
createは力尽きたので断念。

require 'pixela'

class PixelaRecord
  attr_accessor :date, :quantity

  def initialize(date:, quantity:)
    @date = date
    @quantity = quantity.to_i
  end

  class << self
    def find(date = Date.today)
      response = client.get_pixel(graph_id: graph_id, date: date)
      new(date: date, quantity: response.quantity)
    end

    def where(from: nil, to: nil)
      dates = client.get_pixel_dates(graph_id: graph_id, from: from, to: to)
      dates.map do |date|
        response = client.get_pixel(graph_id: graph_id, date: date)
        new(date: date, quantity: response.quantity)
      end
    end

    private

    def client
      @client = Pixela::Client.new(username: 'takagi', token: 'hogehoge')
    end

    def graph_id
      self.name.downcase
    end
  end
end

class Distance < PixelaRecord
end

distance = Distance.find(Date.today)
puts "#{distance.date}: #{distance.quantity}km"
#=> 2020-11-21: 1km

distances = Distance.where(from: Date.parse('2020-10-01'), to: Date.parse('2020-10-31'))
distances.each do |distance|
  puts "#{distance.date}: #{distance.quantity}km"
end
#=> 2020-10-01: 56km
#=> 2020-10-02: 67km
#=> 2020-10-03: 72km
#=> 2020-10-04: 40km
#=> 2020-10-05: 14km
#=> 2020-10-06: 37km
#=> 2020-10-07: 82km
#=> 2020-10-08: 100km
#=> 2020-10-09: 58km
#=> 2020-10-10: 71km
#=> 2020-10-11: 77km
#=> 2020-10-12: 3km
#=> 2020-10-13: 4km
#=> 2020-10-14: 44km
#=> 2020-10-15: 80km
#=> 2020-10-16: 2km
#=> 2020-10-17: 10km
#=> 2020-10-18: 64km
#=> 2020-10-19: 15km
#=> 2020-10-20: 10km
#=> 2020-10-21: 51km
#=> 2020-10-22: 74km
#=> 2020-10-23: 3km
#=> 2020-10-24: 67km
#=> 2020-10-25: 38km
#=> 2020-10-26: 41km
#=> 2020-10-27: 19km
#=> 2020-10-28: 65km
#=> 2020-10-29: 46km
#=> 2020-10-30: 74km
#=> 2020-10-31: 94km

感想 🔗

N+1問題が発生している
API制限があるのかわからないが、なかったとしてもあまりよろしくないと思う。

備考 🔗

先にグラフは作成しておく。

$ curl -X POST https://pixe.la/v1/users/takagi/graphs -H 'X-USER-TOKEN:xxxx' -d '{"id":"distance","name":" 走行距離","unit":"km","type":"float","color":"sora","timezone":"Asia/Tokyo"}'
{"message":"Success.","isSuccess":true}

【Pixela】グラフのバックアップを取るスクリプト

Thu, 04 Feb 2021 00:00:00 +0000

以前ブログに書いとおり、Togglで記録した作業時間をPixelaで可視化している。
昨年の7月くらいから毎日続けることができて、可処分時間を無駄にしないで済んでいるのは間違いなくPixelaのおかげである。

今回は、うっかり操作ミスなどをしてグラフのデータがおかしくなってしまったら辛いので、そうなる前にバックアップを取ることにした。

※ちなみに今回の場合はTogglに元データはあるので復元は可能である。ただバックアップをやってみたかっただけ。

完成品 🔗

実行 🔗

ちゃんとした実行方法は、README.md を参照

$ bundle exec ruby app.rb task-durations td-backup
195/195

結果 🔗

グラフID以外全く同じのグラフを作ることができた。

オリジナルのグラフ 🔗

バックアップしてできたグラフ 🔗

振り返り 🔗

copy_graphメソッドで既にグラフがあった場合など、エラーになるがrescueで握りつぶした
もちろん良くはないけど、使い捨て予定だったスクリプトにしては全体的にちゃんと書いた方だと思うので良しとする
- app.rb:5
進捗がわかるように何ピクセル中何ピクセルまで終わったかプログレス？的なのを入れてみた
- app.rb:41
1ピクセルごとAPIを叩くことになるので、1秒のスリープを入れた。（ドキュメントに制限のルールは見つからなかったけど念の為）
1ピクセルに付き最低1秒はかかってしまうので一気に送れたら時間短縮できて良いのになと思った
- app.rb:46
バックアップのグラフIDを本当は「task-durations-backup」にしたかったけど、16文字の制限があったっぽい
もう少し緩めにしてほしい。。。
- Validation rule: ^[a-z][a-z0-9-]{1,16} (Document )
最近追加されたエンドポイントを早速使う時がきた
Gem（sue445/pixela ）も既に対応してて良き
- GET - /v1/users/<username>/graphs/<graphID>/graph-def
こういう使い方していいのかわからない
- 怒られたら消します

PixelaのグラフをTerraformで作成する

Wed, 25 Nov 2020 00:00:00 +0000

Pixelaのグラフの作成がTerraformでできるようなので試してみた。

#pixela を宣言的に管理するぞ！ということで初めてTerraform Providerを作ってみた！
v0.0.4ではグラフをTerraformで定義できます！https://t.co/LdD99leEjO
— Yoichiro Shimizu (@budougumi0617) November 24, 2020

手順 🔗

TerraformはDockerで。

必要なファイルを作成 🔗

docker-compose.yml
.env
main.tf

version: '3'
services:
  terraform:
    image: hashicorp/terraform:light
    volumes:
      - ./:/terraform
    working_dir: /terraform
    env_file:
      - .env

PIXELA_TOKEN=hogehoge

terraform {
  required_providers {
    pixela = {
      versions = ">= 0.0.4"
      source   = "budougumi0617/pixela"
    }
  }
}

provider pixela {
  username = "takagi"
}

resource "pixela_graph" "sample" {
  graph_id              = "sample"
  name                  = "sample from terraform"
  unit                  = "page"
  type                  = "int"
  color                 = "ajisai"
  timezone              = "Asia/Tokyo"
  self_sufficient       = "none"
  is_secret             = true
  publish_optional_data = false
}

terraform init 🔗

$ docker-compose run --rm terraform init
Creating terraform-pixela_terraform_run ... done

Initializing the backend...

Initializing provider plugins...
- Finding latest version of budougumi0617/pixela...
- Installing budougumi0617/pixela v0.0.4...
- Installed budougumi0617/pixela v0.0.4 (self-signed, key ID 4CE3A37F58A6A092)

Partner and community providers are signed by their developers.
If you'd like to know more about provider signing, you can read about it here:
https://www.terraform.io/docs/plugins/signing.html

The following providers do not have any version constraints in configuration,
so the latest version was installed.

To prevent automatic upgrades to new major versions that may contain breaking
changes, we recommend adding version constraints in a required_providers block
in your configuration, with the constraint strings suggested below.

* budougumi0617/pixela: version = "~> 0.0.4"

Terraform has been successfully initialized!

You may now begin working with Terraform. Try running "terraform plan" to see
any changes that are required for your infrastructure. All Terraform commands
should now work.

If you ever set or change modules or backend configuration for Terraform,
rerun this command to reinitialize your working directory. If you forget, other
commands will detect it and remind you to do so if necessary.

terraform plan 🔗

$ docker-compose run --rm terraform plan
Creating terraform-pixela_terraform_run ... done
Refreshing Terraform state in-memory prior to plan...
The refreshed state will be used to calculate this plan, but will not be
persisted to local or remote state storage.


------------------------------------------------------------------------

An execution plan has been generated and is shown below.
Resource actions are indicated with the following symbols:
  + create

Terraform will perform the following actions:

  # pixela_graph.sample will be created
  + resource "pixela_graph" "sample" {
      + color                 = "ajisai"
      + graph_id              = "sample"
      + id                    = (known after apply)
      + is_secret             = true
      + last_updated          = (known after apply)
      + name                  = "sample from terraform"
      + publish_optional_data = false
      + self_sufficient       = "none"
      + timezone              = "Asia/Tokyo"
      + type                  = "int"
      + unit                  = "page"
    }

Plan: 1 to add, 0 to change, 0 to destroy.

------------------------------------------------------------------------

Note: You didn't specify an "-out" parameter to save this plan, so Terraform
can't guarantee that exactly these actions will be performed if
"terraform apply" is subsequently run.

terraform apply 🔗

$ docker-compose run --rm terraform apply
Creating terraform-pixela_terraform_run ... done

An execution plan has been generated and is shown below.
Resource actions are indicated with the following symbols:
  + create

Terraform will perform the following actions:

  # pixela_graph.sample will be created
  + resource "pixela_graph" "sample" {
      + color                 = "ajisai"
      + graph_id              = "sample"
      + id                    = (known after apply)
      + is_secret             = true
      + last_updated          = (known after apply)
      + name                  = "sample from terraform"
      + publish_optional_data = false
      + self_sufficient       = "none"
      + timezone              = "Asia/Tokyo"
      + type                  = "int"
      + unit                  = "page"
    }

Plan: 1 to add, 0 to change, 0 to destroy.

Do you want to perform these actions?
  Terraform will perform the actions described above.
  Only 'yes' will be accepted to approve.

  Enter a value: yes

pixela_graph.sample: Creating...
pixela_graph.sample: Creation complete after 0s [id=sample]

Apply complete! Resources: 1 added, 0 changed, 0 destroyed.

確認 🔗

グラフがちゃんと作られてる！ takagi/sample from terraform | Pixela

terraform destroy 🔗

$ docker-compose run --rm terraform destroy
Creating terraform-pixela_terraform_run ... done
pixela_graph.sample: Refreshing state... [id=sample]

An execution plan has been generated and is shown below.
Resource actions are indicated with the following symbols:
  - destroy

Terraform will perform the following actions:

  # pixela_graph.sample will be destroyed
  - resource "pixela_graph" "sample" {
      - color                 = "ajisai" -> null
      - graph_id              = "sample" -> null
      - id                    = "sample" -> null
      - is_secret             = true -> null
      - name                  = "sample from terraform" -> null
      - publish_optional_data = false -> null
      - self_sufficient       = "none" -> null
      - timezone              = "Asia/Tokyo" -> null
      - type                  = "int" -> null
      - unit                  = "page" -> null
    }

Plan: 0 to add, 0 to change, 1 to destroy.

Do you really want to destroy all resources?
  Terraform will destroy all your managed infrastructure, as shown above.
  There is no undo. Only 'yes' will be accepted to confirm.

  Enter a value: yes

pixela_graph.sample: Destroying... [id=sample]
pixela_graph.sample: Destruction complete after 0s

Destroy complete! Resources: 1 destroyed.

おわり 🔗

完璧だ。
Pixela as Code（PaC）ができる。

GASで作った「Togglの作業時間をPixelaで可視化する」やつをRuby + GitHub Actionsにリプレイスした

Sun, 11 Oct 2020 00:00:00 +0000

表題通り、以前書いた記事（Togglの作業時間をPixelaで可視化する）で作ったGASのリプレイス

GASからRuby + GitHub Actionsにリプレイスした理由

Github Actionsの利用規約が変更され、サーバーレスコンピューティング目的で使用しても良くなった
上記により、わざわざGASにする理由がなくなった
GASより慣れているRubyの方がメンテしやすい

コード 🔗

https://github.com/ytkg/toggl_to_pixela

変更点は実行間隔を1日毎から1時間毎に変えたくらいでロジック等は変更していない
そっくりそのままRubyに移植しただけ
コケたらGithubからの通知で気づけるのでエラーハンドリングも追加していない

スクリプトファイル 🔗

require 'dotenv/load'
require 'base64'
require 'faraday'
require 'json'
require 'pixela'

class Toggl
  def initialize(token)
    @token = token
  end

  def summary(user_agent, workspace_id, since, _until)
    url = 'https://api.track.toggl.com/reports/api/v2/summary'
    params = {
      user_agent: user_agent,
      workspace_id: workspace_id,
      since: since,
      until: _until
    }
    headers = { 'Authorization' => "Basic #{Base64.encode64(@token + ':api_token')}" }
    res = Faraday.get(url, params, headers)
    JSON.parse(res.body)
  end
end

date = Date.today - 1

toggl = Toggl.new(ENV['TOGGL_API_TOKEN'])
summary = toggl.summary('toggl_to_pixela', ENV['TOGGL_WORKSPACE_ID'], date, date)
minutes = summary['total_grand'] / 1000 / 60

client = Pixela::Client.new(username: ENV['PIXELA_USERNAME'], token: ENV['PIXELA_TOKEN'])
client.create_pixel(graph_id: 'task-durations', date: date, quantity: minutes)

ワークフローファイル 🔗

name: Ruby

on:
  schedule:
    - cron:  '0 * * * *'
jobs:
  ruby:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up Ruby
      uses: ruby/setup-ruby@ec106b438a1ff6ff109590de34ddc62c540232e0
      with:
        ruby-version: 2.7
    - name: Install dependencies
      run: bundle install
    - name: Run script
      env:
        TOGGL_API_TOKEN: ${{ secrets.TOGGL_API_TOKEN }}
        TOGGL_WORKSPACE_ID: ${{ secrets.TOGGL_WORKSPACE_ID }}
        PIXELA_USERNAME: ${{ secrets.PIXELA_USERNAME }}
        PIXELA_TOKEN: ${{ secrets.PIXELA_TOKEN }}
      run: bundle exec ruby app.rb

おわり 🔗

Github Actionsにもだいぶ慣れてきて良きだな

参考 🔗

GitHub Actions、いつのまにかサーバレスコンピューティング目的でも使えるようになっていてビビった、最強じゃんhttps://t.co/uFWTJVU89E pic.twitter.com/nokVFryKj2
— hpp (@hpp_ricecake) September 4, 2020

Togglの作業時間をPixelaで可視化する

Thu, 13 Aug 2020 00:00:00 +0000

コロナの影響で在宅勤務なり、可処分時間が増えた
せっかく増えた時間を無駄にしないようにと自己研鑽に励み、その時間をTogglで管理している
さらに可視化をしたらモチベーション上がるかなと思ったので、Pixelaに草を生やしてみた

Lambdaでやろうとしたけど、僕はひよっこエンジニアなのでGASに逃げた
GASはコーディングから定期実行の設定までサクッとできるから便利（おそらくLambdaもそう）

仕様 🔗

毎日0時に前日分のTogglに記録された合計作業時間をPixelaに反映する
Pixelaに草を生やす単位は分

コード 🔗

※ 最初のグラフを作成する手順は省略

function myFunction() {
  const properties = PropertiesService.getScriptProperties().getProperties();

  const date = new Date();
  date.setDate(date.getDate() - 1);

  const date_toggl = Utilities.formatDate(date, 'Asia/Tokyo', 'yyyy-MM-dd');
  const toggl = new Toggl(properties.TOGGL_API_TOKEN);
  const summary = toggl.fetchSummary('toggl_to_pixela', properties.TOGGL_WORKSPACE_ID, date_toggl, date_toggl);
  const minutes = parseInt(summary['total_grand'] / 1000 / 60);

  const pixela = Pixela.create(properties.PIXELA_USERNAME, properties.PIXELA_PASSWORD);
  const date_pixela = Utilities.formatDate(date, 'Asia/Tokyo', 'yyyyMMdd');
  pixela.updatePixel('task-durations', date_pixela, minutes);
}

class Toggl {
  constructor(apiToken) {
    this.apiToken = apiToken;
  }

  fetchSummary(userAgent, workspaceId, since, until) {
    const url = 'https://toggl.com/reports/api/v2/summary?' +
      'user_agent=' + userAgent +
      '&workspace_id=' + workspaceId +
      '&since=' + since +
      '&until=' + until;

    const options = {
      'method' : 'GET',
      'headers': {'Authorization' : 'Basic ' + Utilities.base64Encode(this.apiToken + ':api_token')},
      'muteHttpExceptions' : true,
    }

    const response = UrlFetchApp.fetch(url, options);

    return JSON.parse(response);
  }
}

特に細かい説明はしないけど、

パスワード、トークンはPropertiesServiceを使って管理した
- GASにおけるパスワード等の機密情報の取り扱い方 | 高木のブログ
Pixelaはライブラリがあったので使わせてもらった
- https://github.com/noissefnoc/gas-library-pixela
Togglはライブラリが見つからなかったので簡単なクラスを作成した

本来であれば例外処理などの対応をやっておいた方がいいが、
コケたらコケたでいいやと思ったのとスクリプトがコケた場合は、
Googleからメールが来るのでそれで十分と判断したため省略した

それぞれのAPIについて軽く触った記事 🔗

結果 🔗

無事、草グラフが出来た（https://pixe.la/v1/users/takagi/graphs/task-durations ）

Pixelaは画像以外にも詳細のページまで用意されている
https://pixe.la/v1/users/takagi/graphs/task-durations.html

もう3週間ほど動かしているが、今のところ問題なく動いてるので良き

参考 🔗

“草APIサービス” Pixela の Google Apps Script ライブラリを作成しました - ChangeLog - noissefnoc

Pixelaを使ってみる

Thu, 23 Jul 2020 00:00:00 +0000

Pixela 🔗

あなたの頑張りや継続を記録し、育てたい。そのすべてを、APIで。 Pixela はAPIサービスです。このサービスを使えば、あなたの日々の様々な活動量を GitHub のような鮮やかなグラフで表現することができます。そのすべての操作を、APIで。もちろん、無料です。

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

使い方 🔗

たったの3ステップでできる

ユーザーの作成 🔗

$ curl -X POST https://pixe.la/v1/users -d '{"token":"password", "username":"takagi", "agreeTermsOfService":"yes", "notMinor":"yes"}'

token: パスワード
username: ユーザー名
agreeTermsOfService: サービスの利用規約に同意したか
notMinor: 未成年ではないか。未成年の場合、保護者の了承は得ているか

グラフの作成 🔗

$ curl -X POST https://pixe.la/v1/users/takagi/graphs -H 'X-USER-TOKEN:password' -d '{"id":"test-graph","name":"graph-name","unit":"commit","type":"int","color":"shibafu"}'

X-USER-TOKEN: パスワード
id: グラフのID
name: グラフの名前
unit: 記録する値の単位
type: 記録する値の型
- int
- float
color: グラフの色
- shibafu (緑)
- momiji (赤)
- sora (青)
- ichou (黄)
- ajisai (紫)
- kuro (黒)

作成したグラフ 🔗

値の登録 🔗

$ curl -X POST https://pixe.la/v1/users/takagi/graphs/test-graph -H 'X-USER-TOKEN:password' -d '{"date":"20200723","quantity":"5"}'

date: 日付
quantity: 値

値を登録したグラフ 🔗

その他の使い方 🔗

APIドキュメントに詳しく書いてある。 Pixela API Document - Pixela API Document

その中で実際に使ってみた使い方

パスワードの変更 🔗

$ curl -X PUT https://pixe.la/v1/users/takagi -H 'X-USER-TOKEN:password' -d '{"newToken":"new_password"}'

グラフの単位の変更 🔗

$ curl -X PUT https://pixe.la/v1/users/takagi/graphs/test-graph -H 'X-USER-TOKEN:password' -d '{"unit":"point"}'

値の変更 🔗

$ curl -X PUT https://pixe.la/v1/users/takagi/graphs/test-graph/20200723 -H 'X-USER-TOKEN:password' -d '{"quantity":"15"}'

値の削除 🔗

$ curl -X DELETE https://pixe.la/v1/users/takagi/graphs/test-graph/20200723 -H 'X-USER-TOKEN:password'

（小学生並みの）感想 🔗

APIがしっかり作り込まれててすごい