シーンデッキ：一枚の絵、一つのカメラ
シーンデッキとは、一枚のイラストの中にすべてのスライドが存在するプレゼンテーションです。各ページは、同じ絵上の異なるカメラ位置として定義されます。カメラは詳細に寄り、描かれたパスに沿って次のオブジェクトへ移動し、部屋を横切り、最後にワイドショットに戻ります。テキストはスクリーン空間に描画されたカード上に表示され、カメラが停止した後、一拍置いてから現れます。これにより、聴衆はテキストを読む前にまずその場所を見ることができます。
このスキルは、@open-slide/core 2.2 で実際に22ショット、20分のカンファレンストークを制作した手法をコード化したものです。open-slideにはカメラAPIがないため、カメラはページコンポーネント内で直接駆動します。template/index.tsx がエンジン全体と7つのサンプルショットです。これをコピーして、シーン、アンカー、カードを置き換えて使用します。
使用すべき場面
- プレゼンテーションに「場所」がある場合：教室、手術室、工場フロア、市街地など。その場所のオブジェクトがストーリーのステーションに対応します。
- スピーカーがPreziのような感覚（ズームインして話し、ズームアウトして全体を見通し、次の場所へ滑らかに移動）を望んでいるが、Preziそのものは使いたくない場合。
- ショット数が15から25程度の場合。それより少なければ通常のデッキで十分です。多すぎるとカメラの移動が背景の飾りになってしまいます。
データ重視のデッキ、ライブデモ、またはPowerPointで他の人が編集する必要があるものには使用しないでください。これはWebページであり、Chromeで動作します。
作業手順
- まずストーリーボードを作成します。 一つのシーン、ステーションのリスト、ステーションごとのカメラ位置とカード、そして実際に必要な素材（スクリーンショット、ログ、写真）のリストをまとめます。アートやコードの前に書き出します。
references/storyboard.mdにテーブルとスピーカーと決めるべき質問が含まれています。 - シーンを作成します。 ワイドショットのスタイル候補を3つ生成し、スピーカーに選んでもらいます。その後、画像編集（オブジェクトの除去、ストーリーに必要な要素の追加、画面を空白にするなど）で画像を修正します。カメラが数ワールドピクセル以内に近づく場合にのみ、クローズアップ用のプレートを生成します。詳細は
references/art.md。 - アンカーをグリッドで測定します。 ワイドショット上で目視で行わないでください。
scripts/measure-grid.shは100pxのグリッドで画像の領域を切り出します。スクリーンショットを収める必要がある領域には3倍のコーナークロップを使用します。references/art.md。 - テンプレートからデッキを構築します。
ViewKey、VIEWSエントリ（カメラ、HUDモード、ブラー、ホールド）、HudBodyケース、ページ、ノートを追加します。エンジン自体は変更しません。references/engine.mdですべての調整項目を説明しています。 - 目視ではなく検証します。
scripts/perf-probe.cjsをヘッド付きChromeで実行します。すべてのページ変更において、ゼロ・ロングタスク、50ms以上のフレームギャップがないことが基準です。スクリーンショットを撮らずに測定します。スクリーンショットは1枚あたり300msかかり、カクツキのように見えます。references/verification.md。 - ウォークスルーを録画し、スマートフォンで視聴します。
scripts/record-walkthrough.cjsは各ショットの待機時間を含むデッキを再生し、録画します。mp4に変換してスピーカーのスマートフォンに送信します。元のプロジェクトでは、すべてのフィードバックループはこのプロセスから生まれ、ブラウザからではありませんでした。 - ビルドからプレゼンテーションを行います。
scripts/present.commandはビルドし、dist/をサーブし、デッキとプレゼンターウィンドウ（ノート、タイマー、次のページ）を開きます。会場のプロジェクターでスピーカー自身のラップトップを使ってテストします。references/presenting.md。
代償として得られたルール
- カードより先にシーンを表示します。カードはカメラが停止してから
holdms（デフォルト1秒）後に表示されます。フライトの70%の時点でカードが現れると、シーンが単なるデスクトップ背景のように見えてしまいます。 - クローズアップカメラは、そのプレートの内側に収まっている必要があります。ビューがプレートより広い場合、拡大されたベースの画像が周囲ににじみ出て、影や幽霊の手のように見えます。
- スクリーンショットは、ホモグラフィー変換により、ベゼルの内側の端にマッピングして描画されたスクリーン上に配置します。4つのコーナーを3倍で測定します。
- 長距離ジャンプに中間ページは不要です。van Wijkパスが自動的に引き上げてダイブします。遠くのステーションは画像の遠い端に配置し、カメラに飛ばせます。
- カードの文言は平易な言葉にします。画像が半分の役割を担っているため、カードには一つのアイデアと最大4行までにします。
- この目的で
MorphElementを使用しないでください。アニメーション開始前にすべての子孫の計算済みスタイルをメインスレッドでコピーするため、実際のデッキで5秒間フリーズしました。docs/adr/0001-drive-the-camera-in-page.mdを参照してください。
このフォルダの内容
| パス | 説明 |
|---|---|
template/index.tsx | エンジンと7つのサンプルショット。slides/<id>/index.tsx にコピーします。 |
template/assets/ | サンプルシーン (2752 × 1536)、クローズアッププレート、アプリのスクリーンショット。これらを置き換えます。 |
references/engine.md | カメラ、HUD、ホールド、プレート、パースペクティブスクリーンの仕組みと、ショットの追加方法。 |
references/storyboard.md | ストーリーボードのテーブルと、アート着手前に決めるべき判断事項。 |
references/art.md | シーンのプロンプティング、修正、アンカーの測定、プレート。 |
references/verification.md | パフォーマンスプローブ、ウォークスルー録画、スマートフォンでのレビューループ。 |
references/presenting.md | ビルド、プレビュー、プレゼンターウィンドウ、ランチャー、フォールバック。 |
references/pitfalls.md | 過去に一度失敗したすべての注意点。二度と同じ失敗を繰り返さないために。 |
scripts/ | perf-probe.cjs、record-walkthrough.cjs、measure-grid.sh、genimg.py、genedit.py、present.command。 |
docs/adr/ | カメラをページ内で駆動する理由、HUDを待機させる理由。 |
スピーカーとの連携
以下の順序でスピーカーと決定してください：ステーションのストーリー順。遠距離ジャンプをワイドショット経由にするか（自動で行われます）。どの実際の素材をいつ提供してもらうか。アートスタイル（3つ提示し、1つ選んでもらう）。画像に絶対に含めてはいけないもの。各決定を日付とともにストーリーボードに記入します。その後、デッキ全体を構築し、録画し、ビデオを送信します。通常、各回5ショットに影響するフィードバックが3〜4ラウンド発生します。