mp 0.1.0

data/public/presenter.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <title>発表者ビュー</title>
+  <link rel="stylesheet" href="_mp/vendor/katex/katex.min.css">
+  <link rel="stylesheet" href="_mp/style.css">
+  <style id="theme"></style>
+  <style id="deck-style"></style>
+  <link rel="stylesheet" href="_mp/presenter.css">
+</head>
+<body class="presenter">
+  <div class="pane current-pane">
+    <div class="label">現在 <span id="page"></span></div>
+    <div class="frame" id="current-frame">
+      <div class="stage" id="current"></div>
+      <img id="mirror" alt="聴衆画面" hidden>
+    </div>
+    <div id="script" hidden></div>
+  </div>
+  <div class="pane next-pane">
+    <div class="label">次</div>
+    <div class="frame" id="next-frame">
+      <div class="stage" id="next"></div>
+      <div id="end" hidden>最後のスライドです</div>
+    </div>
+  </div>
+  <div class="pane notes-pane">
+    <div class="label">ノート</div>
+    <div id="speaker-notes"></div>
+  </div>
+  <div class="status">
+    <span id="elapsed">00:00</span>
+    <span id="clock"></span>
+    <span class="hints">→ 次へ ・ ← 前へ ・ Enter コマンド実行 ・ r タイマー ・ +/- ノート文字 ・ q 終了</span>
+  </div>
+  <script src="_mp/vendor/katex/katex.min.js"></script>
+  <script src="_mp/slides.js"></script>
+  <script src="_mp/presenter.js"></script>
+</body>
+</html>

data/public/presenter.js

