ippon-slides 0.1.1 → 0.1.2

package/README.md

@@ -91,6 +91,7 @@ const app = new Hono()
 | `::bg=blue::` | 背景色。`blue` / `orange` / `purple` / `red` / `green` / `black` / `white`、または `#rrggbb` |
 | `::size=1.5::` | 文字サイズの倍率 |
 | `::right::` | ここから右カラム。先頭の見出しはカラムの上に出る |
+| `::note::` | この行以降は発表者ノート。本番には出ず発表者ビュー（`p`）だけに出る |
 | `-# 注釈` | 小さい注釈 |
 | ` ```hcl ` | コード。`hcl` / `console` / `sh` / `json` / `js` / `ts` をハイライト |
 | `!! ` | コードの行頭に付けるとその行を強調 |
@@ -107,10 +108,18 @@ const app = new Hono()
 | `Home` / `End` | 最初 / 最後 |
 | `f` | フルスクリーン |
 | `o` / `Esc` | スライド一覧 |
+| `p` | 発表者ビュー（別ウィンドウ） |
 
 表紙から進むと右下でタイマーが動き、表紙に戻るとリセットされます。
 URL の `#12` で 12 枚目から開けます。
 
+### 発表者ビュー
+
+`p` を押すと別ウィンドウで発表者ビューが開きます。現在のスライド・次のスライド・
+`::note::` で書いたノート・経過タイマー・時計が手元に出て、本番側（プロジェクタに映す画面）は
+通常表示のままです。どちらのウィンドウで `→` / `←` を押しても両画面が同期します。
+発表者ビューは `p` / `Esc` で閉じます。
+
 ## 見た目を変える
 
 `--css` で CSS 変数を上書きできます。

package/assets/deck.js

@@ -5,11 +5,28 @@
 //   Home / End                              最初 / 最後
 //   f                                       フルスクリーン
 //   o / Esc                                 一覧
