🔥

GitHub Trendingを毎日自動で日本語要約するサイトをClaude + Next.jsで作った

に公開

作ったもの

ghtrend というサイトを作りました。

GitHub Trendingに載ったリポジトリを、毎日自動でClaude APIに投げて日本語要約し、静的サイトとして配信しています。毎日18時(JST)に自動更新されます。

https://ghtrend.jp

モチベーション

エンジニアなら GitHub Trending を定期的にチェックしている人は多いと思います。ただ、実際に開いてみると英語のリポジトリ名と短い description だけが並んでいて、「結局これ何?」となりがちです。

READMEを一個ずつ開いて読むのも面倒だし、知らないジャンルだとそもそもキーワードが頭に入ってこない。

「流し見で "今日はこういうのが話題なのね" とわかるサイト」 が欲しくて作りました。

アーキテクチャ

GitHub Actions の cron で毎日1回バッチを回すだけのシンプルな構成です。

技術スタック

レイヤー 技術
スクレイピング・要約 Python + BeautifulSoup4 + Anthropic SDK
AI モデル Claude Sonnet
DB SQLite
フロントエンド Next.js 15 (App Router / SSG)
CSS Tailwind CSS v4
ホスティング Vercel
CI/CD GitHub Actions

Claude に渡しているプロンプト設計

ここが一番こだわった部分です。

Claude にはリポジトリ名・description・README(先頭3000文字)を渡して、以下の構造化データをJSONで返してもらっています。

{
  "catchy_title": "会議の文字起こしを全自動化!99言語対応のAI音声認識 — whisper",
  "summary": "3〜5文の平易な日本語での概要",
  "concrete_example": "具体的な利用シーン",
  "why_trending": "なぜ今注目されているか",
  "category": "AI",
  "target_audience": "初心者",
  "highlights": ["注目ポイント1", "注目ポイント2"]
}

プロンプトで意識したこと

1. 非エンジニアでも読めるレベルにする

専門用語はできるだけ避け、使う場合は一言で補足する(例: 「API(ソフト同士をつなぐ仕組み)」)

技術トレンドの要約で「CI/CDパイプラインを最適化する〜」と書かれても、ターゲットによっては刺さりません。比喩や身近な例えを積極的に使うよう指示しています。

2. 指示語を禁止する

「これ」「それ」「あれ」は絶対に使わない。リポジトリ名を主語にする

要約が並んだときに「これは〜」「これは〜」が連続すると非常に読みづらいです。地味ですが、一覧性を大きく改善するルールでした。

3. catchy_title にリポジトリ名を必ず含める

タイトルの末尾に必ず「 — リポジトリ名」をつける

カードのタイトルだけ見て「あ、これ Whisper の話か」と分かるようにしています。キャッチーな日本語だけだと、元が何のリポジトリか分からなくなるので。

4. すべて日本語で出力させる

プロンプトの冒頭に最重要ルールとして明記しています。英語のREADMEを入力すると、出力も英語に引きずられることがあるので、明示的な指示が必要でした。

データフロー:なぜ SQLite → JSON → SSG なのか

SQLite (trends.db)
    ↓ export_json.py
JSON ファイル群
    ├── dates.json
    ├── trends/2026-02-18.json
    ├── repos/owner__repo.json
    ├── stats.json
    └── weekly/2026-W07.json

「SQLite に直接アクセスすればいいのでは?」と思うかもしれません。実際、最初はそうしようとしました。

ただ、以下の理由で SQLite → JSON → SSG の構成にしています。

  1. Vercel で SQLite を使うのが面倒。Serverless 環境で永続的な SQLite ファイルを扱うにはワークアラウンドが必要
  2. 完全静的にすればランタイムコストがゼロ。リクエスト時のDB接続もAPI呼び出しもない
  3. GitHub リポジトリ自体がデータのバックアップになる。JSON ファイルが全部 git 管理されているので、DB が壊れても復元できる

結果として、Vercel の無料枠で余裕で運用できています。

GitHub Actions のハマりどころ

データベースの永続化

GitHub Actions は実行のたびにクリーンな環境で動くので、前回のデータベースが消えます。

actions/cache を使って SQLite ファイルを永続化しています。

- name: Restore database from cache
  uses: actions/cache@v4
  with:
    path: data/trends.db
    key: trends-db-${{ github.run_id }}
    restore-keys: |
      trends-db-

github.run_id をキーに含めることで、毎回新しいキャッシュが作られ、restore-keys のプレフィックスマッチで直前のキャッシュが復元される仕組みです。

git push の競合

バッチ実行中に別のコミットが main に push されると、ワークフローの git push が失敗します。JSON ファイルはミニファイされた1行なので、rebase 時のコンフリクト自動解決もできません。

git pull --rebase -X theirs origin main

-X theirs で「ワークフロー側の変更を常に優先」することで解決しています。web/data/ の中身は毎回バッチで完全再生成されるので、常にワークフロー側が正です。

サイトの機能

トレンド一覧

メインのページです。各リポジトリをキャッチーな日本語タイトル + 1行要約 + メタ情報(リポジトリ名・言語・スター数)のカード形式で表示しています。

トレンド概況

その日のカテゴリ構成を自動分析して、「今日はAI関連が5つで最多」のような一文を生成しています。

週間まとめ

毎週日曜にその週のトレンドを集計して、Claude に週間レポートを書かせています。「今週は AI の民主化がキーワード」のような切り口でまとめてくれるので、1週間の流れを振り返るのに便利です。

殿堂入り

複数日にわたってトレンド入りしたリポジトリを集めたページ。一発屋ではなく、継続的に注目されているプロジェクトが分かります。

リポジトリ詳細

各リポジトリに個別ページがあり、AI による詳細解説と過去のトレンド履歴を表示しています。

運用コスト

項目 コスト
Claude API 月 数ドル(1日20〜25リポ × 1リクエスト)
Vercel 無料枠内
GitHub Actions 無料枠内

完全自動で、一度パイプラインを組んでしまえばノータッチで動き続けます。

やってみて分かったこと

Claude の要約品質は実用レベル

概要を読んで「へ〜」となった後に実際のリポジトリを見ても、大きなギャップは感じません。プロンプトの構造化指示(JSON スキーマ + 具体例)がかなり効いていると思います。

SSG は正義

更新頻度が1日1回のサイトにリアルタイム性は不要でした。静的生成にしたことで、パフォーマンス・コスト・運用の全てがシンプルになりました。

プロンプトは「禁止ルール」が効く

「こう書いて」より「こう書くな」の方が品質が安定しました。特に指示語の禁止は一覧表示の読みやすさに直結します。

今後やりたいこと

  • 言語別フィルター(Python / Rust / Go だけ見たい)
  • トレンドの時系列可視化(カテゴリの推移グラフ)
  • Issue/PR の議論ピックアップ(盛り上がっている議論を要約)

まとめ

GitHub Trending を毎日自動で日本語要約するサイト ghtrend を作りました。

Claude API + Next.js SSG + GitHub Actions の組み合わせで、完全自動・ほぼゼロコストのパイプラインが組めます。「定期的に外部データを取得 → AI で加工 → 静的サイトで配信」というパターンは他にも応用が効くと思うので、参考になれば幸いです。

https://ghtrend.jp

Discussion