EN | JA

Remotion Studio Monorepo

Remotion + React で動画プロジェクトを構築するための テンプレート専用 モノレポです。apps/_template から新規アプリを作成し、独立して開発できます。

クイックスタート

# クローン & インストール
git clone git@github.com:Takamasa045/remotion-studio-monorepo.git
cd remotion-studio-monorepo && pnpm install

# 新規プロジェクト作成
pnpm create:project

# Forge Studio ダッシュボード起動（Web）
pnpm forge studio

# 開発開始
cd apps/<name> && pnpm dev

3Dテンプレート:

pnpm create:project -- -t 3d

まずはこれだけ（3分で体験）

# 1) 鍛冶場（Webダッシュボード）を開く
pnpm forge studio

# 2) 新しい作品を作る（2D）
pnpm create:project

# 3) 開発を開始
cd apps/<name> && pnpm dev

# 4) 仕上げにレンダー
pnpm forge render --app <name> --composition <id>

render 成功時は、ブラウザで祝賀ページ（Confetti + 花火 + Achievement）が開きます。

Forgeコマンド早見表

UIでできる作品管理

• 主操作付きカード: 各カードは「作品を見る」「Devを開く」「初回Render」など次の一手を先に出します
• 管理パネル: Renders / Dev / Meta の重い操作は右側パネルへ集約し、一覧を見やすく保ちます
• はじめてガイド: 閉じられる短い案内で「見る / 管理パネル / 初回Render」をすぐ把握できます
• 言語切替: ヘッダー右上から日本語 / English を切り替えられます
• ラベル付きフィルタ: 検索、カテゴリ、状態、並び順で見たい作品に素早く寄れます

「ターミナルに戻らないと何もできない」を減らし、まずUIで制作フローを回せる設計です。

おすすめ導線（遊び心あり）

1. pnpm forge studio でカードを眺めて今日作る作品を決める。
2. pnpm create:project で1本追加する。
3. 各カードの主操作で、次にやるべき作業へそのまま進む。
4. 詳細操作が必要になったら管理パネルを開く。
5. ターミナル主導に切り替えたいときは cd apps/<name> && pnpm dev や pnpm forge render --app <name> --composition <id> を使う。
6. 祝賀演出を見て、次の1本を作る。

前提条件

• Node.js 22.17.0
• pnpm 10+
• ffmpeg (レンダリングに必要)

インストールガイド

# バージョン確認
node -v && pnpm -v && ffmpeg -version

# ffmpeg インストール
# macOS: brew install ffmpeg
# Windows: choco install ffmpeg
# Linux: apt/yum install ffmpeg

特徴

• pnpm workspaces によるモノレポ運用
• pnpm Catalog による依存関係の一元管理
• 2D・3D テンプレート 搭載（apps/_template、apps/3D-template）
• HTML-in-canvas サンプル 搭載（Remotion 4.0.455+、apps/examples/html-in-canvas）
• Forge Studio ダッシュボード（pnpm forge studio）で作品管理
• 生産性スクリプト (プロジェクト作成、レンダー補助、アップグレード自動化)
• オフライン参照 (docs/remotion-reference.md)
• タイムライン/アニメ/2D/3D/WebGL のユーティリティ群
• オプションで CI/CD ワークフロー

依存関係の管理（pnpm Catalog）

このモノレポでは pnpm Catalog を使用して、React、Remotion、TypeScript などの共通依存関係のバージョンを一元管理しています。

仕組み

1. pnpm-workspace.yaml でバージョンを定義:

yaml catalog: react: ^18.3.1 react-dom: ^18.3.1 remotion: 4.0.x typescript: ^5.6.3 # ... すべての @remotion/* パッケージ

1. 各 package.json で参照:

json { "dependencies": { "react": "catalog:", "react-dom": "catalog:", "remotion": "catalog:" } }

1. 一箇所でバージョンを更新: pnpm-workspace.yaml の catalog を編集後、以下を実行: bash pnpm install

メリット

• 単一の信頼できる情報源: モノレポ全体で同じバージョンを使用
• 簡単な更新: catalog で一度変更すれば、pnpm install で全体を更新
• 一貫性: アプリ間でのバージョン不一致を防止
• 型安全性: TypeScript と React のバージョンが常に整合

構成

remotion-studio-monorepo/
├── apps/
│   ├── studio/             # Forge Studioダッシュボード（Next.js）
│   ├── _template/          # 基本テンプレート
│   └── 3D-template/        # Three.js テンプレート
├── packages/               # (任意の共有パッケージ)
├── scripts/                # CLIツール
└── docs/                   # ドキュメント

ドキュメント

AI作業は Skill-First を標準とします。MCPは必要時のみ任意で利用してください（docs/mcp-setup.ja.md）。

推奨: Remotion 固有のガイダンスを得るために、Codex/agents 環境へ remotion-best-practices スキルを別途インストールしてください。このスキルはリポジトリ外にあるため、この repo を clone しただけでは導入されません。

推奨セットアップ:

```bash

remotion-dev/skills からスキルを導入

npx skills install remotion-dev/skills

その後に利用: remotion-best-practices

導入済み Remotion スキルの更新

pnpm skills:remotion:update ```

トラブルシューティング

コマンドが見つからない? → @remotion/cli を追加: pnpm -w add -D @remotion/cli

サブモジュールの問題? → git submodule update --init --recursive

詳細なヘルプ → docs/troubleshooting.ja.md 参照

ライセンス

MIT License — このリポジトリは テンプレートのみ 提供。Remotion は npm 経由で別途インストールします。

注: これは 非公式 プロジェクトで、Remotion との提携はありません。