物語性のあるメディアを、ジャンルの壁を越えて記録する。
アニメ、映画、ドラマ、本、漫画、ゲーム — 好きなコンテンツを1つのアプリでまとめて管理できるWebアプリケーションです。
本番環境: https://recolly.net
アニメはAnilist、映画はFilmarks、本は読書メーター、ゲームはPULSE...。コンテンツを記録するサービスはジャンルごとに分断されています。
しかし「物語が好きな人」は、ジャンルを横断してコンテンツを楽しんでいます。アニメを観た後に原作漫画を読み、映画化されたらそれも観る。そういう体験を1つの場所で記録・振り返りたいという課題を解決するために、Recollyを開発しました。
基本機能は、これから先も無料で使えます。
Recollyの記録・ライブラリ・検索・おすすめは、永久に無料で利用できます。将来、詳細統計やデータエクスポートのような付加価値機能のみ有料化する可能性はありますが、あなたの日々の記録を人質にすることはありません。
4つの外部APIと連携し、6ジャンルの作品をキーワード1つで横断検索できます。
| ジャンル | 外部API |
|---|---|
| 映画・ドラマ | TMDB |
| アニメ・漫画 | AniList (GraphQL) |
| 本 | Google Books |
| ゲーム | IGDB (Twitch認証) |
APIにない作品は手動登録フォームから追加可能です。
- ステータス管理（視聴中 / 完了 / 中断 / 予定）
- 10点満点の評価
- 話数・巻数の進捗トラッキング
- ステータス変更時の自動処理（完了日の自動セット、話数の自動同期）
- ステータス別・ジャンル別フィルタ
- 更新日・評価・タイトルでのソート
- ページネーション（URLクエリパラメータと同期）
- 進行中コンテンツの一覧表示
- ワンクリック進捗更新（「+1話」「+1巻」「観た」「読了」「クリア」）
- メール + パスワード認証（devise）
- Google OAuth（OmniAuth）
- アカウント設定画面（OAuth連携管理、パスワード設定）
| レイヤー | 技術 | 選定理由 |
|---|---|---|
| バックエンド | Ruby 3.3 / Rails 8（APIモード） | 高速なAPI開発、豊富なエコシステム |
| フロントエンド | React 19 / TypeScript / Vite | 型安全なSPA開発、高速なHMR |
| データベース | PostgreSQL 16 | 信頼性、条件付きインデックス等の高度な機能 |
| キャッシュ | Redis 7（開発）/ Solid Cache（本番予定） | 外部API検索結果のキャッシュ |
| 認証 | devise + OmniAuth | セッションCookie認証、OAuth拡張が容易 |
| テスト（BE） | RSpec | request spec中心の統合テスト |
| テスト（FE） | Vitest + React Testing Library | 高速なコンポーネントテスト |
| リンター | RuboCop / ESLint + Prettier | コード品質の自動担保 |
| インフラ | AWS（EC2, RDS, S3, CloudFront） | 本番環境のフル構成 |
| IaC | Terraform | インフラのコード管理 |
| CI/CD | GitHub Actions | lint, test, security scan, 自動デプロイ |
| コードレビュー | Claude Code Actions | AIによる自動コードレビュー |
| 開発環境 | Docker Compose | 環境差異のないローカル開発 |
┌─────────────┐
│ CloudFront │
│ (CDN) │
└──────┬──────┘
│
┌─────────────┼─────────────┐
│ │ │
┌──────▼──────┐ ┌───▼────┐ ┌──────▼──────┐
│ S3 Bucket │ │ EC2 │ │ │
│ (React SPA) │ │(Rails) │ │ ブラウザ │
└─────────────┘ └───┬────┘ └─────────────┘
│
┌────────────┼────────────┐
│ │ │
┌──────▼──────┐ ┌──▼───┐ ┌──────▼──────┐
│ RDS │ │Redis │ │ 外部API │
│(PostgreSQL) │ │ │ │ TMDB/AniList │
└─────────────┘ └──────┘ │ Google Books │
│ IGDB │
└──────────────┘
- APIモード（HTMLレンダリングなし、JSONレスポンスのみ）
- deviseによるセッションCookie認証 + OmniAuth OAuth
- 外部APIクライアントはアダプタパターンで統一インターフェース化（ADR-0011）
- thin controller原則（ビジネスロジックはサービスオブジェクトに分離）
- TypeScriptによる型安全な開発
- CSS Modules + グローバルCSS変数によるデザインシステム
- AuthContextによるセッション管理（Cookie自動送信）
- 共通UIコンポーネント（Button, Typography, Divider等）を全ページで再利用
RecollyはClaude Codeを開発の中核に据えたAI駆動開発で構築しています。
SDD（仕様駆動開発） — 全ての実装は仕様書から始まります。
仕様書作成 → Issue起票 → 実装プラン作成 → TDD実装 → コードレビュー → マージ
各フェーズでClaude Codeの専用スキル（superpowers）を活用しています。
| フェーズ | 使用スキル | 内容 |
|---|---|---|
| 要件定義 | brainstorming | 対話形式で要件を深掘り、設計仕様書を作成 |
| 計画 | writing-plans | 仕様書からTDD形式の実装プランを生成 |
| 実装 | subagent-driven-development | タスクごとにサブエージェントを起動、2段階レビュー |
| テスト | test-driven-development | RED → GREEN → REFACTOR サイクル |
| レビュー | Claude Code Actions | PRに対する自動コードレビュー（GitHub Actions経由） |
全てのPRにClaude Code Reviewが自動実行されます。レビュー観点:
- CLAUDE.md準拠（コーディング規約、命名規則、ファイルサイズ）
- バグ・セキュリティ（SQLインジェクション、XSS、認証漏れ）
- パフォーマンス（N+1クエリ、不要な再レンダリング）
- テストカバレッジ
技術選定時には必ず「なぜその技術を選んだか」をADRに記録し、将来の自分やチームメンバーが判断の背景を理解できるようにしています。
全ての技術選定はADR（Architecture Decision Record）として記録しています。「何を選んだか」だけでなく「なぜ選んだか」「他に何を検討したか」を残すことで、設計の意図を将来にわたって参照可能にしています。
# 全サービス起動（PostgreSQL + Redis + Rails API + React）
docker compose up
# バックエンドのみ
docker compose up backend- React: http://localhost:5173
- Rails API: http://localhost:3000
- ヘルスチェック: http://localhost:3000/up
# バックエンド（RSpec）
docker compose run --rm -e RAILS_ENV=test backend bundle exec rspec
# フロントエンド（Vitest）
docker compose run --rm frontend npm testdocker compose run --rm backend bundle exec rubocop
docker compose run --rm frontend npm run lintdocker compose run --rm backend bin/rails db:create
docker compose run --rm backend bin/rails db:migrate
docker compose run --rm backend bin/rails db:seedrecolly/
├── backend/ Rails API
│ ├── app/
│ │ ├── controllers/api/v1/ APIコントローラー
│ │ ├── models/ モデル（User, Work, Record等）
│ │ └── services/ サービスオブジェクト
│ └── spec/ RSpecテスト
├── frontend/ React + TypeScript
│ └── src/
│ ├── components/ 共通UIコンポーネント
│ ├── contexts/ React Context（認証等）
│ ├── lib/ API通信・型定義
│ └── pages/ ページコンポーネント
├── infra/ Terraform（AWS設定）
├── docs/
│ ├── adr/ 設計判断記録（ADR）
│ └── superpowers/ 仕様書・実装プラン
├── .github/ GitHub Actions（CI + Claude Code Review）
├── CLAUDE.md プロジェクトルール
└── docker-compose.yml
| 種類 | リンク |
|---|---|
| プロダクト設計仕様書 | docs/superpowers/specs/2026-03-20-recolly-design.md |
| プロジェクトルール | CLAUDE.md |
| 設計判断記録 | docs/adr/ |