+//   p                                       発表者ビュー（別ウィンドウ）
 (() => {
     const slides = Array.from(document.querySelectorAll('#deck .slide'));
     if (!slides.length)
         return;
     const $ = (id) => document.getElementById(id);
+    const div = (className) => {
+        const el = document.createElement('div');
+        el.className = className;
+        return el;
+    };
+    function fmt(ms) {
+        const total = Math.floor(ms / 1000);
+        const m = Math.floor(total / 60);
+        const s = total % 60;
+        return m + ':' + (s < 10 ? '0' : '') + s;
+    }
+    // 別ウィンドウで開いたときは発表者ビューとして動く（本番のナビは動かさない）
+    if (window.name === 'ippon-presenter') {
+        presenterMode();
+        return;
+    }
     let idx = 0;
     const progress = $('progress');
     const counter = $('counter');
@@ -18,12 +35,6 @@
     // ---------- タイマー（表紙から進んだら開始、表紙に戻ったらリセット） ----------
     let startedAt = null;
     let ticking;
-    function fmt(ms) {
-        const total = Math.floor(ms / 1000);
-        const m = Math.floor(total / 60);
-        const s = total % 60;
-        return m + ':' + (s < 10 ? '0' : '') + s;
-    }
     function syncTimer() {
         if (idx === 0) {
             startedAt = null;
@@ -45,6 +56,7 @@
         counter.textContent = idx + 1 + ' / ' + slides.length;
         progress.style.width = ((idx + 1) / slides.length) * 100 + '%';
         syncTimer();
+        broadcast();
     }
     function go(n) {
         n = clamp(n);
@@ -59,15 +71,32 @@
         if (n)
             go(n - 1);
     });
+    // ---------- 発表者ビュー（別ウィンドウ）との同期 ----------
+    let presenterWin = null;
+    function openPresenter() {
+        if (presenterWin && !presenterWin.closed) {
+            presenterWin.focus();
+            return;
+        }
+        presenterWin = window.open(location.href, 'ippon-presenter', 'width=1024,height=700');
+    }
+    function broadcast() {
+        if (presenterWin && !presenterWin.closed)
+            presenterWin.postMessage({ ippon: 'state', idx, total: slides.length, startedAt }, '*');
+    }
+    window.addEventListener('message', (e) => {
+        const m = e.data;
+        if (!m || typeof m !== 'object')
+            return;
+        if (m.ippon === 'hello')
+            broadcast();
+        else if (m.ippon === 'go' && typeof m.n === 'number')
+            go(m.n);
+    });
     const overview = $('overview');
     let ovItems = null;
     let ovOpen = false;
     const THUMB = 240;
-    const div = (className) => {
-        const el = document.createElement('div');
-        el.className = className;
-        return el;
-    };
     function buildOverview() {
         return slides.map((s, i) => {
             const item = div('ov-item');
@@ -155,6 +184,9 @@
             case 'o':
                 openOverview();
                 break;
+            case 'p':
+                openPresenter();
+                break;
             case 'Escape':
                 if (!document.fullscreenElement)
                     openOverview();
@@ -194,4 +226,131 @@
     if (start)
         idx = clamp(start - 1);
     render();
+    // ---------- 発表者ビュー本体（別ウィンドウで動く） ----------
+    function presenterMode() {
+        document.body.classList.add('presenter');
+        const root = $('presenter');
+        const left = div('pv-left');
+        const right = div('pv-right');
+        root.appendChild(left);
+        root.appendChild(right);
+        const makeSlot = (labelText) => {
+            const slot = div('pv-slot');
+            const label = div('pv-label');
+            label.textContent = labelText;
+            const frame = div('pv-frame');
+            const scale = div('pv-scale');
+            frame.appendChild(scale);
+            slot.appendChild(label);
+            slot.appendChild(frame);
+            left.appendChild(slot);
+            return { label, frame, scale };
+        };
+        const cur = makeSlot('現在');
+        const nxt = makeSlot('次へ');
+        const clock = div('pv-clock');
+        const elapsedEl = div('pv-elapsed');
+        const wallEl = div('pv-wall');
+        clock.appendChild(elapsedEl);
+        clock.appendChild(wallEl);
+        const controls = div('pv-controls');
+        const prevBtn = document.createElement('button');
+        prevBtn.textContent = '◀';
+        const nextBtn = document.createElement('button');
+        nextBtn.textContent = '▶';
+        controls.appendChild(prevBtn);
+        controls.appendChild(nextBtn);
+        const notesEl = div('pv-notes');
+        right.appendChild(clock);
+        right.appendChild(controls);
+        right.appendChild(notesEl);
+        let curIdx = 0;
+        let total = slides.length;
+        let startedAt = null;
+        function fitPreview(frame, scale) {
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+            const fw = frame.clientWidth;
+            const k = fw / w;
+            frame.style.height = fw * (h / w) + 'px';
+            scale.style.width = w + 'px';
+            scale.style.height = h + 'px';
+            scale.style.transform = 'scale(' + k + ')';
+        }
+        function setPreview(frame, scale, i) {
+            scale.textContent = '';
+            const s = slides[i];
+            if (s)
+                scale.appendChild(s.cloneNode(true));
+            fitPreview(frame, scale);
+        }
+        function draw() {
+            cur.label.textContent = '現在  ' + (curIdx + 1) + ' / ' + total;
+            setPreview(cur.frame, cur.scale, curIdx);
+            const hasNext = curIdx + 1 < total;
+            nxt.label.textContent = hasNext ? '次へ  ' + (curIdx + 2) + ' / ' + total : 'おわり';
+            setPreview(nxt.frame, nxt.scale, hasNext ? curIdx + 1 : -1);
+            const note = slides[curIdx]?.querySelector('.notes');
+            notesEl.innerHTML = note ? note.innerHTML : '<p class="pv-empty">（ノートなし）</p>';
+        }
+        function tick() {
+            elapsedEl.textContent = startedAt == null ? '0:00' : fmt(Date.now() - startedAt);
+            wallEl.textContent = new Date().toLocaleTimeString();
+        }
+        const send = (n) => {
+            if (window.opener)
+                window.opener.postMessage({ ippon: 'go', n }, '*');
+        };
+        prevBtn.addEventListener('click', () => send(curIdx - 1));
+        nextBtn.addEventListener('click', () => send(curIdx + 1));
+        window.addEventListener('message', (e) => {
+            const m = e.data;
+            if (!m || m.ippon !== 'state')
+                return;
+            if (typeof m.idx === 'number')
+                curIdx = m.idx;
+            if (typeof m.total === 'number')
+                total = m.total;
+            startedAt = m.startedAt ?? null;
+            draw();
+            tick();
+        });
+        document.addEventListener('keydown', (e) => {
+            if (e.metaKey || e.ctrlKey || e.altKey)
+                return;
+            switch (e.key) {
+                case 'ArrowRight':
+                case 'PageDown':
+                case ' ':
+                    e.preventDefault();
+                    send(curIdx + 1);
+                    break;
+                case 'ArrowLeft':
+                case 'PageUp':
+                    e.preventDefault();
+                    send(curIdx - 1);
+                    break;
+                case 'Home':
+                    send(0);
+                    break;
+                case 'End':
+                    send(total - 1);
+                    break;
+                case 'p':
+                case 'Escape':
+                    window.close();
+                    break;
+            }
+        });
+        window.addEventListener('resize', () => {
+            fitPreview(cur.frame, cur.scale);
+            fitPreview(nxt.frame, nxt.scale);
+        });
+        window.setInterval(tick, 500);
+        // 本番ウィンドウに現在の状態を要求する
+        if (window.opener)
+            window.opener.postMessage({ ippon: 'hello' }, '*');
+        draw();
+        tick();
+    }
 })();

package/assets/style.css

@@ -424,7 +424,8 @@ body.overview #deck,
 body.overview #progress,
 body.overview #counter,
 body.overview #timer,
-body.overview #hint {
+body.overview #hint,
+body.overview #presenter {
   display: none;
 }
 .ov-item {
@@ -466,6 +467,128 @@ body.overview #hint {
   font-weight: 600;
 }
 
+/* ---------- presenter（p / 別ウィンドウ） ---------- */
+
+/* 発表者ノートは本番・一覧・PDF には出さない（発表者ビューが innerHTML を別途読む） */
+.notes {
+  display: none;
+}
+
+#presenter {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: none;
+  box-sizing: border-box;
+  padding: 24px;
+  gap: 24px;
+  background: #1c1c1f;
+  color: #fff;
+  font-family: system-ui, -apple-system, 'Hiragino Sans', sans-serif;
+}
+body.presenter #presenter {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+}
+body.presenter #deck,
+body.presenter #progress,
+body.presenter #counter,
+body.presenter #timer,
+body.presenter #hint,
+body.presenter #overview {
+  display: none;
+}
+
+.pv-left {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+}
+.pv-slot:last-child {
+  opacity: 0.85;
+}
+.pv-slot:last-child .pv-frame {
+  width: 62%;
+}
+.pv-label {
+  font-size: 0.85rem;
+  color: #9a9aa0;
+  margin-bottom: 6px;
+  font-variant-numeric: tabular-nums;
+}
+.pv-frame {
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: var(--slide-bg);
+  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+}
+.pv-scale {
+  position: relative;
+  transform-origin: 0 0;
+}
+#presenter .slide {
+  display: flex;
+  animation: none;
+  overflow: hidden;
+}
+
+.pv-right {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+}
+.pv-clock {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+}
+.pv-elapsed {
+  font-size: 2.8rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.pv-wall {
+  font-size: 1rem;
+  color: #9a9aa0;
+  font-variant-numeric: tabular-nums;
+}
+.pv-controls {
+  display: flex;
+  gap: 10px;
+}
+.pv-controls button {
+  flex: 1;
+  padding: 10px 0;
+  font-size: 1.1rem;
+  color: #fff;
+  background: #2e2e33;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.pv-controls button:hover {
+  background: var(--slide-accent);
+  border-color: var(--slide-accent);
+}
+.pv-notes {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 18px;
+  background: #242428;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 1.05rem;
+  line-height: 1.7;
+}
+.pv-notes .pv-empty {
+  color: #76767c;
+}
+
 /* ---------- PDF（ブラウザの印刷 → PDF に保存） ---------- */
 
 @media print {
@@ -511,7 +634,8 @@ body.overview #hint {
   #counter,
   #timer,
   #hint,
-  #overview {
+  #overview,
+  #presenter {
     display: none !important;
   }
 }

