@jabba さんの有名サイト
技術書ランキングをQiita記事から集計 テック・ブック・ランク
および
@YA001 さんの類似サイト
Engineer's Book Hub
とその記事を読み，自分でも類似サイトを作ってみたいと思いました．
この二つのサイトのランキングは同じQiita記事から作成したものにも関わらず，ランキングが大きく異なります．
集計の仕方によってランキングがどのように変化するのかを見るのは面白そうですし，サイトとしても別の基準で作られたランキングは新しい視点が得られるものになると思います．
開発途中な機能もありますが，興味がある方はぜひこのサイトを訪れてみてください．
このサイトの特徴
ランキングの基本的な要素に加えて，以下の独自機能を実装しています．
1. 順位変動インジケーター（↑↓・NEW）
毎週バッチ処理でランキングを更新する際，前回のランキングと比較して各書籍の順位変動を記録します．ランク番号の下に ↑5・↓3・NEW のように表示されます．
2. 一緒に紹介されることが多い本（共起分析）
詳細パネルに「一緒に紹介されることが多い本」セクションを設けました。同じ Qiita 記事の中で一緒に紹介されている書籍を共起回数順に最大5冊表示します。
学習ロードマップ的な使い方ができます。「この本を読んでいる人は次にこの本を読む」というパターンが自然に浮かび上がってきます。
3. 4つの期間でフィルタリング
| 期間 | 用途 |
|---|---|
| 3か月 | 最近話題になっている本 |
| 1年 | 今年のトレンド |
| 3年 | 中期的に支持されている本 |
| 全期間 | 定番・ロングセラー |
仕組み
データパイプライン
- 書籍リンクを含む記事を全件取得（Qiita API）
- 記事本文から ISBN-13 を抽出
- amazon.co.jp /dp/{ASIN}
- oreilly.co.jp /books/{ISBN}
- gihyo.jp /book/{year}/{ISBN}
- amzn.to 短縮URL（並列解決）
- OpenBD + Google Books で書籍メタデータ取得
- スコア計算
- Cloudflare KV に保存
Cloudflare Workers + OpenNext の構成
Next.js のホスティングには OpenNext を使って Cloudflare Workers にデプロイしています．ランキングデータは Cloudflare KV に JSON で保存しており，API ルートから読み出して返します．
// src/app/api/trending/route.ts
const kv = getCloudflareContext().env.RANKING_KV;
const json = await kv.get(`ranking:${period}`);
問題点
- 本の表紙画像が表示されないものがたくさんあること（おそらくopenBDから取得した画像urlが無効）
- 順位変動インジケーターがどの期間のランキングでも毎週のバッチ処理で変化した分を表示していること（例えば3か月のランキングなら前の3か月のランキングとの差分にすべき）
- 順位変動インジケーターが表示されなときがあるというバグがある
- 明らかに拾えていない記事・書籍がある
技術スタック
| 役割 | 技術 |
|---|---|
| フロントエンド | Next.js 16 (App Router) + Tailwind CSS v4 |
| ホスティング | Cloudflare Workers (OpenNext) |
| データストア | Cloudflare KV |
| 書籍データ | OpenBD API + Google Books API |
| 記事データ | Qiita API |
| バッチ処理 | GitHub Actions |
プロジェクト構成
src/
app/
api/
trending/route.ts # KV からランキングデータを返す API
mock/route.ts # 開発用ダミーデータ API
layout.tsx
page.tsx
components/
BookRanking.tsx # ランキング表示コンポーネント
lib/
qiita.ts # Qiita API クライアント
openbd.ts # OpenBD + Google Books による書籍メタデータ取得
googleBooks.ts # Google Books API クライアント
bookUrls.ts # 記事本文から ISBN を抽出するユーティリティ
amazon.ts # Amazon URL 生成
ranking.ts # スコア計算・ランキング生成・共起分析ロジック
scripts/
build-ranking.ts # ランキングデータ生成・KV 書き込みスクリプト
.github/
workflows/
update-ranking.yml # 自動更新ワークフロー
Claude Code
このサイトのコードはほぼ全てClaude Codeに書いてもらいました．
ただ，自分でもわからないものが動いているのは怖いので，これから理解して上記の問題点を自分で修正できるくらいにはなりたいですね．