🦕

DenoでGitHubの草を取得できるAPIを作った(ターミナル/JSON/SVG対応)

6 min read

こんなプロジェクトを作りました。

https://github.com/kawarimidoll/deno-github-contributions-api

https://twitter.com/KawarimiDoll/status/1411657903614742532

以下のURLへブラウザからアクセス、またはcurlでリクエストし、表示される説明に沿って操作してください。

https://github-contributions-api.deno.dev

技術者に楽しんでほしかったので、敢えてリッチなUIはつくらず、テキストレスポンスで説明を出すようにしました。
本記事では各APIを簡単に説明します。ぜひご自身でアクセスして遊んでみてください。

API

https://github-contributions-api.deno.dev/[username]にアクセスすると、そのユーザーの年間コントリビューション数と、APIの説明が表示されます。
各APIへは、/[username].textのようにURL末尾に拡張子をつける形でアクセスできます。

text

一番簡単で面白みのないタイプです。コントリビューショングラフをカンマ区切りで出力します。

❯ curl https://github-contributions-api.deno.dev/kawarimidoll.text
2387 contributions in the last year
13, 5, 2, 4, 5, 9, 1, 2, 3, 3, 3, 8, 3,10, 1, 4, 1, 1, 6, 2, 4, 2,10,10,10, 9, 8, 6,13, 4, 7, 7, 6, 6, 3, 1,11, 1, 5, 2, 6, 6, 6,21,11,17,13,16, 2, 7, 6,10,12
 4, 0, 1, 5, 7, 1, 1, 3, 9, 1, 5, 8, 3, 1, 4, 5, 3, 1, 1, 1, 1, 6, 7,12, 5, 7, 5, 5,19, 2,20,11, 8,10,32, 4, 6, 2, 5, 4, 3, 3, 7,20, 5,17, 6, 5,13,14,22, 6,12
 0, 5, 0, 7, 8, 3, 3, 3, 2, 2, 5, 1, 1, 4, 1, 3, 1, 1, 2, 1, 1, 7, 5, 9, 4,10, 2,14,12,18,11,22, 6, 7, 7,14, 1, 3, 2, 5, 1,18, 5,20, 7, 4, 6, 5,16,14, 4,17, 2
 8, 5, 1, 4, 2, 5, 2, 4, 1, 5, 2, 3, 1, 4, 1, 1, 1, 1, 1, 2, 2, 4, 7, 5, 6, 4, 2, 6,18,16, 6, 6, 2, 2, 7, 9, 1, 4, 1, 4, 4, 9, 4,11, 5,20, 6,14, 7,16,15, 9,
 6, 1, 0, 0, 5, 1, 4, 3, 1, 6, 3, 2, 1, 1, 2,10, 1, 1, 1, 2, 2,11, 3,18, 4,15, 4,12,24, 4,23,15, 4,17, 8, 5, 4, 2, 2,14, 2,12, 6, 9, 1, 9, 4, 2,11,17,14, 7,
 2, 3, 3, 2, 3, 1, 3, 1, 9, 5, 6, 1, 1, 1, 3, 1, 1, 1, 1, 2, 1, 9, 7,23, 6,13, 6, 1,14, 6, 3,12, 3, 4, 6, 2, 1, 2, 6,14, 6,12, 6,15, 2,10, 4,18, 7,20, 5,11,
 7, 3, 3,10, 4, 5, 4, 3, 2, 4, 1, 6, 4, 1, 4, 2, 2, 3, 1, 2, 1,10, 7,28, 6,12, 8,17, 7, 6, 4,14,13, 3, 5,15, 2, 5, 4,11, 6,15,24,20, 8,19, 9, 9,23, 4,12,18,

合計コントリビューション数の表示はno-totalパラメータで除去できます。
カンマ区切りなので、CSVファイルに保存すると面白い活用ができるかもしれません。

term

一番特徴的なタイプです。冒頭のデモに載せているのもこれで、推しているポイントです。
curl等で使うことを想定しています。

https://twitter.com/KawarimiDoll/status/1411665314954153994?conversation=none
合計コントリビューション数の表示はno-totalパラメータで、Less...Moreの表示はno-legendパラメータで除去できます。
さらに、カラースキームを設定するschemeパラメータ、草部分に使用している文字を変更するpixelパラメータ、文字ではなく背景色を変更するinvertパラメータがあります。
https://twitter.com/KawarimiDoll/status/1414020769026244610
pixelパラメータは、適切にエンコードすればnon-ascii characterも利用できます。
https://twitter.com/KawarimiDoll/status/1414388485474045954

True color非対応の端末だとうまく表示されないと思うのでご注意ください…。

json

一番「APIっぽい」タイプです。合計コントリビューション数の文字列と各週のコントリビューションデータの配列を含んだJSONを返却します。
GitHubのGraphQL APIのラッパーと言っても良いかもしれません。

