everything-claude-code/docs/ja-JP/skills/remotion-video-creation/rules/sequencing.md at d7a3ccd07a7fab4b48be21637100bd93b6969821

mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-06-13 11:41:22 +08:00

Files

T

Claude 174e31b3fc feat(ja-JP): add skill sub-reference translations (angular, remotion, etc.)

Translated 85 skill sub-reference files to achieve full parity with
the English source:

- skills/angular-developer/references/ — 35 files (all references)
- skills/remotion-video-creation/rules/ — 28 files (all rules)
- skills/tinystruct-patterns/references/ — 5 files
- skills/openclaw-persona-forge/references/ — 6 files
- skills/skill-comply/prompts/ — 3 files
- skills/lead-intelligence/agents/ — 4 files
- skills/brand-voice/references/ — 1 file
- skills/frontend-slides/ — 2 files
- hooks/memory-persistence/README.md — 1 file

English source parity: 0 missing files (excluding rules/zh/, internal
docs, and experimental examples absent from zh-CN)

2026-05-18 06:15:26 +09:00

2.7 KiB

Raw Blame History

name, description, metadata

name

description

metadata

sequencing

Remotionのシーケンスパターン - アイテムの遅延、トリム、長さの制限

tags
sequence, series, timing, delay, trim

<Sequence> を使用して、タイムライン上で要素が表示されるタイミングを遅らせます。

import { Sequence } from "remotion";

const {fps} = useVideoConfig();

<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
  <Title />
</Sequence>
<Sequence from={2 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
  <Subtitle />
</Sequence>

デフォルトでは、コンポーネントをabsolute fillの要素でラップします。アイテムをラップしない場合は layout プロパティを使用します：

<Sequence layout="none">
  <Title />
</Sequence>

プリマウント

これはコンポーネントが実際に再生される前にタイムラインに読み込みます。 <Sequence> には必ずプリマウントを設定してください！

<Sequence premountFor={1 * fps}>
  <Title />
</Sequence>

Series

要素が重複なく順番に再生される場合は <Series> を使用します。

import {Series} from 'remotion';

<Series>
  <Series.Sequence durationInFrames={45}>
    <Intro />
  </Series.Sequence>
  <Series.Sequence durationInFrames={60}>
    <MainContent />
  </Series.Sequence>
  <Series.Sequence durationInFrames={30}>
    <Outro />
  </Series.Sequence>
</Series>;

<Sequence> と同様に、layout プロパティが none に設定されていない限り、<Series.Sequence> 使用時にアイテムはデフォルトでabsolute fill要素でラップされます。

オーバーラップありのSeries

シーケンスを重ねるには負のオフセットを使用します：

<Series>
  <Series.Sequence durationInFrames={60}>
    <SceneA />
  </Series.Sequence>
  <Series.Sequence offset={-15} durationInFrames={60}>
    {/* SceneAが終わる15フレーム前に開始 */}
    <SceneB />
  </Series.Sequence>
</Series>

Sequence内のフレーム参照

Sequence内では、useCurrentFrame() はローカルフレーム（0から開始）を返します：

<Sequence from={60} durationInFrames={30}>
  <MyComponent />
  {/* MyComponent内では、useCurrentFrame()は60-89ではなく0-29を返す */}
</Sequence>

ネストされたSequence

複雑なタイミングのためにSequenceをネストできます：

<Sequence from={0} durationInFrames={120}>
  <Background />
  <Sequence from={15} durationInFrames={90} layout="none">
    <Title />
  </Sequence>
  <Sequence from={45} durationInFrames={60} layout="none">
    <Subtitle />
  </Sequence>
</Sequence>

2.7 KiB Raw Blame History