Zenn
📚

Github Profileに本棚を表示するアプリを作ってみた話

2024/05/14に公開
Go
HTML
Redis
個人開発
gin
tech

前書き

Githubのプロフィールに読んでいる、あるいは良かった本を手軽に載せれるツールが欲しいなと思い、作ってみました。
github-readme-statsなどの装飾系の便利ツールを大変リスペクトして作ったツールとなっております。

https://github.com/anuraghazra/github-readme-stats

プロダクトについて

以下の画像のように、Githubのプロフィール中に、本の表紙を並べて表示することができます。

使い方としては、以下のようなURLをマークダウン中に埋め込むだけでOKです。
クエリパラメータとして13桁ISBNコードを指定して、お好きな書籍を表示することができます。

https://bookshelf-generator.onrender.com/?isbns[]=9784297125219&isbns[]=9784873116860&isbns[]=9784297133665

※Zenn上でも表示可能。

ソースコードは以下にて公開しております。

https://github.com/yu-ta-9/bookshelf-generator

使用技術・アーキテクチャ

選定背景

  • レスポンスの速さを大事にしたいので、比較的実行速度に定評があるGoやRustを浮かべました。その中でも執筆時点（2024/05/12）で、Webプロダクト界隈では広く採用されてきていて、キャッチアップがすぐ行えそうであると踏み、最終的にGoを採用しました。
  • 面倒なのでWebフレームワークを導入したく、Ginが一番軽量で扱いやすそうであったので、こちらを採用しました。
  • キャッシュ関連にはベターにRedisを採用しております。
  • 書籍データは、Google Books APIから取得する形としています。
    • 費用を抑えたいを前提に検討したところ、他にもRakuten Books APIを候補としていましたが、執筆時点（2024/05/12）で1秒に1回以下のリクエストに抑えるよう規約があり、こちらの制約では要件達成が厳しいため断念しました。

設計について

  • シーケンスとしてはシンプルな形かなと思っています。

工夫した点

Githubプロフィールへの描画

  • Githubのマークダウンではiframeタグを使用することができないため、例えばHTMLを返す、のような方針では描画ができないです。
  • 直接画像ファイルを返すようにすれば表示が可能となるので、SVGタグで見た目を作って返し、マークダウン描画を提供している側で描画してもらうことで解決しています。

キャッシュ戦略

  • 書籍データは外部のAPIを使わせていただいているため、そちらに高負荷をかけないよう工夫する必要がありました。（費用も無視できなくなってしまいますし）
  • ユーザー間でシェアできるデータなので、シンプルにisbn値をkeyとして、redisに一定期間保持して負荷を抑える設計にしております。
  • 余談: Google Books APIについては特にデータの保持期間を言及していないようで、常識の範囲で扱えば規約には提唱しない筈です。

今後追加したい機能

  • デザインをよりリッチにする
  • デザインのパターンを増やし、クエリパラメータ経由で指定を可能にする
  • 装飾を増やす
    • この本は読書中、読了済み、などのラベルを付与する、など
  • SVGサイズの指定を柔軟に行えるようにする
  • SPなどデバイスによっては解像度が低くなってしまうことがあるので、画面に応じた最適化を行えるようにする

後書き

  • どんな本を読んでいるか、または読んできたか、も、その人のスキルの1つの指標になると私は考えております。
  • ただ、書籍とパーソナリティを結びつけるようなサービスは、少なくとも私の観測範囲には無かったので、1つそこに加えられるようなものを目指して作ってみました。
  • 機能リクエストやコントリビュートをしたいという方がもしいらっしゃったら、お気軽にご連絡をいただけたら嬉しいです。

Discussion