remotion-best-practices

使用するタイミング

Remotion のコードを扱う際は、このスキルを使用してドメイン固有の知識を得てください。

新しいプロジェクトのセットアップ

既存の Remotion プロジェクトがない空のフォルダーまたはワークスペースでは、次のコマンドでひな形を作成してください。

npx create-video@latest --yes --blank --no-tailwind my-video

my-video を適切なプロジェクト名に置き換えてください。

動画のデザイン

useCurrentFrame() と interpolate() を使ってプロパティをアニメーションさせます。Easing を使ってアニメーションのタイミングをカスタマイズします。

import { useCurrentFrame, Easing } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

CSS トランジションやアニメーションは禁止です。正しくレンダリングされません。
Tailwind のアニメーションクラス名は禁止です。正しくレンダリングされません。

アセットはプロジェクトのルートにある public/ フォルダーに配置します。

public/ フォルダー内のファイルを参照するには、staticFile() を使用します。

<Img> コンポーネントを使って画像を追加します。

import { Img, staticFile } from "remotion";

export const MyComposition = () => {
  return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};

@remotion/media の <Video> コンポーネントを使って動画を追加します。

import { Video } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};

@remotion/media の <Audio> コンポーネントを使って音声を追加します。

import { Audio } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Audio src={staticFile("audio.mp3")} />;
};

アセットはリモート URL から参照することもできます。

import { Video } from "@remotion/media";

export const MyComposition = () => {
  return <Video src="https://remotion.media/video.mp4" />
};

コンテンツの表示を遅らせるには、<Sequence> で囲み、from を使用します。 要素の表示時間を制限するには、<Sequence> の durationInFrames を使用します。 <Sequence> はデフォルトで絶対配置の塗りつぶしになります。インラインコンテンツには layout="none" を使用します。

import { Sequence } from "remotion";

export const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Title</div>;
};

export const Subtitle = () => {
  return <div>Subtitle</div>;
};

const Main = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Sequence>
        <Background />
      </Sequence>
      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
        <Title />
      </Sequence>
      <Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
}

動画の幅、高さ、fps、再生時間は src/Root.tsx で定義します。

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={100}
      fps={30}
      width={1080}
      height={1080}
    />
  );
};

メタデータは動的に計算することもできます。

import { Composition, CalculateMetadataFunction } from "remotion";
import { MyComposition, MyCompositionProps } from "./MyComposition";

const calculateMetadata: CalculateMetadataFunction<
  MyCompositionProps
> = async ({ props, abortSignal }) => {
  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
    signal: abortSignal,
  }).then((res) => res.json());

  return {
    durationInFrames: Math.ceil(data.duration * 30),
    props: {
      ...props,
      videoUrl: data.url,
    },
    width: 1080,
    height: 1080,
  };
};

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      fps={30}
      width={1080}
      height={1080}
      defaultProps={{ videoId: "abc123" }}
      calculateMetadata={calculateMetadata}
    />
  );
};

プレビューの開始

Remotion Studio を起動して動画をプレビューします。

npx remotion studio

オプション：1 フレームのレンダリングチェック

CLI で 1 フレームをレンダリングし、レイアウト、色、タイミングを簡単に確認できます。
簡単な編集、純粋なリファクタリング、または Studio や過去のレンダリングで十分に確認できている場合は省略してください。

npx remotion still [composition-id] --scale=0.25 --frame=30

30 fps の場合、--frame=30 は 1 秒の位置です（--frame は 0 から始まります）。

キャプション

キャプションや字幕を扱う場合は、詳細について ./rules/subtitles.md ファイルを読み込んでください。

FFmpeg の使用

動画のトリミングや無音の検出など、一部の動画処理には FFmpeg を使用します。詳細については、./rules/ffmpeg.md ファイルを読み込んでください。

無音の検出

動画または音声ファイル内の無音区間を検出してトリミングする必要がある場合は、./rules/silence-detection.md ファイルを読み込んでください。

音声の可視化

音声を可視化する必要がある場合（スペクトラムバー、波形、低音に反応するエフェクトなど）は、詳細について ./rules/audio-visualization.md ファイルを読み込んでください。

効果音

効果音を使用する必要がある場合は、詳細について ./rules/sfx.md ファイルを読み込んでください。

