Zenn
💛

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

2021/12/25に公開
GitHub
Next.js
SVG
tech

こんにちは、nano72mknです！

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

Zennのスコア

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

作成の経緯

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

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

どうやってつくったの？

使用技術

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

の３つ。
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/nano72mkn

まとめ

SVG 完全に理解した 😇

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

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

GitHubで編集を提案

Discussion