remotion-lecture-video-creator

Remotion Lecture Video Creator 🎬

remotion-lecture-video-creator は、シラバス、モジュール、またはテキストベースの教材を、Remotion フレームワーク（React + Web標準）を使用して、プログラムによるアニメーション教育ビデオ（Programmatic Educational Video）に変換します。

重いプロプライエタリソフトウェアを介して手動でビデオを編集する代わりに、教育者はコード（Video as Code）を通じて高品質な講義ビデオを直接生成・修正し、フレームごとにシームレスなアニメーションを実現し、バージョン管理とバッチレンダリングが可能です。

---

🌟 Remotion教育ビデオの主な機能

1. Video as Code（React & TypeScript）:

   • 各講義シーン（Scene）は独立したReactコンポーネントです。
   • Remotionの公式フック（useCurrentFrame、useVideoConfig、interpolate、spring）を使用して、滑らかで途切れのない物理アニメーションを実現します。

2. 2つの標準ビデオアスペクト比:

   • 水平16:9（1920x1080 @ 30fps）: LMS、YouTube、プロジェクター、教室のスマートTV向けの標準講義ビデオ形式。
   • 垂直9:16（1080x1920 @ 30fps）: TikTok、Instagram Reels、YouTube Shorts向けのマイクロラーニング／クイック教育形式。

3. 教育学的4幕構成（Standard 4-Act Lesson Arc）:

   • Act 1: フックと好奇心の刺激（フレーム0–900 / 0–30秒）: セッションタイトル、講師情報、学習目標（CPMK）、および現実の問題を提起する質問。
   • Act 2: コアコンセプトの解説（フレーム900–2700 / 30–90秒）: アニメーション付き概念カード、段階的なブロック図、高コントラストのキネティックタイポグラフィ。
   • Act 3: ケーススタディとライブビジュアルデモ（フレーム2700–4500 / 90–150秒）: シンタックスハイライト付きコード例、ステップバイステップのシミュレーション、または数式のアニメーション。
   • Act 4: 振り返りとチャレンジの呼びかけ（フレーム4500–5400 / 150–180秒）: 3つのキーポイントの要約、タイマー付きインタラクティブクイズ、LMSでの課題指示。

4. 充実した組み込み教育ビジュアルコンポーネント:

   • キネティックタイポグラフィ: タイトルと教材ポイントがバネ物理（spring physics）を使用して表示されます。
   • 進行時間バー: ビデオ下部のアニメーション時間進行バーが、教材の経過時間を視覚的に示します。
   • アニメーション概念カード: モダンなスタイルの定義カードで、柔らかな影とアクセントカラーを備えています。
   • オーディオとナレーションの同期: <Audio /> コンポーネントと、ナレーション音声の長さに応じた自動フレーム期間調整。

5. インスタントプレビューと高速MP4レンダリング:

   • インタラクティブプレビューモード: npx remotion preview でブラウザ上でRemotion Studioを開きます。教育者はタイムラインをフレーム単位で操作し、アニメーションをリアルタイムでテストできます。
   • ヘッドレスCLIレンダリング: npx remotion render コマンドで、完全なビデオをフルHDの .mp4 ファイルにレンダリングします。

---

📁 Remotion教育ビデオプロジェクトのファイル構造

Session_XX/04_Video_Pembelajaran/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts                  # Remotionエントリポイント
    ├── Root.tsx                  # Compositionの登録（16:9 & 9:16）
    ├── scenes/
    │   ├── 01_IntroScene.tsx     # Act 1: フックと学習目標（CPMK）
    │   ├── 02_ConceptScene.tsx   # Act 2: コア教材と図
    │   ├── 03_DemoScene.tsx      # Act 3: シミュレーション／ケーススタディ
    │   └── 04_OutroScene.tsx     # Act 4: 要約と締めくくりのクイズ
    └── components/
        ├── ProgressBar.tsx       # 画面上の時間経過インジケーター
        ├── ConceptCard.tsx       # キネティック定義カード
        └── LessonTitle.tsx       # 階層的なアニメーションタイトル

---

📐 Remotion教育ビデオの基本コンポーネントテンプレート

1. src/Root.tsx

import React from 'react';
import { Composition } from 'remotion';
import { LectureComposition } from './LectureComposition';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* 16:9 ランドスケープフルHDビデオ - 3分間（5400フレーム @ 30fps） */}
      <Composition
        id="LectureVideo-16x9"
        component={LectureComposition}
        durationInFrames={5400}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          courseTitle: "ソフトウェア工学",
          sessionTitle: "セッション03: カプセル化とモジュール性の原則",
          instructorName: "Lensetek講師チーム",
        }}
      />
    </>
  );
};

2. src/scenes/01_IntroScene.tsx

import React from 'react';
import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';

export const IntroScene: React.FC<{ courseTitle: string; sessionTitle: string }> = ({
  courseTitle,
  sessionTitle,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // バネ物理を使用したタイトルアニメーション
  const titleProgress = spring({
    frame,
    fps,
    config: { damping: 12 },
  });

  const titleScale = interpolate(titleProgress, [0, 1], [0.85, 1]);
  const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);

  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#0f172a', // Slate 900
        justifyContent: 'center',
        alignItems: 'center',
        color: '#ffffff',
        fontFamily: 'Segoe UI, system-ui, sans-serif',
        padding: 80,
      }}
    >
      <div
        style={{
          transform: `scale(${titleScale})`,
          opacity: titleOpacity,
          textAlign: 'center',
        }}
      >
        <span
          style={{
            backgroundColor: '#2563eb',
            color: '#ffffff',
            padding: '8px 20px',
            borderRadius: 99,
            fontSize: 24,
            fontWeight: 700,
            letterSpacing: 2,
            textTransform: 'uppercase',
          }}
        >
          {courseTitle}
        </span>
        <h1
          style={{
            fontSize: 68,
            fontWeight: 900,
            marginTop: 32,
            marginBottom: 16,
            lineHeight: 1.2,
          }}
        >
          {sessionTitle}
        </h1>
        <p style={{ fontSize: 28, color: '#94a3b8' }}>
          Outcome-Based Education • 学習目標 CPMK-2
        </p>
      </div>
    </AbsoluteFill>
  );
};

---

🚀 プレビュー＆レンダリングコマンド

1. Remotion Studioを起動（ブラウザでプレビュー）:

   npx remotion preview
   

2. ビデオをMP4ファイルにレンダリング:

   npx remotion render src/index.ts LectureVideo-16x9 out/video-kuliah-sesi-03.mp4