3D コンテンツ

Three.js と React Three Fiber を使った Remotion の 3D コンテンツについては、rules/3d.md を参照してください。

高度な音声機能

トリミング、音量、速度、ピッチなどの高度な音声機能については、rules/audio.md を参照してください。

動的な再生時間、寸法、データ

コンポジションの再生時間、寸法、props を動的に設定する方法については、rules/calculate-metadata.md を参照してください。

高度なコンポジション

静止画やフォルダー、デフォルトの props を定義する方法、およびコンポジションをネストする方法については、rules/compositions.md を参照してください。

Google Fonts

Remotion でフォントを読み込む推奨方法です。Google Fonts の読み込み方については、rules/google-fonts.md を参照してください。

ローカルフォント

ローカルフォントの読み込み方については、rules/local-fonts.md を参照してください。

音声の再生時間の取得

Mediabunny を使って音声ファイルの再生時間を秒単位で取得する方法については、rules/get-audio-duration.md を参照してください。

動画の寸法の取得

Mediabunny を使って動画ファイルの幅と高さを取得する方法については、rules/get-video-dimensions.md を参照してください。

動画の再生時間の取得

Mediabunny を使って動画ファイルの再生時間を秒単位で取得する方法については、rules/get-video-duration.md を参照してください。

GIF

Remotionのタイムラインと同期してGIFを表示する方法については、rules/gifs.mdをご覧ください。

高度な画像の扱い

画像のサイズ設定と配置、動的な画像パス、画像の寸法の取得については、rules/images.mdをご覧ください。

ライトリーク

@remotion/light-leaks を使ったライトリークのオーバーレイ効果については、rules/light-leaks.mdをご覧ください。

Lottieアニメーション

RemotionにLottieアニメーションを埋め込む方法については、rules/lottie.mdをご覧ください。

canvas内のHTML

<HtmlInCanvas> を使って <canvas> にHTMLをレンダリングし、2DまたはWebGLエフェクトを適用する必要がある場合は、rules/html-in-canvas.mdをご覧ください。

DOMノードの測定

RemotionでDOM要素の寸法を測定する方法については、rules/measuring-dom-nodes.mdをご覧ください。

テキストの測定

テキストの寸法の測定、コンテナに合わせたテキストの調整、オーバーフローの確認については、rules/measuring-text.mdをご覧ください。

高度なシーケンス制御

シーケンス制御の応用パターン（遅延、トリミング、アイテムの再生時間の制限）については、rules/sequencing.mdをご覧ください。

TailwindCSS

RemotionでTailwindCSSを使用する方法については、rules/tailwind.mdをご覧ください。

テキストアニメーション

タイポグラフィとテキストアニメーションのパターンについては、rules/text-animations.mdをご覧ください。

高度なタイミング制御

interpolate とベジェイージング、スプリングを使った高度なタイミング制御については、rules/timing.mdをご覧ください。

トランジション

シーンのトランジションパターンについては、rules/transitions.mdをご覧ください。

透過動画

透過背景の動画をレンダリングする方法については、rules/transparent-videos.mdをご覧ください。

トリミング

アニメーションの冒頭や末尾をカットするトリミングのパターンについては、rules/trimming.mdをご覧ください。

高度な動画の扱い

動画の埋め込みに関する高度な知識（トリミング、音量、速度、ループ、ピッチ）については、rules/videos.mdをご覧ください。

パラメーター化された動画

Zodスキーマを追加してコンポジションをパラメーター化する方法については、rules/parameters.mdをご覧ください。

マップ

フライオーバーが少ないシンプルなマップには、静的なマップ画像の使用をご検討ください。 アニメーション付きのルートやフライオーバーを含む複雑なマップには、マップのルールを読み込んでください：rules/maplibre.md

ナレーション

ElevenLabs TTSを使ってRemotionのコンポジションにAI生成のナレーションを追加する方法については、rules/voiceover.mdをご覧ください。

---

クレジットと帰属表示

このスキルは、 remotion-dev による素晴らしい取り組みを基にしています。

元のリポジトリ：https://github.com/remotion-dev/skills

このスキルコレクションの形成に役立った、寛大なオープンソースへの貢献をしてくださった remotion-dev に心より感謝します。 このスキルコレクション向けに webconsulting.at が改変しました