GCPUG Presentation

HTML Slide Engine

軽量・高速・レスポンシブなWebプレゼンテーション

sinmetal • 2026.08.23
Features

主要機能

🖥️ 画面自動リサイズ

画面サイズに合わせて比率を維持したまま自動で最適に拡大縮小されます。

⌨️ キーボード & タッチ操作

矢印キー（← / →）、Space、PageUp/Down、タッチスワイプで快適に移動できます。

📐 アスペクト比の変更

16:9, 4:3, 16:10 や任意カスタムサイズを属性1つで設定可能です。

🔗 URLハッシュ連動

#3 のようにURLでページを直接指定・共有・リロード可能です。

Architecture

ディレクトリ構成

slide/
├── index.html                   # 全スライド一覧ポータル
├── common/
│   ├── css/ (reset.css, slide.css)
│   ├── js/ (slide-core.js)
│   └── template/ (index.html)   # 新規作成用ひな形
└── slides/
    └── YYYYMMDD-topic-name/     # 各スライド（個別HTML）
        └── index.html

新しいスライドを作成する際は common/template/ を slides/YYYYMMDD-xxx/ にコピーするだけです。

Navigation

操作方法 (キーボードショートカット)

次へ進む

→ / ↓
Space / PageDown
Enter / L / J

前へ戻る

← / ↑
Backspace
PageUp / H / K

全画面 / 先頭 / 末尾

F: 全画面切替
Home: 最初のページ
End: 最後のページ

GCPUG

スライド作成の準備が整いました！

矢印キーまたは画面右下のボタンで操作できます

HTML Slide Engine Demo