🚀 インタラクティブ HTML スライド作成テンプレート

MarkdownとPlotlyを使って、「3Dグラフが動く」「誰でも直感的に書ける」「サーバー不要・完全オフライン対応」 な次世代HTMLプレゼンテーションスライドを作成・配布できるテンプレート環境です。

🎯 目的別コマンド早見表

あなたがやりたいこと	実行するコマンド / アクション
スライドをHTMLに変換したい	`uv run build.py` (または `python build.py`)
ビルドしてすぐブラウザで自動確認したい	`uv run build.py --open` (または `-o`)
スライドの内容を編集したい	slide.md をエディタで編集する
グラフのデータを変えたい	`charts/sample_2d.html` や `sample_3d.html` を編集する
スライドの色やフォントを変えたい	assets/css/theme-custom.css を変更する (F5で即時反映)

🔄 基本の作業フロー（3ステップ）

[ 1. 編集する ]               [ 2. ビルドする ]                [ 3. 確認・配布する ]
 slide.md を書く   ──▶    uv run build.py      ──▶   slide_refered.html (確認用)
 charts/ を編集                                       slide_embed.html   (配布用)

原稿を書く: slide.md をMarkdownで記述します。
ビルドする: ターミナルで uv run build.py を実行します。
確認・配布する:
- 作成中の確認: slide_refered.html を開く（画像やCSSの変更がブラウザF5で即時反映）。
- 他者への配布: slide_embed.html を送る（1ファイル完結・USBやメール添付で相手のPCでもそのまま動きます）。

📂 成果物の違いと使い分け

ファイル名	特徴	こんな時に使う
`slide_refered.html`	画像やCSSを相対パスで読み込む	普段の編集・プレビュー用 ※ CSSや画像を上書きすれば、HTMLを再ビルドしなくてもブラウザ更新（F5）だけで即反映されます。
`slide_embed.html`	全データ（JS/CSS/画像/数式/グラフ）を1ファイルに内包	発表本番・メール添付・配布用 ※ サーバー不要・ネット接続不要。誰に送ってもダブルクリックで確実に動きます。

📋 PowerPoint風マスタースライド・レイアウトテンプレート集 (コピペ用)

PowerPointのマスタースライドのように、**「位置やサイズがCSSで事前定義されたテンプレート枠」**です。以下のスニペットをコピーして slide.md に貼り付け、タイトルやグラフパス、テキストを書き換えるだけで、サイズ崩れのない美しいスライドが一発で完成します。

💡 統一された記法ルール（コロンとカッコの法則）

囲み枠ブロック（::: コロン3つ＋最後に ::: で閉じる）: 間に文字や画像などを挟むコンテナ ➜ ::: layout(...), ::: card(...), ::: images(...)

単発部品（:: コロン2つ＋閉じタグ不要）: その場にポンと埋め込む要素 ➜ ::include(...)

設定値（引数）はすべて関数のようにカッコ (引数1, 引数2, ...) で渡す: h=250px や w=80% でサイズ指定可能

1. 表紙スライド (`::: layout(title)`)

日付・タイトル・サブタイトル・発表者名が四隅・中央に自動配置されます。

---
::: layout(title)
20260903
# プレゼンテーションのタイトル
サブタイトル・研究テーマ
発表者 氏名
:::

2. 目次・アジェンダスライド (`::: layout(agenda, 1)`)

発表の現在地に合わせて光らせる章番号を指定できます（例: layout(agenda, 2) で2番目がハイライト）。

---
## 目次

::: layout(agenda, 1)
1. 背景
2. 目的
3. 実験方法
4. 結果
5. 考察
:::

3. 1グラフ集中スライド (`::: layout(chart-focus)`)

画面中央に横幅いっぱいの**大型グラフ（最大化表示）**を配置し、下部に考察メモを添えるレイアウトです。

---
::: layout(chart-focus)
## 3Dデータ分析結果 (本編)
多次元データの可視化（マウス操作で360度回転・ズーム・ホバーが可能）

::include("charts/sample_3d.html")::
::: memo
- クラスタごとの空間的広がりと特異値の分布を直感的に把握可能。
- ここに要約や考察ポイントを箇条書きで記入します。
:::
:::

4. グラフ＋左右解説スライド (`::: layout(chart-split)`)

左側にグラフ（約60%）、右側に表や箇条書き解説（約40%）、下部に要約メモを配置する最も実用的で王道なレイアウトです。

---
::: layout(chart-split)
## 1-1. 体質アンケート68項目 (結果)
前提: 値の反転(数値が高いほど該当する) → StandardScaler → GMMClustering

