デジタル板書
授業で黒板の代わりに使う板書アプリ。
使い方
アプリとして使う（おすすめ）： Microsoft Edge で https://mugeikug.github.io/bansho/ を開き、アドレスバー右側の「アプリをインストール」（または「…」→「アプリ」→「このサイトをアプリとしてインストール」）でインストールする。スタートメニューから起動でき、.board ファイルをダブルクリック・Enter で開ける（初回は開くアプリに「デジタル板書」を選ぶ）。開いたファイルには Ctrl+S でそのまま上書き保存できる。一度インストールすればオフラインでも動き、ネットにつながったときに自動で更新される。インストール後に「「送る」に登録.cmd」を一度実行すると、エクスプローラーの「送る」にも入る。
フォルダから使う： 「板書を開く.cmd」をダブルクリックすると Edge のアプリモードで開く（ネット不要。ただしファイルの関連付けはない）。tools/launch-edge.ps1 がパスを file:// URL に変換して Edge に渡す（Edge の --app は日本語などを含む生のパスを受け付けないため）。
デスクトップ版（配布用）： node tools/build-desktop.js で exe（WebView2、net48）をビルドし、インストーラー dist/Bansho-Setup-<版>.exe と受け取る方向けの手順書 PDF を作る（Inno Setup 6 が必要）。インストーラーは管理者権限なしでユーザーごとに入り、.board の関連付け・「送る」・スタートメニューを登録する。画面はブラウザー版と同じファイルを exe の隣の app フォルダに置いて表示し、保存・PDF・提示画面は exe が引き受ける（js/host.js ↔ desktop/MainForm.cs）。版は desktop/Bansho.csproj の <Version>。メインウィンドウの大きさ・位置・最大化の状態は %LOCALAPPDATA%\Bansho\window.txt に記憶する。
動作対象は Chromium 系（Edge / Chrome）。Firefox では上書き保存と提示画面の自動配置が使えない。
構成
| ファイル | 役割 |
|---|
index.html | 編集画面 |
css/page.css | ページ内容の見た目（編集画面・提示画面・印刷で共通）。テーマ別の色はここ |
css/app.css | 編集画面の UI、印刷用設定（@page） |
js/model.js | データモデル・変更通知・Undo 履歴・保存形式・HTML の無害化 |
js/ink.js | 手書き線の輪郭生成（筆圧）と消しゴムの当たり判定 |
js/rich.js | 文字装飾：DOM を1文字ごとの書式に分解し、決まった形の HTML に組み直す |
js/geom.js | 図形の描画、オブジェクトの外接矩形・当たり判定・移動拡大 |
js/view.js | ページの描画（全画面共通） |
js/editor.js | ペン・消しゴム・テキストの入力処理 |
js/presenter.js | 提示画面ウィンドウ |
js/fileio.js | 保存・開く・PDF出力・画像の読み込み |
js/pptx.js | PowerPoint（.pptx）の読み込み（外部ライブラリなし） |
js/pptx-export.js | PowerPoint（.pptx）への書き出し（外部ライブラリなし、zip は無圧縮） |
js/backup.js | 自動バックアップ（IndexedDB）と復元 |
js/host.js | デスクトップ版のときだけ、exe とのやり取り（B.host）を用意する |
js/app.js | ツールバー・ページ一覧・ショートカット・ファイルの関連付けからの起動 |
manifest.webmanifest / sw.js | アプリとしてのインストール（.board / .pptx の関連付け）とオフライン用キャッシュ |
tools/deploy.js | 公開：sw.js の版を上げて GitHub Pages に push する |
desktop/ | デスクトップ版の exe（MainForm.cs・PresenterForm.cs）とインストーラー（installer/Bansho.iss・手順書 installer/guide.html） |
tools/build-desktop.js | デスクトップ版の exe・インストーラー・手順書 PDF を作り dist/ に置く |
tools/register-sendto.ps1 | インストールしたアプリを「送る」に登録する（「「送る」に登録.cmd」から実行） |
ES モジュールは file:// で読み込めないため、通常の <script> を順に読み込み、window.B に機能をまとめている。
提示画面は window.open('')（about:blank）で開き、編集画面のスクリプトがその DOM を直接組み立てる。about:blank は開いた側と同一オリジン扱いなので、file:// 起動でも確実に描画できる。
保存形式（.board、JSON）
{ "format": "bansho-board", "version": 1, "theme": "white|board|black",
"pages": [ { "id": "...", "objects": [
{ "id": "...", "type": "stroke", "kind": "pen|marker", "color": "default", "size": 7, "pr": true, "pts": [[x, y, pressure], ...] },
{ "id": "...", "type": "text", "x": 0, "y": 0, "w": null, "fs": 48, "html": "..." },
{ "id": "...", "type": "shape", "shape": "line|arrow|rect|ellipse", "x1": 0, "y1": 0, "x2": 0, "y2": 0, "color": "red", "width": 6 },
{ "id": "...", "type": "table", "x": 0, "y": 0, "fs": 48, "cols": [240, 240], "rows": [80, 80], "cells": [[{ "html": "..." }, ...], ...] },
{ "id": "...", "type": "image", "x": 0, "y": 0, "w": 400, "h": 300, "src": "data:image/png;base64,..." }
] } ] }
テキストの html は <b> <i> <u> <sub> <sup> <br> と span.c-色 / span.hl-色 / span.deco-box / span style="font-size:倍率em" だけからなる決まった形（rich.js が出力）。fs はボックスの基準の文字サイズ（px）。
文字サイズの表示は pt（1pt ＝ 2px。PowerPoint の 16:9 スライドと同じ基準）。範囲を選んで変えるとその文字だけ（基準サイズに対する倍率で保存）、選ばずに変えるとボックス全体の基準サイズが変わる。
画像はファイルに埋め込む（長辺 2400px を超える画像は読み込み時に縮小）。
自動バックアップ：未保存の変更があると 15 秒ごとにブラウザ内（IndexedDB）へ保存し、保存済みになると消す。保存せずに終了した内容は、次に開いたとき復元を提案する（14 日で破棄）。
座標は 1920×1080 の論理座標。色は意味上の色名（default / red / blue / green、蛍光ペンは yellow / pink / blue / green）。
PowerPoint の読み込み
「開く」（Ctrl+O）またはドラッグ＆ドロップで .pptx を開く。読み込み方を選ぶ：
- 元の色・デザインのまま：色はそのまま（#rrggbb）、スライドの背景色とマスター・レイアウトの装飾をページの背景（page.bg、選択・消去の対象外）として読む
- 板書の色に合わせる：色を既定色・赤・青・緑に寄せる。背景は読まない
文字は編集できるテキストに（箇条書き・字下げ・行間・下線の色/二重線・取り消し線・特殊フォントを再現）、線・矢印と塗りなしの四角・楕円は板書の図形に、その他の図形は SVG 画像に、インク（手書き）は板書のペンの線になる。表はセルの文字と罫線に分解する。グラフ・動画・EMF 画像は読まない（件数を報告）。
PowerPoint への書き出し
ツールバーの「PPTX」で .pptx に書き出す（白地以外のテーマでは、白地か画面と同じかを選ぶ）。テキストは装飾・箇条書き・字下げ・行間ごとテキストボックスに、ペンの線はフリーフォームの線（太さは一定）に、直線・矢印はコネクタ、四角・楕円は図形、画像は画像（SVG などは PNG にする）、表は表になる。四角囲みは PowerPoint にない装飾のため囲みなしになる。
ショートカット
| キー | 動作 |
|---|
| V / T / P / H / E / I | 選択 / 文字 / ペン / 蛍光ペン / 消しゴム / 画像の挿入 |
| L / A / R / O | 直線 / 矢印 / 四角 / 楕円（描くとき Shift で水平・垂直・正方形・正円） |
| PageDown・↓・→ / PageUp・↑・← | 次 / 前のページ（提示画面側で押しても可） |
| ← ↑ → ↓（選択中） | 選択したものを 1px 移動（Shift で 10px） |
| Ctrl+M / Ctrl+Shift+D | ページ追加 / ページ複製 |
| Ctrl+Shift+↑ / ↓ | ページを前 / 後ろへ移動（サムネイルのドラッグでも可） |
| Ctrl+Z / Ctrl+Y | 元に戻す / やり直し（文字入力中は文字単位） |
| Ctrl+C / X / V / D / A | コピー / 切り取り / 貼り付け（画像・文字も可） / 複製 / すべて選択 |
| Delete | 選択したものを削除 |
| F5 | 提示画面を開く |
| F / B（または .）/ W | 提示画面の固定 / 暗転 / 白画面（もう一度押すと解除。提示画面側でも可） |
| Ctrl+S / Ctrl+Shift+S / Ctrl+O | 上書き保存 / 名前を付けて保存 / 開く |
| Ctrl+P | PDF出力 |
| Ctrl+B / I / U | 太字 / 斜体 / 下線 |
| Ctrl+= または Ctrl+, / Ctrl+Shift+= または Ctrl+. | 下付き / 上付き |
| Ctrl+H / Ctrl+K | マーカー（最後に使った色） / 四角囲み |
| Ctrl+Shift+> / < （または Ctrl+] / [） | 文字を1段階大きく / 小さく |
| Alt+1〜5 | 文字色：既定色 / 赤 / 青 / 緑 / グレー |
| Ctrl+Shift+X | 取り消し線 |
| Tab / Shift+Tab | 行頭（箇条書き・字下げのある行）や複数行の選択では字下げを深く / 浅く。それ以外はタブ文字（1 インチ間隔）。表では次 / 前のセル |
| Ctrl+Shift+L | 箇条書きのオン・オフ |
| Esc | 文字入力を終える・選択解除 |
| F1 または ? | ショートカット一覧 |
番号付きリスト（1. / 1) / (1) / i. / i) / I. / a. / a) / A. / A)）は CSS のカウンターで自動的に番号が振られる（行の書式 data-ol と段 data-lv。段ごとに数え、浅い段や番号のない行で数え直す）。行の揃え（左・中央・右）は行ごとに設定でき、幅を決めていないボックスでは最も長い行、幅を決めたボックスではボックスの幅が基準になる。下線は色と二重線、四角囲みは枠の色を ▾ から選べる。
文字装飾は、文字入力中は選んだ範囲に、選択ツールでテキストボックスを選んでいるときはボックス全体にかかる。範囲を選ばずに装飾を選ぶと、これから打つ文字にかかる。
