ippon-slides 0.1.0 → 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 変数を上書きできます。
@@ -131,6 +140,19 @@ import { render, toPdf } from 'ippon-slides'
 const { html } = render(markdown, { baseDir: '.', outDir: 'dist' })
 ```
 
+型定義（`.d.ts`）も同梱しています。
+
+## 開発
+
+TypeScript で書いています。`src/` が Node 側、`src/client/deck.ts` がブラウザで動くナビゲーションです。
+
+```sh
+npm install
+npm run build      # dist/ と assets/deck.js を作る
+npm run typecheck
+npm test           # ビルドしてからテスト（テストの実行には Node 22.18+ が必要）
+```
+
 ## License
 
 MIT

package/assets/deck.js

@@ -1,211 +1,356 @@
+"use strict";
 // スライドのナビゲーション。ippon が HTML に埋め込む。
 //   → / Space / PageDown / クリック右側     次へ
 //   ← / PageUp / クリック左側              前へ
 //   Home / End                              最初 / 最後
 //   f                                       フルスクリーン
 //   o / Esc                                 一覧
-;(function () {
-  var slides = Array.prototype.slice.call(document.querySelectorAll('#deck .slide'))
-  if (!slides.length) return
-
-  var idx = 0
-  var progress = document.getElementById('progress')
-  var counter = document.getElementById('counter')
-  var timerEl = document.getElementById('timer')
-
-  function clamp(n) {
-    return Math.max(0, Math.min(slides.length - 1, n))
-  }
-
-  // ---------- タイマー（表紙から進んだら開始、表紙に戻ったらリセット） ----------
-
-  var startedAt = null
-  var ticking = null
-  function fmt(ms) {
-    var s = Math.floor(ms / 1000)
-    var m = Math.floor(s / 60)
-    s = s % 60
-    return m + ':' + (s < 10 ? '0' : '') + s
-  }
-  function syncTimer() {
-    if (idx === 0) {
-      startedAt = null
-      clearInterval(ticking)
-      ticking = null
-      timerEl.textContent = ''
-      return
+//   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 (startedAt === null) startedAt = Date.now()
-    if (!ticking) {
-      ticking = setInterval(function () {
-        timerEl.textContent = fmt(Date.now() - startedAt)
-      }, 500)
+    // 別ウィンドウで開いたときは発表者ビューとして動く（本番のナビは動かさない）
+    if (window.name === 'ippon-presenter') {
+        presenterMode();
+        return;
     }
-    timerEl.textContent = fmt(Date.now() - startedAt)
-  }
-
-  // ---------- 描画 ----------
-
-  function render() {
-    slides.forEach(function (s, i) {
-      s.classList.toggle('active', i === idx)
-    })
-    slides[idx].scrollTop = 0
-    counter.textContent = idx + 1 + ' / ' + slides.length
-    progress.style.width = ((idx + 1) / slides.length) * 100 + '%'
-    syncTimer()
-  }
-  function go(n) {
-    n = clamp(n)
-    if (n === idx) return
-    idx = n
-    render()
-    history.replaceState(null, '', '#' + (idx + 1))
-  }
-  window.addEventListener('hashchange', function () {
-    var n = parseInt(location.hash.slice(1), 10)
-    if (n) go(n - 1)
-  })
-
-  // ---------- 一覧 ----------
-
-  var overview = document.getElementById('overview')
-  var ovItems = null
-  var ovOpen = false
-  var THUMB = 240
-
-  function buildOverview() {
-    ovItems = slides.map(function (s, i) {
-      var item = document.createElement('div')
-      item.className = 'ov-item'
-      var frame = document.createElement('div')
-      frame.className = 'ov-frame'
-      var scale = document.createElement('div')
-      scale.className = 'ov-scale'
-      var clone = s.cloneNode(true)
-      clone.classList.remove('active')
-      scale.appendChild(clone)
-      frame.appendChild(scale)
-      var num = document.createElement('div')
-      num.className = 'ov-num'
-      num.textContent = i + 1
-      item.appendChild(frame)
-      item.appendChild(num)
-      item.addEventListener('click', function () {
-        idx = i
-        closeOverview()
-        render()
-        history.replaceState(null, '', '#' + (idx + 1))
-      })
-      overview.appendChild(item)
-      return { item: item, frame: frame, scale: scale }
-    })
-  }
-  function layoutOverview() {
-    var w = window.innerWidth
-    var h = window.innerHeight
-    var k = THUMB / w
-    ovItems.forEach(function (t) {
-      t.frame.style.width = THUMB + 'px'
-      t.frame.style.height = h * k + 'px'
-      t.scale.style.width = w + 'px'
-      t.scale.style.height = h + 'px'
-      t.scale.style.transform = 'scale(' + k + ')'
-    })
-  }
-  function openOverview() {
-    if (!ovItems) buildOverview()
-    layoutOverview()
-    ovItems.forEach(function (t, i) {
-      t.item.classList.toggle('current', i === idx)
-    })
-    ovOpen = true
-    document.body.classList.add('overview')
-    ovItems[idx].item.scrollIntoView({ block: 'center' })
-  }
-  function closeOverview() {
-    ovOpen = false
-    document.body.classList.remove('overview')
-  }
-  window.addEventListener('resize', function () {
-    if (ovOpen) layoutOverview()
-  })
-
-  // ---------- 入力 ----------
-
-  document.addEventListener('keydown', function (e) {
-    if (e.metaKey || e.ctrlKey || e.altKey) return
-    if (ovOpen) {
-      if (e.key === 'Escape' || e.key === 'o') closeOverview()
-      return
+    let idx = 0;
+    const progress = $('progress');
+    const counter = $('counter');
+    const timerEl = $('timer');
+    const clamp = (n) => Math.max(0, Math.min(slides.length - 1, n));
+    // ---------- タイマー（表紙から進んだら開始、表紙に戻ったらリセット） ----------
+    let startedAt = null;
+    let ticking;
+    function syncTimer() {
+        if (idx === 0) {
+            startedAt = null;
+            clearInterval(ticking);
+            ticking = undefined;
+            timerEl.textContent = '';
+            return;
+        }
+        const t0 = (startedAt ?? (startedAt = Date.now()));
+        ticking ?? (ticking = window.setInterval(() => {
+            timerEl.textContent = fmt(Date.now() - t0);
+        }, 500));
+        timerEl.textContent = fmt(Date.now() - t0);
     }
-    switch (e.key) {
-      case 'ArrowRight':
-      case 'PageDown':
-      case ' ':
-        e.preventDefault()
-        go(idx + 1)
-        break
-      case 'ArrowLeft':
-      case 'PageUp':
-        e.preventDefault()
-        go(idx - 1)
-        break
-      case 'Home':
-        go(0)
-        break
-      case 'End':
-        go(slides.length - 1)
-        break
-      case 'f':
-        if (document.fullscreenElement) document.exitFullscreen()
-        else document.documentElement.requestFullscreen()
-        break
-      case 'o':
-        openOverview()
-        break
-      case 'Escape':
-        if (!document.fullscreenElement) openOverview()
-        break
+    // ---------- 描画 ----------
+    function render() {
+        slides.forEach((s, i) => s.classList.toggle('active', i === idx));
+        slides[idx].scrollTop = 0;
+        counter.textContent = idx + 1 + ' / ' + slides.length;
+        progress.style.width = ((idx + 1) / slides.length) * 100 + '%';
+        syncTimer();
+        broadcast();
     }
-  })
-
-  // 画面の右 3 割で次へ、左 3 割で前へ（リンクと文字選択は邪魔しない）
-  var deck = document.getElementById('deck')
-  deck.addEventListener('click', function (e) {
-    if (e.target.closest('a, button')) return
-    if (String(window.getSelection() || '')) return
-    var x = e.clientX / window.innerWidth
-    if (x > 0.7) go(idx + 1)
-    else if (x < 0.3) go(idx - 1)
-  })
-
-  // 横スワイプ
-  var tx = null
-  var ty = null
-  deck.addEventListener(
-    'touchstart',
-    function (e) {
-      if (e.touches.length !== 1) return (tx = null)
-      tx = e.touches[0].clientX
-      ty = e.touches[0].clientY
-    },
-    { passive: true }
-  )
-  deck.addEventListener(
-    'touchend',
-    function (e) {
-      if (tx === null) return
-      var t = e.changedTouches[0]
-      var dx = t.clientX - tx
-      var dy = t.clientY - ty
-      tx = null
-      if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5) go(dx < 0 ? idx + 1 : idx - 1)
-    },
-    { passive: true }
-  )
-
-  var start = parseInt(location.hash.slice(1), 10)
-  if (start) idx = clamp(start - 1)
-  render()
-})()
+    function go(n) {
+        n = clamp(n);
+        if (n === idx)
+            return;
+        idx = n;
+        render();
+        history.replaceState(null, '', '#' + (idx + 1));
+    }
+    window.addEventListener('hashchange', () => {
+        const n = parseInt(location.hash.slice(1), 10);
+        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;
+    function buildOverview() {
+        return slides.map((s, i) => {
+            const item = div('ov-item');
+            const frame = div('ov-frame');
+            const scale = div('ov-scale');
+            const clone = s.cloneNode(true);
+            clone.classList.remove('active');
+            scale.appendChild(clone);
+            frame.appendChild(scale);
+            const num = div('ov-num');
+            num.textContent = String(i + 1);
+            item.appendChild(frame);
+            item.appendChild(num);
+            item.addEventListener('click', () => {
+                idx = i;
+                closeOverview();
+                render();
+                history.replaceState(null, '', '#' + (idx + 1));
+            });
+            overview.appendChild(item);
+            return { item, frame, scale };
+        });
+    }
+    function layoutOverview(items) {
+        const w = window.innerWidth;
+        const h = window.innerHeight;
+        const k = THUMB / w;
+        for (const t of items) {
+            t.frame.style.width = THUMB + 'px';
+            t.frame.style.height = h * k + 'px';
+            t.scale.style.width = w + 'px';
+            t.scale.style.height = h + 'px';
+            t.scale.style.transform = 'scale(' + k + ')';
+        }
+    }
+    function openOverview() {
+        const items = (ovItems ?? (ovItems = buildOverview()));
+        layoutOverview(items);
+        items.forEach((t, i) => t.item.classList.toggle('current', i === idx));
+        ovOpen = true;
+        document.body.classList.add('overview');
+        items[idx].item.scrollIntoView({ block: 'center' });
+    }
+    function closeOverview() {
+        ovOpen = false;
+        document.body.classList.remove('overview');
+    }
+    window.addEventListener('resize', () => {
+        if (ovOpen && ovItems)
+            layoutOverview(ovItems);
+    });
+    // ---------- 入力 ----------
+    document.addEventListener('keydown', (e) => {
+        if (e.metaKey || e.ctrlKey || e.altKey)
+            return;
+        if (ovOpen) {
+            if (e.key === 'Escape' || e.key === 'o')
+                closeOverview();
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'PageDown':
+            case ' ':
+                e.preventDefault();
+                go(idx + 1);
+                break;
+            case 'ArrowLeft':
+            case 'PageUp':
+                e.preventDefault();
+                go(idx - 1);
+                break;
+            case 'Home':
+                go(0);
+                break;
+            case 'End':
+                go(slides.length - 1);
+                break;
+            case 'f':
+                if (document.fullscreenElement)
+                    document.exitFullscreen();
+                else
+                    document.documentElement.requestFullscreen();
+                break;
+            case 'o':
+                openOverview();
+                break;
+            case 'p':
+                openPresenter();
+                break;
+            case 'Escape':
+                if (!document.fullscreenElement)
+                    openOverview();
+                break;
+        }
+    });
+    // 画面の右 3 割で次へ、左 3 割で前へ（リンクと文字選択は邪魔しない）
+    const deck = $('deck');
+    deck.addEventListener('click', (e) => {
+        if (e.target instanceof Element && e.target.closest('a, button'))
+            return;
+        if (String(window.getSelection() || ''))
+            return;
+        const x = e.clientX / window.innerWidth;
+        if (x > 0.7)
+            go(idx + 1);
+        else if (x < 0.3)
+            go(idx - 1);
+    });
+    // 横スワイプ
+    let touch = null;
+    deck.addEventListener('touchstart', (e) => {
+        const t = e.touches[0];
+        touch = e.touches.length === 1 && t ? { x: t.clientX, y: t.clientY } : null;
+    }, { passive: true });
+    deck.addEventListener('touchend', (e) => {
+        const t = e.changedTouches[0];
+        if (!touch || !t)
+            return;
+        const dx = t.clientX - touch.x;
+        const dy = t.clientY - touch.y;
+        touch = null;
+        if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5)
+            go(dx < 0 ? idx + 1 : idx - 1);
+    }, { passive: true });
+    const start = parseInt(location.hash.slice(1), 10);
+    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();
+    }
+})();