Slides を作成する

OpenPress の slide workspace は、大きな layout wrapper で組み立てるものではありません。現在の方向性は、まず再利用可能な template を定義し、CLI または Workbench がその template を新しい slide source folder にコピーする形です。

Template 内部では Slide、Frame、Text、Line、MediaObject などの core objects を直接組み合わせます。視覚スタイルは theme CSS に置き、編集可能な文字は Text children に置き、固定配置は box、フロー配置は Frame layout を使います。

Step 1: Workspace を初期化する

npm create @open-press@latest <project-name> -- --type slides

これは 16:9 page geometry の slide Press を作成します。OpenPress の slide coordinates は 1920 x 1080 の base canvas を使います。

Step 2: press.tsx は slide 登録に集中させる

press/<slug>/press.tsx はシンプルに保ちます。Deck の順序を記述し、各 slide の実際の layout は slide source file に置きます。

import { Press, Slide } from "@open-press/core";

export default function SlidePress() {
  return (
    <Press slug="slide" title="Deck Title" type="slides" page="slide-16-9">
      <Slide id="cover" />
      <Slide id="agenda" />
      <Slide id="statement" />
    </Press>
  );
}

Step 3: Template から slide を作成する

Template は press/<slug>/slide-style/manifest.json に登録します。Slide を追加すると、CLI は slide-style/templates/<template>/ から slides/<id>/ に template をコピーします。

node packages/core/engine/cli.mjs slide . add intro --press slide --template cover

一般的な構造：

press/slide/
  press.tsx
  theme/default.css
  slide-style/
    manifest.json
    theme/default.css
    templates/
      cover/slide.tsx
      agenda/slide.tsx
  slides/
    intro/slide.tsx

slide-style/theme/default.css は template package の元スタイルです。Workspace にコピーまたは同期された後、実際の deck は press/<slug>/theme/default.css を使用します。

Step 4: Core objects で slide source を書く

Slide source は core objects を直接使います。編集可能な内容を抽象 wrapper の props に隠さないでください。

import { Frame, Line, Slide, Text } from "@open-press/core";

export default function CoverSlide() {
  return (
    <Slide id="cover" className="op-source-deck-slide">
      <Frame frameKey="canvas" chrome={false} className="op-source-deck-canvas">
        <Text as="p" label="date" box={{ x: 100, y: 80 }} className="op-source-deck-date">
          26 JUNE 2024
        </Text>
        <Text as="h1" label="title" box={{ x: 100, y: 360, w: 1155 }} className="op-source-deck-title">
          A line is length without breadth.
        </Text>
        <Line label="red-rule" box={{ x: 100, y: 774, w: 270, h: 4 }} className="op-source-deck-red-rule" />
      </Frame>
    </Slide>
  );
}

Step 5: 検証する

npm run build

ローカルで preview する場合：

npm run dev:workspace

Object identity、label、box、Frame layout の規則は Core Object API を参照してください。