コントリビューションデータは7日×53週の2次元配列なのですが、flatオプションを使うと一次元配列として受け取ることが可能です。

https://twitter.com/KawarimiDoll/status/1412723691037749249

このタイプは単体で使うのではなく、コントリビューション数を何らかの用途で利用したいときのソースに活用できると思います。

svg

一番直感的なタイプです。コントリビューショングラフをSVG画像として返します。
GitHubユーザーページのものとほぼ同じですが、公式のものは座標指定に癖があったりするので、多少リファクタリングしています。

画像なのでZennにも貼れます。これでZenn上でも開発活動をアピールできますね!

svg

![svg](https://github-contributions-api.deno.dev/kawarimidoll.svg)

なお、データ的には<title>要素も含まれているので、上記.svgに直接アクセスすればツールチップで日付とコントリビューション数を表示することもできます。

https://twitter.com/KawarimiDoll/status/1419597108886216707

no-totalおよびno-legendパラメータで上下の文字部分を、schemefont-colorframebgといったパラメータで色を、それぞれ調整可能です。

svg

![svg](https://github-contributions-api.deno.dev/kawarimidoll.svg?no-total=true&no-legend=true&bg=184038&font-color=d7f07b&frame=f03153&scheme=amber)

URLを指定して画像を添付できる場所であればどこでも使用できると思います。
ぜひ便利にご活用ください。

deno-github-contributions-api開発を支える技術

本プロジェクト開発で得られた知見や使用しているツールは過去の記事にて紹介してきました。
ということで過去記事まとめみたいになっちゃってますがご容赦ください…。

コントリビューション数の取得

メインとなるコントリビューション数の取得処理はこちらの記事にて解説しています。

https://zenn.dev/kawarimidoll/articles/1679844a116395
これをDeno Deployで運用しているだけです。

Deno Dployの活用

Deno Deployへの公開、パラメータに応じた分岐などについてはこちらの記事に載せています。

https://zenn.dev/kawarimidoll/articles/b0a5064befcd31

開発中に遭遇したエラーの対処法に関しては以下の記事で説明しました。

https://zenn.dev/kawarimidoll/articles/efed8ada433f24

GitHubのGraphQL APIを使用するにあたって、トークンを使用する必要があります。
これをDeno Deployで扱うためにenvモジュールを使用しています。

https://zenn.dev/kawarimidoll/articles/752f74860d0d78
https://zenn.dev/kawarimidoll/articles/3c44309fce182d

SVG画像の生成

SVG画像の整形には、以前類似ツールを作ったときのコードが役に立ちました。

https://qiita.com/kawarimidoll/items/14ce32323715389f1b88

SVGタグをスクリプト内に素直に記述していくと長大な文字列になって扱いづらくなるため、自作モジュールを使用しています[1]

https://zenn.dev/kawarimidoll/articles/6022552f509b84

タスクランナーによる開発支援

Velociraptorを使用してGit hooksやCIを実行しています。

https://zenn.dev/kawarimidoll/articles/b6570176eaaaea

依存モジュールの管理

複数の外部モジュールを利用しているため、uddでバージョン管理を行っています。

https://zenn.dev/kawarimidoll/articles/d4e5ac8770e024

デモ画像の作成

最初のツイートやリポジトリのTOPに載せているデモはt-recで録画しました。

https://zenn.dev/kawarimidoll/articles/2415b9291f2150
なお、t-recは名前が恐竜 🦖 を意識していますがDeno 🦕 との直接の関係はありません。

おわりに

これまで勉強してきたことをひとまず形としてまとめられたかな、と思います。
作っている間も楽しく、完成品も視覚的に面白い、しかも自分の実績(草)を見られる…という物に仕上げられたので満足です。

良いと感じていただけたらぜひリポジトリページも見て貰えると嬉しいです。

https://github.com/kawarimidoll/deno-github-contributions-api
↑ Star★をいただけるととても喜びます! ↑

Denoはほんとうに開発体験が良いですね[2]
今後もDenoおよびDeno Deployでいろいろ遊んでいきたいと思っています。
面白いものができたらZennやTwitterで発表していく予定なので、お楽しみに。

おまけ

なんと「あの方 🐯 」にもStar🌟を頂いています[3]!圧倒的感謝…!!

https://twitter.com/KawarimiDoll/status/1411871548449853443

なんとDeno公式TwitterにもPickupされました[4]!圧倒的感動…!!

https://twitter.com/deno_land/status/1420387162206478340
脚注
  1. 本件開発中に作成したスクリプトを独立したモジュールとして切り出した、というほうが正確です ↩︎

  2. 感想には個人差があると思いますが、自分には非常にあっていると感じています ↩︎

  3. しかも公開翌日…どこから見つけてくれたのだろう ↩︎

  4. しかも本記事公開の数時間後…どういうめぐり合わせだろう ↩︎

Discussion

ログインするとコメントできます