@@ -0,0 +1,168 @@
+"use strict";
+
+const $ = (id) => document.getElementById(id);
+const FRAME_INTERVAL = 250;
+
+let deck = null;
+let state = { slide: 0, step: 0, script: null, ready: false };
+let digits = "";
+let startedAt = Date.now();
+let noteSize = 26;
+let mirrorRunning = false;
+let mirrorSlide = null;
+
+const socket = new WebSocket(`ws://${location.host}${location.pathname.replace(/presenter$/, "")}_mp/events?role=presenter`);
+const send = (message) => {
+  if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify(message));
+};
+const command = (cmd, args = {}) => send({ type: "command", cmd, ...args });
+
+async function loadDeck() {
+  deck = await MpSlides.load($("current"), [$("current"), $("next")]);
+  document.title = `発表者ビュー - ${deck.title}`;
+  for (const stage of [$("current"), $("next")]) {
+    stage.querySelectorAll(".embed").forEach(describeEmbed);
+  }
+  layout();
+  render();
+  send({ type: "hello" });
+}
+
+// ターミナルや Web は聴衆画面にだけ実体があるので、ここでは内容の説明を出す
+function describeEmbed(el) {
+  const embed = deck.embeds[el.dataset.embed];
+  const text = document.createElement("pre");
+  text.className = "embed-summary";
+  text.textContent = embed.type === "terminal" ? ["ターミナル", ...embed.commands.map((c) => `$ ${c}`)].join("\n") : `Web\n${embed.src}`;
+  el.append(text);
+}
+
+function layout() {
+  if (!deck) return;
+  for (const [stage, frame] of [[$("current"), $("current-frame")], [$("next"), $("next-frame")]]) {
+    const box = frame.getBoundingClientRect();
+    const scale = Math.min(box.width / deck.size[0], box.height / deck.size[1]);
+    stage.style.transform = `translate(${(box.width - deck.size[0] * scale) / 2}px, ${(box.height - deck.size[1] * scale) / 2}px) scale(${scale})`;
+  }
+}
+
+function showOn(stage, slide, step) {
+  [...stage.children].forEach((el, index) => {
+    el.classList.toggle("active", index === slide);
+    if (index === slide) {
+      el.querySelectorAll(".fragment").forEach((item, i) => item.classList.toggle("shown", i < step));
+    }
+  });
+}
+
+function render() {
+  if (!deck) return;
+  const { slide, step, script, ready } = state;
+  const stage = $("current");
+  const section = stage.children[slide];
+  if (!section) return;
+  showOn(stage, slide, step);
+
+  // 表示されていない項目が残っていれば、次に見えるのは同じスライドの次の項目
+  const fragments = section.querySelectorAll(".fragment").length;
+  const last = slide === deck.slides.length - 1;
+  const done = last && step >= fragments;
+  if (step < fragments) showOn($("next"), slide, step + 1);
+  else if (!last) showOn($("next"), slide + 1, 0);
+  $("next").hidden = done;
+  $("end").hidden = !done;
+
+  $("page").textContent = `${slide + 1} / ${deck.slides.length}`;
+  $("speaker-notes").textContent = deck.slides[slide].notes;
+  renderScript(script, ready);
+  updateMirror(section);
+}
+
+function renderScript(script, ready) {
+  $("script").hidden = script === null;
+  if (script === null) return;
+  if (!script.length) $("script").textContent = "台本のコマンドはすべて実行しました";
+  else $("script").textContent = `${ready ? "Enter で実行" : "入力待ち"}: ${script[0]}`;
+}
+
+// 実体のある埋め込みは、聴衆画面をそのまま映す
+function updateMirror(section) {
+  const hasEmbed = !!section.querySelector(".embed");
+  if (mirrorSlide !== state.slide) $("mirror").hidden = true; // 前のスライドの画面を残さない
+  mirrorSlide = hasEmbed ? state.slide : null;
+  if (hasEmbed && !mirrorRunning) {
+    mirrorRunning = true;
+    send({ type: "frame" });
+  }
+}
+
+function onFrame(data) {
+  mirrorRunning = false;
+  if (mirrorSlide === null) return;
+  $("mirror").src = `data:image/jpeg;base64,${data}`;
+  $("mirror").hidden = false;
+  setTimeout(() => {
+    if (mirrorSlide !== null && !mirrorRunning) {
+      mirrorRunning = true;
+      send({ type: "frame" });
+    }
+  }, FRAME_INTERVAL);
+}
+
+function tick() {
+  const seconds = Math.floor((Date.now() - startedAt) / 1000);
+  const pad = (n) => String(n).padStart(2, "0");
+  $("elapsed").textContent = `${seconds >= 3600 ? `${Math.floor(seconds / 3600)}:` : ""}${pad(Math.floor(seconds / 60) % 60)}:${pad(seconds % 60)}`;
+  $("clock").textContent = new Date().toLocaleTimeString("ja-JP", { hour: "2-digit", minute: "2-digit" });
+}
+
+function setNoteSize(size) {
+  noteSize = Math.min(Math.max(size, 14), 60);
+  $("speaker-notes").style.fontSize = `${noteSize}px`;
+}
+
+window.addEventListener("keydown", (event) => {
+  if (event.metaKey || event.ctrlKey || event.altKey) return;
+  const actions = {
+    ArrowRight: () => command("next"), ArrowDown: () => command("next"), PageDown: () => command("next"), " ": () => command("next"),
+    ArrowLeft: () => command("prev"), ArrowUp: () => command("prev"), PageUp: () => command("prev"),
+    Home: () => command("first"),
+    End: () => command("last"),
+    r: () => { startedAt = Date.now(); tick(); },
+    "+": () => setNoteSize(noteSize + 2),
+    "=": () => setNoteSize(noteSize + 2),
+    "-": () => setNoteSize(noteSize - 2),
+    q: () => send({ type: "quit" }),
+  };
+  if (/^\d$/.test(event.key)) {
+    digits += event.key;
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    if (digits) command("goto", { slide: Number(digits) - 1 });
+    else command("run");
+    digits = "";
+  } else if (actions[event.key]) {
+    event.preventDefault();
+    digits = "";
+    actions[event.key]();
+  }
+});
+
+socket.onopen = () => send({ type: "hello" });
+socket.onmessage = (event) => {
+  const message = JSON.parse(event.data);
+  if (message.type === "state") {
+    state = message;
+    render();
+  } else if (message.type === "frame") {
+    onFrame(message.data);
+  } else if (message.type === "reload") {
+    loadDeck();
+  }
+};
+
+window.addEventListener("resize", layout);
+setInterval(tick, 1000);
+tick();
+setNoteSize(noteSize);
+loadDeck();

data/public/slides.js

@@ -0,0 +1,35 @@
+"use strict";
+
+// 聴衆画面と発表者ビューで共通のスライド読み込み
+const MpSlides = {
+  async load(stage, stages = [stage]) {
+    const deck = await (await fetch("_mp/deck.json", { cache: "no-store" })).json();
+    document.getElementById("theme").textContent = deck.themeCss;
+    document.getElementById("deck-style").textContent = deck.style;
+    for (const target of stages) {
+      target.style.width = `${deck.size[0]}px`;
+      target.style.height = `${deck.size[1]}px`;
+      target.innerHTML = deck.slides.map((slide) => slide.html).join("");
+      target.querySelectorAll(".math").forEach((el) => {
+        katex.render(el.dataset.tex, el, { displayMode: el.dataset.display === "true", throwOnError: false });
+      });
+    }
+    await document.fonts.ready;
+    stages.forEach((target) => MpSlides.fitHeadings(target));
+    document.title = deck.title;
+    return deck;
+  },
+
+  // `# <!-- fit --> 見出し` を横幅いっぱいにする
+  fitHeadings(stage) {
+    stage.querySelectorAll(".fit").forEach((heading) => {
+      const span = document.createElement("span");
+      span.style.whiteSpace = "nowrap";
+      span.append(...heading.childNodes);
+      heading.append(span);
+      const available = heading.clientWidth;
+      const size = parseFloat(getComputedStyle(heading).fontSize);
+      heading.style.fontSize = `${Math.floor(size * (available / span.offsetWidth) * 0.98)}px`;
+    });
+  },
+};

