CC-VaultというClaude Code専用のキュレーションメディアを作った
Claude Codeの新機能が出るたびに色々なサイトを見るのが面倒くさいなと思って、ZennとQiitaのClaude Code記事をまとめるツール「CC-Vault」を作りました。実務でClaude Code使ってて同じような悩みを持つ人に刺さるかもしれません。
目次
作成の背景
実務でもClaudeCodeを手放せない状態です。
先日hooksが紹介されて久しいですが、今後も新機能が搭載された時に色々なサイトを見るのが面倒くさいなと感じました。
QiitaとZennにはAPIが提供されているので、タグ指定で記事を検索し提供できれば楽じゃない？と思ったのがキッカケです。
実際にできたもの
CC-Vault
Claude Codeに特化した情報提供プラットフォーム。複数の記事プラットフォームからClaude Code関連記事を収集・分析し、トレンドや人気記事をキュレーションして提供します。
CCはClaude Codeの略称
Vaultはぶっちゃけ適当ですが、保管庫的な意味合いで命名しました。
CCレモンって飲み物があったので、CC + ~~が良さそうだな〜くらいの緩い命名です。
技術的な話
Next.jsで作成し、Vercelにデプロイしています。
基本的にクライアントサイドの動きを実行させないように、クエリパラメータで記事の絞り込みや表示サイトの変更を行います。
キャッシュはISRを使用し、1時間ごとに再設定しています。これにより毎回APIを叩かずとも、1時間後に見たときは新しい記事が表示されるようになります。
Guides: ISR | Next.js
Learn how to create or update static pages at runtime with Incremental Static Regeneration.
本当はCloudflareへデプロイしたかったのですが、open-nextjsのビルド設定が上手くいかなかったのでやめました。
うまくいったら変えると思います。
Claude Codeのキュレーションメディアなので、コードも全部Claude Codeで作成しています。
カラーテーマはClaudeの色を尊重しほぼ同様のものにし、UIはとあるメディアを参考にさせていただきました。
別件ですが、参考にしたいUIをSingleFileなどでHTMLをそのまま吐かせたあと、Geminiにぶん投げてHTML + TailwindCSS CDN使って再現してといえばそっくり同じものが出てくるのは本当にドン引きです。
個人的に個人開発をするにあたっていつも大変なのがコードを書くのと、デザインを考えることです。 それがほとんど解消されるのは改めて生成AIの異様さを感じます。
今後の拡張性
今のところはこの辺りをやりたいなと思っています。
直接API叩くのではなく、一度DBを経由する
1時間ごと？のCron Jobを設定して、サイトへのアクセス数が増えないようにします。
今はISRでそこまで増えない仕組みにはなっていますが、それでもユーザーの数だけ開くたびに対象サイトへのリクエストが飛びます。
いくらAPIがあるからといって全員がリクエストする必要性はないので、supabaseやデプロイ先をCloudflare D1に変更してDBを構える想定です。
ウィークリーレポートページの作成
生成AIの変化が早すぎるので、今週、何があったっけ…をまとめたい。理想はここで生成AIの要約が欲しい。
同僚曰く2025年7月13日時点ではGemini Flash Liteがコスパ最強らしいので、そのときの料金形態や性能みて決めます。
対象サイトの拡充
現時点ではある程度プラットフォームとして情報が流れている、かつAPIなど情報取得手段が容易なものから選びました。
今後取得するかもしれないのはこのあたりです。基本的にタグやタイトルから記事が表示できるものを対象とします。
- note
- ハッカーニュース
- 海外でどんなふうに使われているか見たい。
- はてなブックマーク
- 企業や個人のブログを取得する唯一の手段？
- 調査が必要なのと、Zennや Qiitaの記事も掲載されるので重複排除は必須
- 公式ドキュメント
- リリースノートから引っ張ってくるのが現実的
おわりに
自分が欲しかったものを作ったら、同じような悩みを持つ人に刺さるかもしれないという気持ちで公開しました。
実際に使ってみて改善点が見つかったり、他にも便利な機能のアイデアがあれば随時アップデートしていきます。
何か要望があればTwitterの方でご連絡ください！