💛

GitHubのプロフィールにZennのいいね数や記事数を表示してみた

commits2 min read

こんにちは、shota1995mです!

最近、Zennに投稿する機会が増えたので、GitHubでもZennの記事数とか表示できたら面白いなーと思ったので、
本日はこんなものを作ってまいりました。

Zennのスコア

https://github.com/shota1995m/github-readme-blog-score

作成の経緯

みなさん、GitHubのプロフィールREADMEは使っていますか?
GitHubのユーザー名と同じリポジトリを作ることで、GitHubのプロフィールページにREADMEを表示できる、名前まんまの機能です。

どこかの国のエンジニアの人がプロフィールREADMEを使ってカッコよく仕上げてるのをみて、
とりあえず手を出してみました。
ただ、書くことが無く...
ひとつGitHub Stats Cardというものを置いているだけで放置してたので、今年終わるまでに少しても手を入れようと思った次第です!!!

どうやってつくったの?

使用技術

  • Typescript(ほんのちょっと支える程度)
  • Next.js
  • SVG

の3つ。
SVG??って思うかもしれないですが、SVGを自分で組み立て画像を作成しました。

つまったとこ

  • SVGを配信するのに、Headerをセットし忘れていた
res.setHeader("Content-Type", "image/svg+xml");
  • <svg>って書いてるだけだとエラーがでる
    • xmlnsを完全に入れ忘れててだいぶ詰まった。
<svg xmlns="http://www.w3.org/2000/svg">
  • stringで返さないといけないので、普通のコンポーネントは使えなかった。
    • レゴみたいに組み立てられるように工夫した。
    • こんな感じでつくっていった
const svg = new Svg(
  width,
  height,
  [
    new Card(),
    new ZennIcon({ x: -5, y: height - 50, height: 20 }),
    new Text({ x: 30,  y: 45,  fontWeight: 'bold', text: user.username }),
    new Text({ x: 30,  y: 90,  fontWeight: 'bold', fontSize: 24, text: articlesCount }),
    new Text({ x: 40 + (articlesCount.length * 14), y: 90, fontSize: 14, text: "記事" }),
    new Text({ x: 30,  y: 125,  fontWeight: 'bold', fontSize: 24, text: booksCount }),
    new Text({ x: 40 + (booksCount.length * 14), y: 125,  fontSize: 14, text: "冊の本" }),
    new Text({ x: 30,  y: 160, fontWeight: 'bold', fontSize: 24, text: totalLikedCount }),
    new Text({ x: 40 + (totalLikedCount.length * 14), y: 160, fontSize: 14, text: "Liked" }),
  ]
).render();

配信のながれ

ZennのAPIからユーザー情報を引っ張ってきて、そのデータを使ってSVGを作成し、
Next.jsのAPI Routesを使って配信しています。

配信の流れ

作成時間

SVGをはじめて自作したということもあり、1日かかりました。
仕事もしていたので、時間だと4時間とかかも??

実際に表示してみた

↓ こんな感じでGitHubのプロフィールに表示されました!

GitHubのプロフィール

↓ 直接みたい方はこちらから

https://github.com/shota1995m

まとめ

SVG完全に理解した😇

というのは嘘で、SVGちょっとだけさわってみて、可能性を感じました。
blogの記事のサムネイルなどもこの方法で使えるなと考えていたり...
いろいろアイデアが出てきているのでワクワクしてます!

また、何か不具合や追加などありましたら、教えてください!
もちろん、PRもお待ちしております!

GitHubで編集を提案

Discussion

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