プロジェクトの作成

React コンポジション、メディア、npm の依存関係を置くフォルダを初期化します。Celesta には、ひな形のプレビューと書き出しに必要なランタイムが含まれます。

アプリから

File Create New Project…、ツールバーの Create New Project…、または macOS の ⌘ N / Windows・Linux の Ctrl N を使います。プロジェクトのフォルダを選びます。選択画面で新規作成もできます。Celesta がそのフォルダを初期化し、film.tsx を開きます。

コマンドラインから

PATH にある celesta-editor に、--init とフォルダ名を渡します。フォルダを省略すると現在のディレクトリを初期化します。

celesta-editor --init my-video
cd my-video
celesta-editor film.tsx
celesta-exporter --react film.tsx output.mp4

celesta-editor --init

デスクトップ版の実行ファイル名は Celesta と Celesta-export です（Windows では .exe 付き）。celesta-editor と celesta-exporter の代わりにインストール先のパスを使ってください。必要に応じて生成されたスクリプト内も変更します。

macOS

このコマンドは /Applications にアプリをインストールした場合の例です。必要に応じてパスを変更してください。

"/Applications/Celesta.app/Contents/MacOS/Celesta" --init my-video

Windows

PowerShell を使い、C:\path\to\Celesta をアプリのインストール先または展開先に置き換えてください。インストーラーは Celesta を PATH に追加しません。

& "C:\path\to\Celesta\Celesta.exe" --init my-video

ソースビルドの場合は、先に React ランタイムをビルドし、リポジトリのルートから cargo run -p celesta-editor --release -- --init my-video を実行します。

初期化で生成されるもの

film.tsx：1920 × 1080、30 fps、5 秒のコンポジション。
package.json：プレビュー・書き出し・型検査のスクリプトと、開発依存として TypeScript ^7.0.2 を持つ非公開プロジェクト。
tsconfig.json と .celesta/：Celesta の同梱ランタイムに対応する設定と型宣言。
.gitignore：node_modules/ と output.mp4 を除外します。生成される .celesta/ ディレクトリは自身を除外します。

プレビューと書き出しはパッケージをインストールせずに動作します。プロジェクトの TypeScript コンパイラを使うには、Node.js と pnpm を別途インストールし、プロジェクトのフォルダで以下を実行します。

pnpm install
pnpm typecheck

npm の依存関係を追加

外部パッケージは、インポートするプロジェクトにインストールします。Celesta リポジトリの外にあるプロジェクトでは、そのフォルダで実行します。

pnpm add ag-psd

プレビューと書き出しでは、読み込み元のプロジェクトの node_modules から外部パッケージを解決します。すべての @celesta/* パッケージと React はランタイムに含まれているため、外部プロジェクトに追加する必要はありません。

Node の素材準備スクリプトも同じ依存関係を使います。package.json の隣に prepare-assets.mjs として保存し、同じフォルダに portrait.psd を置きます。

import { readFileSync, writeFileSync } from 'node:fs';
import { readPsd } from 'ag-psd';

const { width, height } = readPsd(
  readFileSync(new URL('./portrait.psd', import.meta.url)),
  { skipLayerImageData: true, skipCompositeImageData: true, skipThumbnail: true },
);
writeFileSync(
  new URL('./portrait-info.json', import.meta.url),
  JSON.stringify({ width, height }),
);

node prepare-assets.mjs

生成された JSON は通常どおりコンポジションでインポートします。直接実行する Node スクリプトは自分でインストールした Node.js を、コンポジションの評価はアプリ同梱の Node.js を使います。.ts スクリプトには、TypeScript の型除去に対応した Node.js、またはプロジェクトにインストールした TypeScript ランナーを使ってください。

リポジトリ内のサンプルの依存関係

examples/ 内の React サンプルは pnpm ワークスペースに属します。リポジトリのルートで pnpm install を実行し、必要なサンプルに依存関係を追加します。

pnpm --dir examples/versus add ag-psd
cargo run -p celesta-editor --release -- examples/versus/film.tsx
cargo run -p celesta-exporter --release -- --react examples/versus/film.tsx output.mp4

サンプルのマニフェストはローカルの Celesta パッケージに workspace:* を使い、Node のツールからもインポートを解決できます。Cargo コマンドを実行する前にソースビルドの準備を済ませてください。

最初の React コンポジション、プレビュー操作、MP4 の書き出しへ進みましょう。