DenoでGitHubの草を取得できるAPIを作った(ターミナル/JSON/SVG対応)
こんなプロジェクトを作りました。
以下のURLへブラウザからアクセス、またはcurlでリクエストし、表示される説明に沿って操作してください。
技術者に楽しんでほしかったので、敢えてリッチな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等で使うことを想定しています。
合計コントリビューション数の表示はno-totalパラメータで、Less...Moreの表示はno-legendパラメータで除去できます。
さらに、カラースキームを設定するschemeパラメータ、草部分に使用している文字を変更するpixelパラメータ、文字ではなく背景色を変更するinvertパラメータがあります。
pixelパラメータは、適切にエンコードすればnon-ascii characterも利用できます。
True color非対応の端末だとうまく表示されないと思うのでご注意ください…。
json
一番「APIっぽい」タイプです。合計コントリビューション数の文字列と各週のコントリビューションデータの配列を含んだJSONを返却します。
GitHubのGraphQL APIのラッパーと言っても良いかもしれません。
コントリビューションデータは7日×53週の2次元配列なのですが、flatオプションを使うと一次元配列として受け取ることが可能です。
このタイプは単体で使うのではなく、コントリビューション数を何らかの用途で利用したいときのソースに活用できると思います。
svg
一番直感的なタイプです。コントリビューショングラフをSVG画像として返します。
GitHubユーザーページのものとほぼ同じですが、公式のものは座標指定に癖があったりするので、多少リファクタリングしています。
画像なのでZennにも貼れます。これでZenn上でも開発活動をアピールできますね！
なお、データ的には<title>要素も含まれているので、上記.svgに直接アクセスすればツールチップで日付とコントリビューション数を表示することもできます。
no-totalおよびno-legendパラメータで上下の文字部分を、scheme、font-color、frame、bgといったパラメータで色を、それぞれ調整可能です。
URLを指定して画像を添付できる場所であればどこでも使用できると思います。
ぜひ便利にご活用ください。
deno-github-contributions-api開発を支える技術
本プロジェクト開発で得られた知見や使用しているツールは過去の記事にて紹介してきました。
ということで過去記事まとめみたいになっちゃってますがご容赦ください…。
コントリビューション数の取得
メインとなるコントリビューション数の取得処理はこちらの記事にて解説しています。 これをDeno Deployで運用しているだけです。
Deno Dployの活用
Deno Deployへの公開、パラメータに応じた分岐などについてはこちらの記事に載せています。
開発中に遭遇したエラーの対処法に関しては以下の記事で説明しました。
GitHubのGraphQL APIを使用するにあたって、トークンを使用する必要があります。
これをDeno Deployで扱うためにenvモジュールを使用しています。
SVG画像の生成
SVG画像の整形には、以前類似ツールを作ったときのコードが役に立ちました。
SVGタグをスクリプト内に素直に記述していくと長大な文字列になって扱いづらくなるため、自作モジュールを使用しています[1]。
タスクランナーによる開発支援
Velociraptorを使用してGit hooksやCIを実行しています。
依存モジュールの管理
複数の外部モジュールを利用しているため、uddでバージョン管理を行っています。
デモ画像の作成
最初のツイートやリポジトリのTOPに載せているデモはt-recで録画しました。 なお、t-recは名前が恐竜 🦖 を意識していますがDeno 🦕 との直接の関係はありません。
おわりに
これまで勉強してきたことをひとまず形としてまとめられたかな、と思います。
作っている間も楽しく、完成品も視覚的に面白い、しかも自分の実績（草）を見られる…という物に仕上げられたので満足です。
良いと感じていただけたらぜひリポジトリページも見て貰えると嬉しいです。 ↑ Star★をいただけるととても喜びます！ ↑
Denoはほんとうに開発体験が良いですね[2]。
今後もDenoおよびDeno Deployでいろいろ遊んでいきたいと思っています。
面白いものができたらZennやTwitterで発表していく予定なので、お楽しみに。
おまけ
なんと「あの方 🐯 」にもStar🌟を頂いています[3]！圧倒的感謝…！！
なんとDeno公式TwitterにもPickupされました[4]！圧倒的感動…！！
つづき
Discussion