presen

reveal.jsを使ったテキストベースのプレゼン管理リポジトリ。

セットアップ

前提条件

• Node.js 25以上

インストール

npm install

ファイルの使い分け

形式	コマンド	向いている用途
.md	npm run md	通常のスライド。Markdownで手軽に書く
.html	npm start	SVGアニメーションなどデザインに凝りたいとき

基本は .md で書き、必要なときだけ .html に切り替える。

使い方

Markdownスライドの起動（推奨）

npm run md

ブラウザで表示されるURLを開く（デフォルト: http://localhost:1948）。
.md ファイルを保存するとホットリロードされる。

HTMLスライドの起動

npm start

ブラウザで http://localhost:8000 を開き、ファイル名を指定する（例: http://localhost:8000/animation-demo.html）。

スライドの操作

キー	動作
→ / Space	次のスライド
←	前のスライド
↓	縦方向の次のスライド
f	フルスクリーン
s	スピーカーノート表示
o	スライド一覧表示
Esc	一覧表示を閉じる

ディレクトリ構成

presen/
├── vpn.md              # VPN入門スライド（Markdown）
├── animation-demo.html # アニメーションデモ（HTML）
├── index.html          # HTMLスライドのテンプレート
├── チュートリアル.md    # アニメーション実装手順
├── package.json
└── node_modules/

Markdownスライドの書き方

スライドの区切りは ---。

基本構造

---
title: スライドタイトル
theme: black
---

# 1枚目

内容

---

## 2枚目

- 箇条書き
- も使える

フラグメント（順番表示）

- 最初から表示
- 2番目に表示 <!-- .element: class="fragment" -->
- 3番目に表示 <!-- .element: class="fragment" -->

スピーカーノート

## スライドタイトル

内容

Note:
ここに話す内容のメモを書く。聴衆には見えない。

テーマ変更

ファイル先頭のフロントマターで指定する。

---
theme: black
---

利用可能なテーマ: black / white / league / beige / sky / night / serif / simple / solarized / moon / dracula

HTMLスライドの書き方

デザインに凝りたい場合のみ使用。詳細は チュートリアル.md を参照。