::include("graph/outputs_stage1/01_questionnaire_68items/gmm_3d_biplot.html")::
::: split
| クラスタ | 特徴 |
|:---:|:---|
| 0 | 全体的に良好（スコア低） |
| 1 | 気虚・気滞優位 |
| 2 | 血虚・瘀血優位 |
| 3 | 水滞・むくみ優位 |
| 4 | 複合型（全般に高スコア） |
::: memo
- PC0は全体的な不調度を示す。（どれか悪い人はどれも悪い）
- PC1,2,3で可視化すると、各軸・クラスタの特徴が明瞭に分離。
- 一部の項目で相関が取れていることが可視化可能。
:::
:::

5. 3連レイアウトスライド (`::: layout(compare-3)`)

上部の全体説明 ➜ 3連ボックス（グラフ、画像、カラーカード、表、テキスト何でもOK） ➜ 下部の全体要約メモという王道の3段構成レイアウトです。

パターンA: 3つのグラフを並列比較

---
::: layout(compare-3)
## 1-1. 体質アンケート68項目 (条件決定)
前処理: 値の反転(数値が高いほど該当する) → StandardScaler → GMMClustering

::include("graph/outputs_stage1/01_questionnaire_68items/pca.html")::
::: split
::include("graph/outputs_stage1/01_questionnaire_68items/bic.html")::
::: split
::include("graph/outputs_stage1/01_questionnaire_68items/aic.html")::
::: memo
- BIC / AIC ともに n_clusters=5 で最小値を示し、最適なクラスタ数を客観的に特定。
:::
:::

パターンB: 3色のテキストカード（中に小さなグラフや表を入れることも可能）

---
::: layout(compare-3)
## 背景：漢方体質とは？気血水の基本概念
漢方医学では、人体は**「気」「血」「水」**の3要素がバランスよく巡ることで健康が保たれると考えられている。

::: card(yellow)
**気：生命エネルギー・代謝**
自律神経系や代謝を司る活力
- **気虚**: エネルギー不足・疲労
- **気滞**: 気の滞り・膨満感
:::
::: split
::: card(red)
**血：血液・ホルモン・栄養**
全身に酸素や栄養を届ける働き
::include("graph/outputs_stage1/01_questionnaire_68items/aic.html", h=140px)::
- **血虚**: 栄養不足・貧血
- **瘀血**: 血行不良・冷え
:::
::: split
::: card(blue)
**水：体液・リンパ・水分代謝**
血液以外の水分や分泌液
- **水滞 / 水毒**: 水分代謝異常・むくみ
:::
::: memo
**日本独自の発展（古方派）**：中国の理論に対し、江戸時代の実証的な漢方医学において病態をシンプルに捉える指標として体系化。
:::
:::

6. まとめ・課題スライド (`::: layout(summary)`)

上部にスライド見出しと青帯のキーメッセージ（リード文）、下部に3つのカラーカード（黄・青・緑のアクセント）を並べるサマリースライドです。

---
::: layout(summary)
## 今後の展開（3つの柱）
HTMLスライドを活用することで、データ分析結果の共有性とプレゼン体験が飛躍的に向上します。

::: card
### ① 迅速な共有
- 単一HTMLファイルで出力されるため、社内メールやチャットで即座に共有可能。
- サーバーや専用ソフトウェアのインストールが一切不要。
:::
::: card
### ② 柔軟なカスタマイズ
- MarkdownとCSS変数を書き換えるだけで、好みの配色に即座に変更可能。
- 目的別のレイアウトテンプレートで素早く資料作成。
:::
::: card
### ③ 描画力アップ
- Plotlyによる動的3D/2Dグラフで、説得力のあるプレゼン体験を提供。
- 会議中にその場でマウス回転・データ探索が可能。
:::
:::

📝 目的別・個別パーツ記法リファレンス (パーツ単位)

① スライドを分けたい（ページ送り）

--- （ハイフン3つ）: 横送り ➜ 次の章や新しいトピックへ（→ キー）
-- （ハイフン2つ）: 縦送り ➜ 詳細データや補足資料へ（↓ キー）

② 表紙スライドを作りたい

1行目に日付、# にタイトル、その下にサブタイトル、最後に発表者名を書くと自動で四隅・中央に配置されます。

::: title
20260903
<!-- タイトル -->
# NIR-HSIを用いた毛髪診断システムの開発
<!-- サブタイトル -->
毛髪でひも解く漢方体質分類
<!-- 発表者 -->
礒辺真人
:::

③ 目次を作りたい（自由なステップハイライト設定）

::: agenda の後ろにオプションを付けることで、発表の流れに合わせて光らせる項目・順番を自由自在に指定できます。

## 目次

::: agenda:3
1. プロジェクトの背景と課題
2. 漢方体質アンケート
3. アンケート結果解析
4. 毛髪とアンケート
5. 今後の展開と課題
:::

