@podmate/shorts-renderer

pm shorts（podmate-cli）の縦型ショート動画 描画エンジン（Remotion）。

ポッドキャスト音声から作った台本JSON（episode.json）を受け取り、9:16・1080×1920 の縦型字幕ショート動画（mp4）に描画する。 番組固有の値はコードに焼かず、--props=episode.json の data（PodcastShortData）として注入する＝完全データ駆動。

導入（npm から）

Remotion プロジェクトは「アプリ」であり import して使うライブラリではないため、init で手元に展開して使う（create-react-app 方式）：

npx @podmate/shorts-renderer init ~/podmate-shorts-renderer
cd ~/podmate-shorts-renderer
npm install                                  # Remotion 一式（数分）
pm shorts doctor --renderer-dir ~/podmate-shorts-renderer   # 接続確認・不足素材の案内

以降は podmate CLI（pip install podmate-cli）の pm shorts がこのディレクトリを叩く。使い方の全体像は pm shorts guide。

BGM（public/bgm/）とロゴ書体（public/fonts/）はライセンス上 npm に同梱していない。無くても動く（BGM は無音・書体は NotoSansJP にフォールバック）。入手手順は pm shorts doctor が案内する。

このREADMEは人間 / LLM 共用（概要・セットアップ・使い方・トラブルシュート）。 実装の詳細ガイド（命名・契約変更ルール・既知の罠など）は AGENTS.md を参照（LLM向け）。 podmate-traction（マーケ/記事/宣伝動画）から切り出した v1 パッケージ。マーケ用 SiteTour 等はあちらに残置し、ここはショート描画だけに集中する。

役割の棲み分け

• 能力（何が描けるか）＝ このパッケージ（Remotion）：使えるフォント・レイアウト・字幕/オチ文字の演出・アニメ・解像度。
• 選択（今回どう使うか）＝ podmate-cli（pm）：プリセット・色・既存フォントの選択。
• 内容（何を言うか）＝ pm ＋ AIエージェント：区間・フック文・字幕・タイミング。
• 判断 ＝ 人：どの30秒・フックOK・品質OK・公開。
• 契約は episode.json（PodcastShortData）1ファイルのみ。pm が書き、ここが読む（疎結合）。
• 詳細な責務分担: podmate-cli docs/plans/shorts-video-pipeline/responsibilities.md。

構成

src/
├── index.ts                  Remotion エントリ（registerRoot）
├── Root.tsx                  PodcastShort / PodcastShort-KnowFood48 を登録
├── fonts.ts                  字幕/タイトル用フォント（sans=NotoSansJP / serif=NotoSerifJP / logo=Corporate Logo[family名 CorporateLogoBold]）
├── brand.ts                  ブランドカラー定数（primary #DC725A 等）
└── podcast-short/
    ├── PodcastShort.tsx      描画本体（フック画像→本編→締め）。PodcastShortData 型もここが正
    ├── timeline.ts           FPS/解像度/尺算出（純粋ロジック）
    └── data/knowfood-48.ts   見本データ（#48・Studio プレビュー/動作確認用。参照素材は public/ に手動配置が必要）
public/                       素材置き場（pm shorts build が配置。git管理外）
├── recordings/  images/  fonts/CorporateLogo.ttf  bgm/
scripts/
├── make-speed-audio.sh       1.75倍速（ピッチ保持）音声生成
└── make-corporate-logo-ttf.py Corporate Logo を ttf 化（cmap format14 除去）
out/                          レンダリング出力（git管理外）

セットアップ / 前提条件

| 前提 | 内容 | |---|---| | Node.js + npx | Remotion の実行系 | | Remotion 4.0.452 / React 19.2.3 / TypeScript 5.9.3 | バージョン固定（package.json） | | Chromium / ffmpeg | Remotion が自前取得・同梱（追加インストール不要） | | ネットワーク（描画時） | Google Fonts（NotoSansJP/NotoSerifJP）を描画時に取得するため要オンライン | | Corporate Logo フォント | public/fonts/CorporateLogo.ttf が必要（scripts/make-corporate-logo-ttf.py で生成。無くても字幕は NotoSansJP にフォールバック） | | 素材 | public/recordings・public/images 等に音声・画像（通常は pm shorts build が配置） |

npm install   # Remotion 本体（Chromium/ffmpeg 同梱）を取得

動画の構造（#48 レシピ）

0 ───────► hookFrames ─────────────► ctaStart ────► end
[フック区間]   [本編区間]                 [締め区間]
hookImage全面  bodyImage背景            ctaImage
（文字込み画像） +TitleCard(タイトル)     （共通情報を焼き込み・上部空き）
              +LogoCard(番組ジャケ)     +teaser（オチ文字を Remotion が最前面に重ねる）
              +BlockWave(波形)          +BGM
              +Subtitle(字幕)

