lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

使用タイミング

このスキルは、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/ フォルダに配置します。

staticFile() を使用して public/ フォルダ内のファイルを参照します。

<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

30fps の場合、--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 を参照してください。

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

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

高度なコンポジション

スチル、フォルダ、デフォルトプロパティの定義方法や、コンポジションのネスト方法については、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 を参照してください。

キャンバス内の HTML

<HtmlInCanvas> を使用して HTML を <canvas> にレンダリングし、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 を使用して AI 生成のナレーションを Remotion コンポジションに追加する方法については、rules/voiceover.md を参照してください。