slideshow

動画ではなく、その場で操作して見せるデッキが欲しいときに読ませるスキルです。説明文は、スライド・段階表示・分岐のボタン・覚書つきの発表者表示を持つ、と挙げています。既存の Web ページをデッキに作り替える用途もあります。

成果物は動いているデッキで、MP4 ではありません。

合成物ごとに置く JSON の島

1 つ

聴衆が読む文字（1920×1080 のとき）

40 px 以上

同梱ファイル（2026-10-22 時点）

1 件

SKILL.md の大きさ（2026-10-22 時点）

4,924 バイト

動画との違いは 2 つだけ

スライドショーは普通の合成物で、入口の hyperframes の契約がそのまま当てはまります。違うのは次の 2 点です。

• 各スライドが最上位の場面になる。全体を包むルートの合成物は作らない
• どの場面がスライドで、どうつながるかを、1 つの JSON の島（application/hyperframes-slideshow+json）に書く

島は <body> の上のほうに HTML として書きます。present はファイルをそのまま読むので、スクリプトで作るなと書かれています。

島に書くもの

• slides本線のスライドの並び。sceneId は場面の data-composition-id と同じ
• notes発表者だけに見える覚書
• fragments段階表示の止まる時刻。スライドの中の時刻ではなく、タイムライン全体の時刻
• hotspots分岐のボタン。target で分岐先の並びを指し、region は画面の割合の箱
• slideSequences分岐先のスライドの並び。本線には入れない

移動はタイムラインを飛ばすだけで、再生はしません。だから止まる時刻のどれに直接飛んでも正しく見えるように作る決まりです。

分岐先から戻ると、ボタンのあったスライドに帰ります。読み上げ用の ttsScript などは予約されているだけで、まだつながっていません。

既存のページを作り替える

元のページの見た目・動き・操作・メディアの振る舞いを保ち、部品は似せずに移植します。スクロールで動いていたものは、スライドを進めるときのカメラの移動に置き換え、ページが流れて見えるようにはしません。

画面写真・投稿・グラフ・コードなど文字の読める画像は証拠として扱い、縦横比を保って四辺が切れていないかを確かめます。

動画が欲しいとき

動画が欲しいなら、入口の hyperframes で普通の合成物として作ってください。

動かない資料で足りるとき

段階表示も分岐も要らない静的なスライドなら、ふつうの発表ソフトのほうが早いです。このスキルが効くのは、動きや分岐を含めてコードで持ちたいときです。

Figma の絵コンテから作りたいとき

Figma の枠や素材を使うなら、先に figma で取り込みます。

シェルの実行とローカルのサーバー

npx hyperframes check --json と npx hyperframes present <プロジェクト> を走らせます。present は手元でデッキを配るので、発表のあいだは動かしたままにします。渡すのは出てきた URL で、「Present を押すか P を押すと聴衆用のタブが開く」と伝える決まりです。

渡す前に check を通す

スライドショーの規則は、sceneId が全部場面に当たるか、target があるか、止まる時刻がスライドの中にあるか、本線のスライドが重なっていないかを確かめます。きれいになるまで直してから渡します。

操作の部品を自作しない

プロジェクトの index.html は、<hyperframes-slideshow> で <hyperframes-player> を包んだ形で、開けばそのまま動くデッキにします。発表・前後の移動・番号・消音・全画面・スワイプ・分岐・覚書・場面を離れたときのメディアの停止は、この部品が持っています。自分で作り直すなと書かれています。

隠したスライドがクリックを奪う

重ねて隠すスライドには、opacity: 0・visibility: hidden・pointer-events: none を 3 つとも付けます。どれかが欠けると、見えない層がクリックを吸います。

画面共有は聴衆用のタブを

Google Meet では聴衆用のタブを共有すると、裏でも描き続けます。Zoom では聴衆用のタブを別のウィンドウにして共有します。完全に隠れたウィンドウは止まる、とあります。

読む文字は 40 px 以上

聴衆が読む文字は 1920×1080 で 40 px 以上と決まっています。名前の付いた見た目を手で作る前に、catalog --query で既成の部品を探す決まりもあります（hyperframes-registry）。

allowed-tools の指定が無い

allowed-tools の指定はありません。確認なしで走る道具は宣言されておらず、どの道具も利用者の権限の設定どおりに確認されます。

ライセンス

Apache-2.0 です。再配布や商用利用の前に公開元の表記を確認してください。

動画として書き出せますか

書き出せません。本文は、デッキを MP4 に描き出すなと書いています。render は最初の場面だけを残して黙って切れるからです。スライドの静止画が欲しいなら、snapshot --at で 1 枚ずつ撮ります。

発表者用の覚書は入れられますか

入れられます。島の notes に書いた内容は発表者だけに見えます。発表者表示の覚書はその場で編集でき、デッキごとに残ります。

分岐はどう使いますか

スライドの hotspots にボタンを置き、target で slideSequences の並びを指します。分岐先のスライドは本線の slides に入れません。戻るとボタンのあったスライドに帰ります。

既存の Web ページをデッキにできますか

できます。見た目・動き・操作・メディアの振る舞いを保ったまま移す手順が本文にあります。スクロールの動きはスライドを進めるときのカメラの移動に置き換わります。文字の読める画像は縦横比を保ち、切れていないかを確かめる決まりです。

対応しているエージェントはどれですか

Claude Code と Codex です。公開元の README が、Claude Code へのプラグインの入れ方と Codex へ上げる手順を案内しています（2026-10-22 確認）。当サイトは公開元が明記しているものだけを対応として表示しています（指標の意味と限界）。