指定方法	実際のハイライトの動き
`::: agenda:3`	最初は全体 ➜ 03だけ光る（他は薄くなる） ➜ 次のスライドへ
`::: agenda:1,3`	最初は全体 ➜ 01 ➜ 03 ➜ 次のスライドへ
`::: agenda` (または `:auto`)	最初は全体 ➜ 01 ➜ 02 ➜ 03 ... （全項目順番）
`::: agenda:none`	ステップなし（最初から最後まで全体が明るい静止目次）
`::: agenda:fixed:2`	最初から02が固定で光っている（各章の扉スライド用）

④ 汎用 N×M グリッド分割 (`::: grid(col=N, row=M)`)

画面の余白を 列数 (col) と行数 (row) で自在に均等分割し、各マス（セル）にグラフ・画像・カードを自動フィットして配置できます。マス同士の区切りには ::: split を挟みます。

<!-- 例: 3列 × 2行 (6マス) のダッシュボード配置 -->
::: grid(col=3, row=2, h=480px)
::include("charts/chart1.html")::
::: split
::include("charts/chart2.html")::
::: split
![画像](graph/cube.png)
::: split
::: card(yellow)
下段左の解説カード
:::
::: split
<!-- 空白マスにしたい場合はコメントのみ -->
::: split
::: card(blue)
下段右のまとめ
:::
:::

基本パターン

指定方法	動作
`::: grid(col=2, row=1)`	左右に均等 2分割（50% : 50%）
`::: grid(col=3, row=1)`	横に均等 3分割（33% : 33% : 33%）
`::: grid(col=2, row=2)`	田の字型 4分割ダッシュボード
`::: grid(col=2:1, row=1)`	左右の幅比率を指定（左2/3 : 右1/3）
`::: grid(col=1:2:1, row=1)`	中央が広い 3分割（左25% : 中50% : 右25%）
`::: grid(col=2, row=2:1)`	上下の高さ比率を指定（上2/3 : 下1/3）

※ 高さは指定なし（デフォルト）でスライドの下端まで自動でめいっぱい伸びます（h=480px などで固定も可能）。行数は厳格に row（行）です。

⑤ カード枠 & 色分け（`::: card(色名)`）

::: grid(col=3, row=1)
::: card(yellow)
**気：生命エネルギー**
- 気虚、気滞、気逆
:::
::: split
::: card(red)
**血：血液・ホルモン**
- 血虚、瘀血
:::
::: split
::: card(blue)
**水：水分代謝**
- 水滞、水毒
:::
:::

::: card: 基本カード（グレー淡色）
::: card(blue): 淡いロイヤルブルーカード
::: card(red): 淡いピンク/レッドカード
::: card(yellow): 淡いイエローカード
::: card(gold): 濃いめゴールドカード
::: card(bg="#f0fdf4"): 任意背景色の直接指定

⑥ 画像の横並び（`::: images(枚数, h=高さ)`）

余計な枠影なしで、背景の上にスッキリ左右配置します。

::: images(2, h=280px)
![画像1の説明](graph/cube.png)
![画像2の説明](graph/taishitu.png)
:::

::: images(2, h=280px): 2枚横並び（高さを280pxに自動統一）
::: images(3, h=240px): 3枚横並び（高さを240pxに自動統一）

⑦ ポイント強調ボックス（`::: point`）

::: point
💡 **ここがポイント：**
内部で `::: grid-2:1` などのレイアウトや画像を自由にネストできます。
:::

⑧ 3Dグラフ・外部HTMLの埋め込み（サイズ指定対応）

HTMLファイル（Plotlyのグラフ等）をスライド内に埋め込みます。ファイルパスの後ろにコロン : でサイズ（40% や 180px）を指定して縮小表示も可能です。

<!-- 基本: 枠に合わせて100%表示（レイアウトテンプレート内などで使用） -->
::include(charts/sample_3d.html)::

<!-- 高さ指定 (40%): カード内などでテキストの下にコンパクトに配置したい時 -->
::include(graph/outputs/aic.html:40%)::

<!-- 高さ指定 (ピクセル指定): 高さを固定したい時 -->
::include(graph/outputs/aic.html:180px)::

<!-- 幅と高さを両方指定 -->
::include(graph/outputs/aic.html:h=180px,w=80%)::

⑨ 箇条書きの段階フェードイン（`::: step`）

::: step
- 1番目の重要なポイント（クリックで出現）
- 2番目の詳細な説明（さらにクリックで出現）
- 3番目の結論・まとめ（最後にフェードイン）
:::

⑩ 数式 (LaTeX / KaTeX) ＆コード

正規分布の確率密度関数：
$$ f(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2} $$

⌨️ プレゼン時のキーボード操作

