💛
GitHubのプロフィールにZennのいいね数や記事数を表示してみた
こんにちは、shota1995mです!
最近、Zennに投稿する機会が増えたので、GitHubでもZennの記事数とか表示できたら面白いなーと思ったので、
本日はこんなものを作ってまいりました。
作成の経緯
みなさん、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のプロフィールに表示されました!
↓ 直接みたい方はこちらから
まとめ
SVG完全に理解した😇
というのは嘘で、SVGちょっとだけさわってみて、可能性を感じました。
blogの記事のサムネイルなどもこの方法で使えるなと考えていたり...
いろいろアイデアが出てきているのでワクワクしてます!
また、何か不具合や追加などありましたら、教えてください!
もちろん、PRもお待ちしております!
Discussion