OpenPress

Start here

はじめに

スライド、ソースディレクトリ、またはクリエイティブな skill から始めましょう。エージェントに OpenPress Workspace を作成させるか、CLI を直接実行します。

前提条件： 環境に Node.js 20+ と npm および npx がインストールされていることを確認してください。フレームワークの開発や Cloudflare Pages へのデプロイには Node.js 24 を推奨します。PDF/画像の出力やデプロイを行う場合は、Chromium と wrangler をインストールしてください。

次に、OpenPress Workspace の作成、ドキュメントコンテンツの編集、そして最初のドキュメントのリアルタイムプレビューとデプロイの方法を学びます。

ステップ 1：Workspace の作成

AI Agent を介して開始するか、CLI を直接使用するかを選択できます。ここでは最も簡単な方法でご案内します。

CLI を使用した作成

ターミナルを開き、以下のコマンドを実行して新しいスライドを作成します：

npm create @open-press@latest my-deck -- \
  --type slides \
  --title "Transport models"

次に、プロジェクトディレクトリに移動して依存関係をインストールします：

cd my-deck
npm install

ステップ 2：リアルタイムプレビューの開始

コンテンツの執筆を開始する前に、Workbench を起動して結果をリアルタイムで確認しましょう。以下を実行してください：

npm run dev

その後、ブラウザで http://127.0.0.1:5173/workspace を開きます。プロジェクトのギャラリーが表示されます。ファイルを変更して保存すると、画面が自動的に更新されます。

ステップ 3：ドキュメントコンテンツの編集

すべてのコンテンツは press/ ディレクトリ配下に保存されています。最初のスライドを編集してみましょう。

エディタで、press/<あなたのプロジェクト名>/slides/intro/slide.tsx を開きます。 デフォルトのコンテンツを以下の歓迎のテキストに変更します：

import type { SlideMeta } from "@open-press/core";

export const meta = {
  layout: "default",
  description: "Opening slide",
} satisfies SlideMeta;

export default function Slide() {
  return <div>はじめての OpenPress スライドへようこそ！</div>;
}

保存後、ブラウザに戻ると、コンテンツが更新されていることが確認できます。

ステップ 4：ビルドと検証

編集が完了したら、ドキュメントの構造と出力を検証します：

npm run build         # 検証 + dist-react/ のレンダリング
npm run preview       # dist-react/ を静的サイトとして提供
npm run openpress:pdf # オプション：ローカルでの PDF 生成

検証に失敗した場合、ビルドは Vite の実行前に中止されます。そのため、成功したビルド（グリーンビルド）は、ドキュメントの形状が整合していることを示します。各ステップの役割については CLI · ライフサイクル を参照してください。

ステップ 5：デプロイ

OpenPress では、あらゆるデプロイに対して明示的な確認が求められます。暗黙の公開（サイレントリリース）はありません。workspace の package.json にある "openpress.deploy" フィールドでアダプターを設定し、以下を実行します：

npm run openpress:deploy:dry-run        # プレビューステップ
npm run openpress:deploy -- --confirm   # 公開

deploy コマンドは、ビルド、PDF アーティファクトの生成、deploy.json メタデータの書き込みを行い、設定されたアダプターに処理を引き継ぎます。特定のホスト用のアダプターが未実装の場合は、生成されたビルド出力をそのまま使用し、OpenPress 外で公開手順を実施してください。

次のステップ