• 背景は hook/body/cta とも画像が標準（ChatGPT 等で生成）。theme.bgFrom/bgTo は画像が無い時のフォールバック（通常は見えない）。
• theme / captionStyle（スタイルプリセット）は「テキスト3層（字幕・タイトル・オチ文字）の雰囲気」にのみ効く。 背景には効かない。
• speed（1.75）でタイムライン圧縮・audioPreSped で音声は等速再生（声の高さそのまま）。

使い方（Quick Start）

# 推奨: podmate-cli 経由（pm が PODMATE_RENDERER_DIR=このディレクトリ を叩く）
pm shorts render --episode-json <episode.json>

# 直接（このパッケージ単体）
npx remotion render src/index.ts PodcastShort out/short.mp4 --props=<episode.json> --concurrency=4
npx remotion studio                 # プレビュー（PodcastShort-KnowFood48 が見本）

⚠️ メモリ運用：本解像度レンダー（ヘッドレス Chromium ×並列＋フォント取得）は重い。本レンダーは単独で実行し、確認は studio か低解像度（--scale=0.5）で。用済みプロセスは停止する（RAM 枯渇でPC再起動した実例あり）。

入力契約（episode.json / PodcastShortData の要約）

{ "data": PodcastShortData } を --props で渡す。主要フィールド（正確な型は src/podcast-short/PodcastShort.tsx を正とする）：

| フィールド | 役割 | |---|---| | audioFile | 結合済み音声（public/recordings/ 相対） | | totalDurationSec / speed / audioPreSped | 尺（等速基準）/ 圧縮率 / 音声が伸縮済みか | | hookImage / bodyImage / ctaImage | フック/本編背景/締め の画像（public/images/ 相対） | | artworkFile | 番組ジャケ（本編上部のロゴカード） | | hook { lines, durationSec, emoji? } | フック（画像が無い時のテロップ代替に使用） | | title { text, preset } | 本編タイトル（preset: card/pop/band） | | captions[] { text, from, to } | 字幕（等速基準秒） | | captionStyle { fill, stroke, strokeWidth, fontFamily, emphasis } | 字幕＋オチ文字の雰囲気（任意・未指定で既定） | | cta { title, sub, durationSec, teaser?, bgm? } | 締め（teaser=オチの問い・Remotion が重ねる。bgm 未指定で既定lofi・""で無音） | | theme { bgFrom, bgTo, accent, strokeColor } | 色（accent=波形/進捗、strokeColor=字幕フチ。bg は画像時フォールバック） | | punch? { text, from, to } | （任意）効かせたい一言の中央強調（区間 from/to） | | artworkSize? | （任意）番組ジャケの一辺px（未指定は本編背景の有無で自動） | | header? | （任意・非推奨）本編上部の番組ラベルピル。pm は出力しない方針（一律不要） |

任意フィールドは未指定で既定動作（後方互換）。theme/captionStyle の色は番組ごとに episode.json で与える（renderer は中立既定のみ持ち、番組固有色を焼き込まない）。

トラブルシューティング

| 症状 | 原因 | 対応 | |---|---|---| | カスタムフォント（Corporate Logo）が出ない | FontFace の CORS／Chromium の OTS が cmap format14 を弾く | public/fonts/CorporateLogo.ttf を scripts/make-corporate-logo-ttf.py（format14 除去・ttf化）で用意。読み込み失敗時は NotoSansJP に自動フォールバック | | 波形が音とズレる | 再生速度に波形サンプリング位置が同期していない | speed/audioPreSped を正しく設定（PodcastShort.tsx は playbackRate に合わせてサンプリング）。 | | レンダリング中にPCが重い/落ちる | 本解像度 Chromium ×並列＋フォント取得で RAM 枯渇 | 本レンダーは単独実行・確認は studio/--scale=0.5・Docker等の同時起動を避ける | | フォントが大量ネットワーク取得で遅い | Google Fonts を描画時に取得 | オンライン必須。fonts.ts は使う系統だけに絞ってある |

配布形態

• npm（一般ユーザー）：npx @podmate/shorts-renderer init で展開（冒頭の「導入」参照）。同梱物は package.json の files（bin/src/scripts/設定のみ。public/ の素材・生成物は同梱しない）。
• このリポジトリ（開発者）：clone → npm install → PODMATE_RENDERER_DIR=<このディレクトリ>。

関連リポジトリ

• podmate-cli — pm（このエンジンを叩く配管・CLI）
• podmate-next — Web 版プロダクト（ブランド・カタログ定数の正）

License: MIT（© coenoma llc） 最終更新: 2026-06-13