package/dist/cli.js

@@ -186,6 +186,11 @@ const app = new Hono()
 
 -# 行頭に "!! " を付けるとその行が強調される
 
+::note::
+
+p キーで発表者ビューが開きます。
+この ::note:: 以降は本番に出ず、手元のメモとして見えます。
+
 ---
 
 \`\`\`console

package/dist/markdown.js

@@ -3,6 +3,7 @@
 //   ---                       スライドの区切り
 //   ::center::                1 行目に置くとスライドの指示（center / title / wide / bg=xxx / size=1.5）
 //   ::right::                 ここから右カラム
+//   ::note::                  発表者ノート（この行以降は本番に出ず発表者ビューだけに出る）
 //   -# 注釈                   小さい注釈
 //   ```hcl                    コード（hcl / console / sh / json / js / ts）
 //   !! 行                     コードの行を強調（行頭の "!! " は消える）
@@ -165,6 +166,13 @@ export function slide(src) {
     const classes = ['slide'];
     let style = '';
     let body = src.replace(/^\s+/, '');
+    // 発表者ノート（::note:: 以降。本番スライドには出さない）
+    let notes = '';
+    const noteParts = body.split(/^::note::[ \t]*$/m);
+    if (noteParts.length > 1) {
+        body = noteParts[0];
+        notes = blocks(noteParts.slice(1).join('\n').trim());
+    }
     const d = body.match(/^::([^:]+)::[ \t]*(\n|$)/);
     const tokens = d ? d[1].trim().split(/\s+/) : [];
     if (d && tokens.every((t) => DIRECTIVES.test(t))) {
@@ -198,7 +206,7 @@ export function slide(src) {
     else {
         html = blocks(body);
     }
-    return `<section class="${classes.join(' ')}"${style ? ` style="${style}"` : ''}>${html}</section>`;
+    return `<section class="${classes.join(' ')}"${style ? ` style="${style}"` : ''}>${html}${notes ? `<aside class="notes">${notes}</aside>` : ''}</section>`;
 }
 export function frontmatter(md) {
     const m = md.replace(/^\uFEFF/, '').match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/);

package/dist/render.js

@@ -39,10 +39,11 @@ ${meta.description ? `<meta name="description" content="${esc(meta.description)}
 ${body}
 </div>
 <div id="overview"></div>
+<div id="presenter"></div>
 <div id="progress"></div>
 <div id="timer"></div>
 <div id="counter"></div>
-<div id="hint">← → 移動 ・ f フルスクリーン ・ o 一覧</div>
+<div id="hint">← → 移動 ・ f フルスクリーン ・ o 一覧 ・ p 発表者</div>
 <script>${script}</script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ippon-slides",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "1 枚 1 メッセージのスライドを Markdown から作る CLI。HTML 1 ファイルと PDF を出力",
   "keywords": [
     "slides",