キー	動作
`→` / `Space`	次のスライド（または次のステップ）へ進む
`←`	前のスライドへ戻る
`↓` / `↑`	縦送りスライド（詳細データ・補足資料）へ進む / 戻る
`F` / `F11`	全画面表示の切り替え
`ESC` / `O`	全スライド一覧（タイルモーダル）の開閉

Name		Name	Last commit message	Last commit date
NIRHSI_kanpo		NIRHSI_kanpo
pyslides		pyslides
.gitignore		.gitignore
.python-version		.python-version
MANUAL.md		MANUAL.md
README.md		README.md
main.py		main.py
pyproject.toml		pyproject.toml
uv.lock		uv.lock

Navigation Menu

Repository navigation

About

Repository files navigation

🚀 インタラクティブ HTML スライド作成テンプレート

🎯 目的別コマンド早見表

🔄 基本の作業フロー（3ステップ）

📂 成果物の違いと使い分け

📋 PowerPoint風マスタースライド・レイアウトテンプレート集 (コピペ用)

1. 表紙スライド (`::: layout(title)`)

2. 目次・アジェンダスライド (`::: layout(agenda, 1)`)

3. 1グラフ集中スライド (`::: layout(chart-focus)`)

4. グラフ＋左右解説スライド (`::: layout(chart-split)`)

5. 3連レイアウトスライド (`::: layout(compare-3)`)

パターンA: 3つのグラフを並列比較

パターンB: 3色のテキストカード（中に小さなグラフや表を入れることも可能）

6. まとめ・課題スライド (`::: layout(summary)`)

📝 目的別・個別パーツ記法リファレンス (パーツ単位)

① スライドを分けたい（ページ送り）

② 表紙スライドを作りたい

③ 目次を作りたい（自由なステップハイライト設定）

④ 汎用 N×M グリッド分割 (`::: grid(col=N, row=M)`)

基本パターン

⑤ カード枠 & 色分け（`::: card(色名)`）

⑥ 画像の横並び（`::: images(枚数, h=高さ)`）

⑦ ポイント強調ボックス（`::: point`）

⑧ 3Dグラフ・外部HTMLの埋め込み（サイズ指定対応）

⑨ 箇条書きの段階フェードイン（`::: step`）

⑩ 数式 (LaTeX / KaTeX) ＆コード

⌨️ プレゼン時のキーボード操作

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

🚀 インタラクティブ HTML スライド作成テンプレート

🎯 目的別コマンド早見表

🔄 基本の作業フロー（3ステップ）

📂 成果物の違いと使い分け

📋 PowerPoint風 マスタースライド・レイアウトテンプレート集 (コピペ用)

1. 表紙スライド (::: layout(title))

2. 目次・アジェンダスライド (::: layout(agenda, 1))

3. 1グラフ集中スライド (::: layout(chart-focus))

4. グラフ＋左右解説スライド (::: layout(chart-split))

5. 3連レイアウトスライド (::: layout(compare-3))

パターンA: 3つのグラフを並列比較

パターンB: 3色のテキストカード（中に小さなグラフや表を入れることも可能）

6. まとめ・課題スライド (::: layout(summary))

📝 目的別・個別パーツ記法リファレンス (パーツ単位)

① スライドを分けたい（ページ送り）

② 表紙スライドを作りたい

③ 目次を作りたい（自由なステップハイライト設定）

④ 汎用 N×M グリッド分割 (::: grid(col=N, row=M))

基本パターン

⑤ カード枠 & 色分け（::: card(色名)）

⑥ 画像の横並び（::: images(枚数, h=高さ)）

⑦ ポイント強調ボックス（::: point）

⑧ 3Dグラフ・外部HTMLの埋め込み（サイズ指定対応）

⑨ 箇条書きの段階フェードイン（::: step）

⑩ 数式 (LaTeX / KaTeX) ＆ コード

⌨️ プレゼン時のキーボード操作

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

📋 PowerPoint風マスタースライド・レイアウトテンプレート集 (コピペ用)

1. 表紙スライド (`::: layout(title)`)

2. 目次・アジェンダスライド (`::: layout(agenda, 1)`)

3. 1グラフ集中スライド (`::: layout(chart-focus)`)

4. グラフ＋左右解説スライド (`::: layout(chart-split)`)

5. 3連レイアウトスライド (`::: layout(compare-3)`)

6. まとめ・課題スライド (`::: layout(summary)`)

④ 汎用 N×M グリッド分割 (`::: grid(col=N, row=M)`)

⑤ カード枠 & 色分け（`::: card(色名)`）

⑥ 画像の横並び（`::: images(枚数, h=高さ)`）

⑦ ポイント強調ボックス（`::: point`）

⑨ 箇条書きの段階フェードイン（`::: step`）

⑩ 数式 (LaTeX / KaTeX) ＆コード