data/public/style.css

@@ -0,0 +1,93 @@
+html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
+
+#stage { position: absolute; left: 50%; top: 50%; overflow: hidden; }
+
+section.slide {
+  --pad: 72px;
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 56px var(--pad);
+  padding-left: calc(var(--split-left, 0%) + var(--pad));
+  padding-right: calc(var(--split-right, 0%) + var(--pad));
+  overflow: hidden;
+  visibility: hidden;
+}
+section.slide.active { visibility: visible; }
+
+section.slide.cover, section.slide.lead { justify-content: center; }
+section.slide.lead { text-align: center; align-items: center; }
+
+/* 見出しの下を 2 列にする: <!-- _class: columns --> */
+section.slide.columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 0 24px;
+}
+section.slide.columns > h2 { grid-column: 1 / -1; }
+
+.fragment { visibility: hidden; }
+.fragment.shown { visibility: inherit; }
+
+.bg-layer { position: absolute; top: 0; bottom: 0; display: flex; z-index: 0; }
+.bg-image { flex: 1; background-position: center; background-repeat: no-repeat; }
+section.slide > :not(.bg-layer, header, footer, .page-number) { position: relative; z-index: 1; }
+
+section.slide > header, section.slide > footer, section.slide > .page-number {
+  position: absolute;
+  left: var(--pad);
+  right: var(--pad);
+  z-index: 2;
+  font-size: 18px;
+  opacity: .65;
+}
+section.slide > header { top: 20px; }
+section.slide > footer { bottom: 20px; }
+section.slide > .page-number { bottom: 20px; left: auto; right: 32px; }
+
+.embed {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  margin: 12px 0 24px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #14161b;
+  box-sizing: border-box;
+}
+.terminal-host { position: fixed; z-index: 5; overflow: hidden; }
+.terminal-host .xterm { height: 100%; }
+.terminal-host .xterm-viewport { background: transparent !important; scrollbar-width: none; }
+.embed-web { background: #fff; }
+.embed-web iframe { width: 100%; height: 100%; border: 0; display: block; }
+.shield {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.highlight pre, pre.highlight { margin: 0 0 .55em; }
+
+#notes, #help {
+  position: fixed;
+  z-index: 10;
+  box-sizing: border-box;
+  background: rgba(15, 17, 22, .94);
+  color: #f2f2f2;
+  font: 18px/1.6 "Hiragino Sans", system-ui, sans-serif;
+}
+#notes { left: 0; right: 0; bottom: 0; max-height: 35%; overflow: auto; padding: 16px 28px; white-space: pre-wrap; }
+#help { top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 32px; border-radius: 12px; }
+#help h3 { margin: 0 0 12px; }
+#help dl { display: grid; grid-template-columns: auto auto; gap: 4px 28px; margin: 0; }
+#help dd { margin: 0; opacity: .8; }
+[hidden] { display: none !important; }

data/themes/dark.css

@@ -0,0 +1,26 @@
+/* mp-dark */
+section {
+  background: #12151c;
+  color: #e9ecf2;
+  font: 30px/1.55 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
+  --accent: #6ea8ff;
+  --muted: #222834;
+}
+section h1 { font-size: 68px; line-height: 1.2; margin: 0 0 .3em; }
+section h2 { font-size: 44px; line-height: 1.25; margin: 0 0 .5em; padding-bottom: .2em; border-bottom: 3px solid var(--accent); }
+section h3 { font-size: 34px; margin: .5em 0 .3em; }
+section p, section ul, section ol, section blockquote, section table { margin: 0 0 .55em; }
+section ul, section ol { padding-left: 1.2em; }
+section li { margin: .15em 0; }
+section a, section strong { color: var(--accent); }
+section img { max-width: 100%; }
+section code { font: .86em Menlo, monospace; background: var(--muted); padding: .1em .3em; border-radius: 5px; }
+section pre { background: var(--muted); padding: 18px 22px; border-radius: 10px; overflow: hidden; line-height: 1.4; }
+section pre code { background: none; padding: 0; font-size: 24px; }
+section blockquote { border-left: 6px solid var(--accent); padding-left: .7em; color: #a7afbf; }
+section table { border-collapse: collapse; }
+section th, section td { border: 1px solid #3a4252; padding: .3em .7em; }
+section th { background: var(--muted); }
+
+section.cover h1 { color: var(--accent); }
+section.invert { background: #f6f7fa; color: #1f2430; --muted: #e7eaf0; }

data/themes/default.css

@@ -0,0 +1,27 @@
+/* mp default theme */
+section {
+  background: #fff;
+  color: #1f2430;
+  font: 30px/1.55 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
+  --accent: #2563c9;
+  --muted: #f1f3f7;
+}
+section h1 { font-size: 68px; line-height: 1.2; margin: 0 0 .3em; }
+section h2 { font-size: 44px; line-height: 1.25; margin: 0 0 .5em; padding-bottom: .2em; border-bottom: 3px solid var(--accent); }
+section h3 { font-size: 34px; margin: .5em 0 .3em; }
+section p, section ul, section ol, section blockquote, section table { margin: 0 0 .55em; }
+section ul, section ol { padding-left: 1.2em; }
+section li { margin: .15em 0; }
+section a { color: var(--accent); }
+section strong { color: var(--accent); }
+section img { max-width: 100%; }
+section code { font: .86em Menlo, monospace; background: var(--muted); padding: .1em .3em; border-radius: 5px; }
+section pre { background: var(--muted); padding: 18px 22px; border-radius: 10px; overflow: hidden; line-height: 1.4; }
+section pre code { background: none; padding: 0; font-size: 24px; }
+section blockquote { border-left: 6px solid var(--accent); padding-left: .7em; color: #5a6272; }
+section table { border-collapse: collapse; }
+section th, section td { border: 1px solid #d5dae3; padding: .3em .7em; }
+section th { background: var(--muted); }
+
+section.cover h1 { color: var(--accent); }
+section.invert { background: #161a22; color: #eef0f4; --muted: #262c38; }

data/vendor/assets/katex/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2020 Khan Academy and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/vendor/assets/katex/auto-render.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,function(e){return function(){"use strict";var t={757:function(t){t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};r.d(o,{default:function(){return p}});var i=r(757),a=r.n(i);const l=function(e,t,n){let r=n,o=0;const i=e.length;for(;r<t.length;){const n=t[r];if(o<=0&&t.slice(r,r+i)===e)return r;"\\"===n?r++:"{"===n?o++:"}"===n&&o--,r++}return-1},s=/^\\begin{/;var d=function(e,t){let n;const r=[],o=new RegExp("("+t.map(e=>e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")).join("|")+")");for(;n=e.search(o),-1!==n;){n>0&&(r.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));const o=t.findIndex(t=>e.startsWith(t.left));if(n=l(t[o].right,e,t[o].left.length),-1===n)break;const i=e.slice(0,n+t[o].right.length),a=s.test(i)?i:e.slice(t[o].left.length,n);r.push({type:"math",data:a,rawData:i,display:t[o].display}),e=e.slice(n+t[o].right.length)}return""!==e&&r.push({type:"text",data:e}),r};const c=function(e,t){const n=d(e,t.delimiters);if(1===n.length&&"text"===n[0].type)return null;const r=document.createDocumentFragment();for(let e=0;e<n.length;e++)if("text"===n[e].type)r.appendChild(document.createTextNode(n[e].data));else{const o=document.createElement("span");let i=n[e].data;t.displayMode=n[e].display;try{t.preProcess&&(i=t.preProcess(i)),a().render(i,o,t)}catch(o){if(!(o instanceof a().ParseError))throw o;t.errorCallback("KaTeX auto-render: Failed to parse `"+n[e].data+"` with ",o),r.appendChild(document.createTextNode(n[e].rawData));continue}r.appendChild(o)}return r},f=function(e,t){for(let o=0;o<e.childNodes.length;o++){const i=e.childNodes[o];if(3===i.nodeType){var n;let a=null!=(n=i.textContent)?n:"",l=i.nextSibling,s=0;for(;l&&l.nodeType===Node.TEXT_NODE;){var r;a+=null!=(r=l.textContent)?r:"",l=l.nextSibling,s++}const d=c(a,t);if(d){for(let e=0;e<s;e++)i.nextSibling.remove();o+=d.childNodes.length-1,e.replaceChild(d,i)}else o+=s}else if(1===i.nodeType){const e=" "+i.className+" ";!t.ignoredTags.has(i.nodeName.toLowerCase())&&t.ignoredClasses.every(t=>!e.includes(" "+t+" "))&&f(i,t)}}};var p=function(e,t){if(!e)throw new Error("No element provided to render");const n={};Object.assign(n,t),n.delimiters=n.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],n.ignoredTags=new Set((null==t?void 0:t.ignoredTags)||["script","noscript","style","textarea","pre","code","option"]),n.ignoredClasses=n.ignoredClasses||[],n.errorCallback=n.errorCallback||console.error,n.macros=n.macros||{},f(e,n)};return o=o.default}()});