OrthoNova写真一覧登録手順

患者ページからCaseroomを自動で開き、口腔内一覧・顔面一覧・同方向2枚比較・時系列再生を表示する院内用ブックマークです。

共有URL

https://orthonova-photo-bookmarklet.pages.dev/

チームへ共有する場合はこのURLを送ってください。古い同名ブックマークがある場合は削除して、このページから入れ直します。

まずここを確認

このページの黒いボタンは、ここでクリックするものではありません。ブックマークバーに登録してから使います。
Caseroomタブを開いていなくても、自動で探して開きます。
各写真右上の比較で、同じ方向の写真を2枚並べられます。
比較パネルでは、左右の日付をスライダーや 初診 / 最新 ボタンで素早く切り替えられます。
再生を押すと、左を基準にしたまま右だけが時系列で切り替わります。
古い正方形フォーマットで並びが違う場合は、各写真の上に出る 標準 / 正面5 / 正面8、1-9 の選択、または写真クリックで使うセルを直接変更できます。
番号は左上から右下へ 1,2,3 / 4,5,6 / 7,8,9 です。
古い同名ブックマークがある場合は削除して、新しいものを入れ直してください。

1. 登録する

おすすめ: ドラッグ登録

下の黒いボタンを、Chromeのブックマークバーへドラッグしてください。

OrthoNova写真一覧登録名はこのままでOKです。

ドラッグできない場合: コピー登録

下の青いボタンでコードをコピーします。
Chromeで新しいブックマークを作ります。
名前を OrthoNova写真一覧 にします。
URL欄にコピーしたコードを貼り付けます。

2. 使い方

ChromeでOrthoNovaにログインします。
一覧を作りたい患者ページを開きます。
ブックマークバーの OrthoNova写真一覧 をクリックします。
Caseroomタブが閉じている場合は、自動で開いてから一覧を作ります。
顔面写真入りの9枚レイアウトで並びが違う場合は、まず 標準 / 正面5 / 正面8 を試します。
まだ違う列は、写真上の 1-9 を選ぶか、写真をクリックして直接直します。
比較したい写真の比較を押します。方向タブ、左右の日付ボタン、スライダー、初診 / 最新 ボタンで同じ方向を切り替えられます。
再生を押すと、左の日付を固定して右の日付が順番に進みます。
口腔内 と顔面タブを切り替えて確認します。

口腔内は「日付 → 正面 → 左 → 右 → 上 → 下」。顔面は「日付 → 左側 → 正面 → スマイル」です。

3. 保存方法

PDFで保存する

保存したいタブ、口腔内または顔面を選びます。
必要なら、1-9の選択で配置を直します。
⌘ + P を押します。
送信先を PDFに保存 にして保存します。

保存時の注意

口腔内と顔面は別々にPDF保存してください。
比較パネルは閲覧用で、通常印刷では非表示です。
PDF保存時は1-9の選択欄は印刷されません。
患者写真なので、共有先・保存先に注意してください。

4. うまく動かないとき

何も起きない: 古いブックマークを押している可能性があります。このページを再読み込みして登録し直してください。
写真が見つからない: 患者ページ上にCaseroomタブがあるか確認してください。
顔面写真の並びが違う: 標準 / 正面5 / 正面8 を試し、まだ違えば各列の 1-9 を選ぶか、写真をクリックしてください。
別タブが開かない: Chromeのポップアップブロックを許可してください。

手動登録用コード

Chromeのブックマーク編集画面で、URL欄に下の全文を貼り付けてください。

javascript:(async () => {
  if (!/ortho--nova\.com$/i.test(location.hostname)) {
    alert("このブックマークはOrthoNovaの患者ページで使います。患者ページで押してください。");
    return;
  }

  const report = open("", "_blank");
  if (!report) {
    alert("ポップアップを許可してください。");
    return;
  }
  report.document.write(`<!doctype html><html lang="ja"><head><meta charset="utf-8"><title>OrthoNova写真一覧</title><style>
    :root{color-scheme:light}
    body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f7f8fb;color:#111827;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif}
    .loading{width:min(520px,calc(100vw - 48px));padding:10vh 0 0}
    .kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#64748b}
    .row{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-top:18px}
    .count{font-family:"EB Garamond",Georgia,"Times New Roman",serif;font-size:88px;line-height:.86;font-weight:400;color:#0f172a;font-variant-numeric:lining-nums}
    .ring{width:38px;height:38px;border-radius:50%;background:conic-gradient(from 90deg,#0f172a 0 74deg,transparent 74deg 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:spin 1.05s linear infinite;margin-bottom:4px}
    .phase{margin-top:18px;font-size:13px;line-height:1.7;color:#475569}
    .bar{height:2px;background:#e2e8f0;overflow:hidden;margin-top:22px}
    .bar span{display:block;width:16%;height:100%;background:#0f172a;transition:width .28s ease}
    .note{margin-top:10px;font-size:11px;color:#94a3b8}
    @keyframes spin{to{transform:rotate(360deg)}}
  </style></head><body><main class="loading" aria-live="polite"><div class="kicker">Now loading</div><div class="row"><div class="count" data-loading-count>...</div><div class="ring"></div></div><div class="phase" data-loading-phase>写真一覧を作成中です</div><div class="bar"><span data-loading-bar></span></div><div class="note">OrthoNova photo board</div></main></body></html>`);

  const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  const visibleCaseroomImages = () => [...document.images].filter((img) => {
    const rect = img.getBoundingClientRect();
    return img.alt === "caseroom" && rect.width > 20 && rect.height > 20 && (img.currentSrc || img.src);
  });
  const openCaseroomIfNeeded = async () => {
    if (visibleCaseroomImages().length) return true;
    const tab = [...document.querySelectorAll('[role="tab"],button,a,div,span')].find((el) => {
      const text = (el.innerText || el.textContent || "").replace(/\s+/g, " ").trim();
      const rect = el.getBoundingClientRect();
      return rect.width > 0 && rect.height > 0 && /case\s*room|caseroom/i.test(text);
    });
    if (!tab) return false;
    tab.click();
    for (let i = 0; i < 12; i++) {
      await sleep(500);
      if (visibleCaseroomImages().length) return true;
    }
    return visibleCaseroomImages().length > 0;
  };
  await openCaseroomIfNeeded();
  const waitForImages = async () => {
    for (let i = 0; i < 24; i++) {
      const imgs = visibleCaseroomImages();
      if (imgs.length && imgs.every((img) => img.complete && img.naturalWidth > 0 && img.naturalHeight > 0)) return imgs;
      await sleep(250);
    }
    return visibleCaseroomImages();
  };
  const caseroomImages = await waitForImages();
  const setStatus = (text, current = 0, total = 0) => {
    const raw = String(text || "");
    const match = raw.match(/(\d+)\s*\/\s*(\d+)/);
    const now = current || (match ? Number(match[1]) : 0);
    const max = total || (match ? Number(match[2]) : 0);
    const phaseText = raw.replace(/\s*\d+\s*\/\s*\d+\s*$/, "").replace(/\.\.\.$/, "");
    const phase = report.document.querySelector("[data-loading-phase]");
    const count = report.document.querySelector("[data-loading-count]");
    const bar = report.document.querySelector("[data-loading-bar]");
    if (phase) phase.textContent = phaseText || "写真一覧を作成中です";
    if (count) count.textContent = max ? `${now}/${max}` : "...";
    if (bar) bar.style.width = max ? `${Math.max(8, Math.round(now / max * 100))}%` : "16%";
  };
  const isVisible = (el) => {
    if (!el) return false;
    const rect = el.getBoundingClientRect();
    return rect.width > 20 && rect.height > 20;
  };
  const relatedFileImages = () => [...document.querySelectorAll('img[alt="related-file"]')].filter(isVisible);
  const collectRelatedFiles = () => relatedFileImages().map((img) => {
    const rect = img.getBoundingClientRect();
    return {
      src: img.currentSrc || img.src || "",
      w: img.naturalWidth || Math.round(rect.width) || 1,
      h: img.naturalHeight || Math.round(rect.height) || 1,
      x: Math.round(rect.x),
      y: Math.round(rect.y)
    };
  }).filter((file) => file.src).sort((a, b) => Math.abs(a.y - b.y) > 12 ? a.y - b.y : a.x - b.x).map(({ src, w, h }) => ({ src, w, h }));
  const closePreview = async () => {
    const files = relatedFileImages();
    const root = files[0] && (files[0].closest('[role="dialog"]') || files[0].closest('[class*="modal" i]'));
    if (root) {
      const rr = root.getBoundingClientRect();
      const buttons = [...root.querySelectorAll("button")].filter(isVisible).map((button) => {
        const rect = button.getBoundingClientRect();
        const text = (button.innerText || button.textContent || button.getAttribute("aria-label") || "").replace(/\s+/g, " ").trim();
        return { button, rect, text };
      });
      const close = buttons.find((item) => /閉じる|close|×/i.test(item.text)) || buttons
        .filter((item) => item.rect.y < rr.y + 90 && item.rect.x > rr.x + rr.width * 0.55 && !/ダウンロード/.test(item.text))
        .sort((a, b) => b.rect.x - a.rect.x)[0];
      if (close) close.button.click();
    }
    try {
      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", code: "Escape", keyCode: 27, which: 27, bubbles: true }));
      window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", code: "Escape", keyCode: 27, which: 27, bubbles: true }));
    } catch {}
    for (let i = 0; i < 10; i++) {
      await sleep(100);
      if (!relatedFileImages().length) return;
    }
  };
  const openRelatedFiles = async (img) => {
    if (!img || !isVisible(img)) return [];
    img.scrollIntoView({ block: "center", inline: "center" });
    await sleep(120);
    img.click();
    for (let i = 0; i < 24; i++) {
      await sleep(150);
      const files = collectRelatedFiles();
      if (files.length) {
        await closePreview();
        return files;
      }
    }
    await closePreview();
    return [];
  };

  const E = (s) => String(s || "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
  const iso = (s) => {
    const m = String(s || "").match(/(\d{4})年(\d{2})月(\d{2})日/);
    return m ? `${m[1]}-${m[2]}-${m[3]}` : s;
  };
  const dateRe = /20\d{2}年\d{2}月\d{2}日/;
  const dateEls = [...document.querySelectorAll("p,span,div,button")].map((el) => {
    const text = (el.innerText || el.textContent || "").replace(/\s+/g, " ").trim();
    const match = text.match(dateRe);
    const rect = el.getBoundingClientRect();
    return match && rect.width > 0 && rect.height > 0 && rect.height < 140 ? { date: match[0], x: rect.x, y: rect.y } : null;
  }).filter(Boolean);

  const defaultMap = (layout) => {
    if (layout === "face5") return { front: 4, left: 6, right: 8, upper: 3, lower: 5, face_left: 0, face_front: 1, face_smile: 2 };
    if (layout === "faceGrid") return { front: 4, left: 6, right: 8, upper: 3, lower: 5, face_left: 0, face_front: 1, face_smile: 2 };
    if (layout === "face2" || layout === "face9") return { front: 7, left: 6, right: 8, upper: 3, lower: 5, face_left: 0, face_front: 1, face_smile: 2 };
    return { front: 4, left: 3, right: 5, upper: 1, lower: 7, face_left: 0, face_front: 1, face_smile: 2 };
  };
  const defaultFileMap = (layout, filesOrCount) => {
    const files = Array.isArray(filesOrCount) ? filesOrCount : [];
    const count = files.length || Number(filesOrCount) || 0;
    if (files.length) {
      const blank = { front: -1, left: -1, right: -1, upper: -1, lower: -1, face_left: -1, face_front: -1, face_smile: -1 };
      const slots = files.map((file, index) => ({ index, ratio: (file.w || 1) / (file.h || 1) }));
      const portraits = slots.filter((slot) => slot.ratio < 0.95).map((slot) => slot.index);
      const landscapes = slots.filter((slot) => slot.ratio >= 0.95).map((slot) => slot.index);
      if (portraits.length >= 2) {
        const map = { ...blank };
        map.face_smile = portraits[0] ?? -1;
        map.face_front = portraits[1] ?? -1;
        map.face_left = portraits[2] ?? portraits[0] ?? -1;
        map.left = landscapes[0] ?? -1;
        map.front = landscapes[1] ?? landscapes[0] ?? -1;
        map.right = landscapes[2] ?? -1;
        map.upper = landscapes[3] ?? -1;
        map.lower = landscapes[5] ?? landscapes[4] ?? -1;
        return map;
      }
    }
    if (count === 5 || layout === "oral5") return { front: 2, left: 1, right: 3, upper: 0, lower: 4, face_left: 0, face_front: 1, face_smile: 2 };
    if (count >= 9 && (layout === "face2" || layout === "face9")) return { front: 7, left: 6, right: 8, upper: 3, lower: 5, face_left: 0, face_front: 1, face_smile: 2 };
    if (count >= 9 && (layout === "face5" || layout === "faceGrid")) return { front: 4, left: 6, right: 8, upper: 3, lower: 5, face_left: 0, face_front: 1, face_smile: 2 };
    return defaultMap(layout);
  };
  const defaultPreset = (layout) => layout === "faceGrid" ? "face5" : layout === "face5" || layout === "face2" || layout === "face9" ? layout : "square";

  const candidates = caseroomImages.map((img) => {
    const rect = img.getBoundingClientRect();
    const src = img.currentSrc || img.src || "";
    if (img.alt !== "caseroom" || rect.width < 20 || rect.height < 20 || !src) return null;
    const date = dateEls.find((d) => Math.abs(d.x - rect.x) < 24 && d.y > rect.y && d.y - rect.y < 340);
    if (!date) return null;
    let decoded = src;
    try { decoded = decodeURIComponent(src); } catch {}
    const type = (decoded.match(/thumbnail[_/-](\d+)[_/-]/) || decoded.match(/[?&](?:type|imageType)=(\d+)/) || [])[1] || (decoded.includes("combined_img.png") ? "combined" : "");
    const fallbackSize = type === "5" ? [1853, 1853] : type === "2" || type === "9" ? [1853, 1751] : type === "combined" ? [876, 828] : [1920, 1287];
    const w = img.naturalWidth || fallbackSize[0];
    const h = img.naturalHeight || fallbackSize[1];
    let layout = h >= w * 0.99 ? "square" : h >= w * 0.9 ? "faceGrid" : "wide";
    if (type === "3") layout = "oral5";
    if (type === "5") layout = "face5";
    if (type === "2") layout = "face2";
    if (type === "9") layout = h >= w * 0.99 ? "face5" : "face9";
    if (type === "combined" && h >= w * 0.85) layout = "faceGrid";
    return { el: img, date: date.date, iso: iso(date.date), src, type, w, h, layout, preset: defaultPreset(layout), map: defaultMap(layout), files: [] };
  }).filter(Boolean).sort((a, b) => a.iso.localeCompare(b.iso));

  const isFaceLayout = (item) => item.layout === "face5" || item.layout === "face2" || item.layout === "face9" || item.layout === "faceGrid";
  const selectOnePerDate = (items, score) => {
    const byDate = new Map();
    for (const item of items) {
      const prev = byDate.get(item.iso);
      if (!prev || score(item) < score(prev)) byDate.set(item.iso, item);
    }
    return [...byDate.values()].sort((a, b) => a.iso.localeCompare(b.iso));
  };
  const oralRows = selectOnePerDate(candidates, (item) => item.layout === "oral5" || item.type === "3" ? 0 : isFaceLayout(item) ? 8 : 2);
  const faceRows = selectOnePerDate(candidates.filter(isFaceLayout), (item) => item.layout === "faceGrid" ? 0 : item.layout === "face5" ? 1 : item.layout === "face2" ? 2 : 3);
  const rowsToHydrate = [...new Set(faceRows)];
  for (let i = 0; i < rowsToHydrate.length; i++) {
    setStatus("顔貌写真を整えています", i + 1, rowsToHydrate.length);
    const files = await openRelatedFiles(rowsToHydrate[i].el);
    if (files.length) {
      rowsToHydrate[i].files = files;
      rowsToHydrate[i].map = defaultFileMap(rowsToHydrate[i].layout, files);
      rowsToHydrate[i].preset = "files";
    }
  }
  if (!oralRows.length && !faceRows.length) {
    report.close();
    alert("Caseroom写真が見つかりません。患者ページ上にCaseroomタブがあるか確認してください。");
    return;
  }

  const dataRows = oralRows.map((item) => ({ ...item, group: "oral", files: [], preset: defaultPreset(item.layout), map: defaultMap(item.layout) })).concat(faceRows.map((item) => ({ ...item, group: "face" })));
  const data = JSON.stringify(dataRows.map((item, id) => {
    const { date, iso, src, type, w, h, layout, preset, map, files } = item;
    return { id, group: item.group, date, iso, src, type, w, h, layout, preset, map, files };
  })).replace(/</g, "\\u003c");
  const html = `<!doctype html><html lang="ja"><head><meta charset="utf-8"><title>OrthoNova写真一覧</title><style>
	body{margin:0;background:#f6f8fb;color:#111827;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif}header{padding:6px 8px;border-bottom:1px solid #d8dee8;background:#fff}h1{font-size:14px;margin:0}.meta{font-size:10px;color:#667085;margin-top:1px}.tabs{display:flex;gap:4px;padding:4px 4px 0}.tabs button{border:1px solid #d8dee8;background:#fff;padding:6px 12px;border-radius:6px 6px 0 0;font-weight:700}.tabs button.on{background:#111827;color:#fff;border-color:#111827}.hint{font-size:10px;color:#667085;padding:3px 6px}.compare{margin:4px;border:1px solid #d8dee8;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06);overflow:hidden}.compare[hidden]{display:none}.compareHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:#fff;color:#111827;border-bottom:1px solid #e4e7ec}.compareTitle{display:flex;align-items:baseline;gap:8px;min-width:0}.compareTitle span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#667085;font-weight:800}.compareTitle strong{font-size:14px;line-height:1.25;letter-spacing:0}.compareTitle em{font-style:normal;color:#667085;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.actions button,.actions select{height:28px;border:1px solid #d8dee8;background:#fff;color:#111827;border-radius:999px;padding:0 10px;font-weight:800;font-size:12px;box-shadow:none}.actions button.primary{background:#111827;color:#fff;border-color:#111827}.actions button.on{background:#2563eb;color:#fff;border-color:#2563eb}.actions label{display:flex;align-items:center;gap:4px;color:#475467;font-size:11px;font-weight:800}.actions select{color:#111827;background:#fff;border-color:#d8dee8}.viewTabs{display:flex;gap:4px;overflow-x:auto;padding:7px 8px 3px;background:#f8fafc;border-bottom:1px solid #e4e7ec}.viewTabs button{white-space:nowrap;border:1px solid #d8dee8;background:#fff;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;color:#334155}.viewTabs button.on{background:#111827;color:#fff;border-color:#111827}.timeline{display:grid;gap:5px;padding:7px 8px 8px;background:#f8fafc;border-bottom:1px solid #e4e7ec}.timeRow{display:grid;grid-template-columns:24px minmax(150px,320px) 1fr;align-items:center;gap:7px}.timeRow b{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#e2e8f0;color:#0f172a;font-size:12px}.dateSlider{width:100%;accent-color:#111827}.dateSlider:disabled{opacity:.35}.timelineTools{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px;min-width:0}.quickBtns{display:flex;gap:3px}.quickBtns button,.dateBtns button{border:1px solid #d8dee8;background:#fff;border-radius:999px;padding:3px 7px;font-size:11px;font-weight:800;color:#334155}.quickBtns button{white-space:nowrap}.dateBtns{display:flex;gap:3px;overflow-x:auto;min-width:0}.dateBtns button.on{background:#111827;color:#fff;border-color:#111827}.dateBtns button:disabled{opacity:.35}.compareGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px;background:#fff;align-items:start}.compareSlot{border:1px solid #d8dee8;border-radius:6px;overflow:hidden;background:#fff;box-shadow:none}.compareStage{display:flex;align-items:center;justify-content:center;height:clamp(260px,34vw,480px);min-height:0;padding:8px;background:#f8fafc;overflow:hidden}.compareStage .pic{flex:0 1 auto;width:auto;height:100%;max-width:100%;max-height:100%;background:#fff;box-shadow:none}.compareStage .pic.single{width:auto;height:100%;max-width:100%;background:#fff}.compareMeta{display:flex;gap:8px;align-items:center;padding:6px 8px;font-size:11px;color:#475467;background:#fff;border-top:1px solid #e4e7ec}.compareMeta b{font-size:12px;color:#111827}.placeholder{display:grid;place-items:center;height:clamp(260px,34vw,480px);min-height:0;color:#98a2b3;font-size:22px;font-weight:800;background:#fbfcfe}main{padding:4px}.pane{display:none}.pane.on{display:block}.wrap{overflow-x:auto;background:white;border:1px solid #d8dee8}table{border-collapse:collapse;table-layout:fixed;width:100%}.oral table{min-width:1180px}.face table{min-width:980px}th,td{border-right:1px solid #d8dee8;border-bottom:1px solid #d8dee8;vertical-align:middle}tbody th{width:116px;text-align:left;background:#fbfcfe;padding:2px 4px;font-size:12px}td{padding:1px}.face td{padding:2px}.pic,.blank{width:100%;overflow:hidden;background:#f9fafb}.pic img{display:block;max-width:none;max-height:none;transform-origin:0 0}.pic.single{display:flex;align-items:center;justify-content:center;background:#111827}.pic.single img{width:100%!important;height:100%!important;object-fit:contain;transform:none!important}.blank{aspect-ratio:1/1;background:#fbfcfe}.date{font-weight:700;white-space:nowrap}.applied{color:#667085;font-size:10px;margin-top:2px}.preset{display:grid;grid-template-columns:1fr;gap:2px;margin-top:4px}.preset button{font-size:10px;line-height:1.1;padding:2px;border:1px solid #cbd5e1;background:#fff;border-radius:3px;cursor:pointer}.preset button.on{background:#111827;color:#fff;border-color:#111827}.pick{display:block;width:100%;font-size:11px;margin-bottom:1px;border:1px solid #cbd5e1;background:#fff}.cell{position:relative}.cell.square .pic{cursor:pointer}.cell.isSelected{outline:2px solid #2563eb;outline-offset:-2px}.compareBtn{position:absolute;right:5px;top:5px;z-index:2;border:1px solid rgba(255,255,255,.36);background:rgba(15,23,42,.82);border-radius:999px;padding:3px 8px;font-size:10px;line-height:1.2;font-weight:800;color:#fff;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.22);backdrop-filter:blur(6px)}.compareBtn:hover{background:#0f172a}.compareBtn.on{background:#2563eb;color:#fff;border-color:#93c5fd}.num{position:absolute;left:3px;top:3px;background:rgba(255,255,255,.92);border:1px solid #cbd5e1;border-radius:3px;padding:0 3px;font-size:10px;color:#344054;pointer-events:none}@media(max-width:720px){.compareHead{display:grid;grid-template-columns:1fr}.compareTitle{display:grid;gap:1px}.compareTitle em{white-space:normal}.actions{justify-content:flex-start}.timeRow{grid-template-columns:24px 1fr}.timelineTools{grid-column:2}.compareGrid{grid-template-columns:1fr}.compareStage,.placeholder{height:clamp(220px,62vw,360px);min-height:0}}@media print{.hint,.preset,.pick,.tabs,.applied,.num,.compareBtn,.compare{display:none}.pane{display:block}.pane:not(.on){display:none}}</style></head><body>
<header><h1>OrthoNova 写真一覧</h1><div class="meta">${E(document.title)} / 口腔内<span id="oralCount"></span>日分 / 顔面候補<span id="faceCount"></span>日分</div></header>
<div class="tabs"><button data-tab="oral" class="on">口腔内</button><button data-tab="face">顔面</button></div>
<div class="hint">比較ボタンを1つ押すだけで、同じ方向の次の日付も自動で並びます。比較画面内のスライダーと初診/最新ボタンで素早く切り替え、再生すると右側だけが時系列で進みます。</div>
<section id="compare" class="compare" hidden>
  <div class="compareHead"><div class="compareTitle"><span>Compare</span><strong>比較ビュー</strong><em>左を基準に、右だけ時系列で確認</em></div><div class="actions"><button type="button" id="playBtn" class="primary">再生</button><button type="button" id="prevBtn">前</button><button type="button" id="nextBtn">次</button><button type="button" id="clearBtn">解除</button><label>速さ<select id="speed"><option value="1400">ゆっくり</option><option value="900" selected>標準</option><option value="500">速い</option></select></label></div></div>
  <div id="viewTabs" class="viewTabs"></div>
  <div class="timeline"><div class="timeRow"><b>左</b><input class="dateSlider" type="range" min="0" value="0" data-slider-side="0"><div class="timelineTools"><div class="quickBtns"><button type="button" data-jump-side="0" data-jump="first">初診</button><button type="button" data-jump-side="0" data-jump="latest">最新</button></div><div class="dateBtns" data-side="0"></div></div></div><div class="timeRow"><b>右</b><input class="dateSlider" type="range" min="0" value="0" data-slider-side="1"><div class="timelineTools"><div class="quickBtns"><button type="button" data-jump-side="1" data-jump="first">初診</button><button type="button" data-jump-side="1" data-jump="latest">最新</button></div><div class="dateBtns" data-side="1"></div></div></div></div>
  <div class="compareGrid"><div class="compareSlot" data-slot="0"></div><div class="compareSlot" data-slot="1"></div></div>
</section>
<main><section id="oral" class="pane oral on"><div class="wrap"><table><tbody id="oralBody"></tbody></table></div></section><section id="face" class="pane face"><div class="wrap"><table><tbody id="faceBody"></tbody></table></div></section></main>
<script>
const DATA=${data};
const ORAL=DATA.filter(im=>im.group==="oral");
const FACE=DATA.filter(im=>im.group==="face");
const oralCols=[["front","正面"],["left","左"],["right","右"],["upper","上"],["lower","下"]];
const faceCols=[["face_left","左側"],["face_front","正面"],["face_smile","スマイル"]];
const viewCols=oralCols.concat(faceCols);
let activeView="front";
let selectedPhotos=[];
let playTimer=null;
function esc(s){return String(s||"").replace(/[&<>"']/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]))}
function labelFor(key){const hit=viewCols.find(([k])=>k===key);return hit?hit[1]:key}
function square(im){return im.h>=im.w*.99}
function hasFiles(im){return im&&Array.isArray(im.files)&&im.files.length>0}
function slotCount(im){return hasFiles(im)?im.files.length:9}
function grid9(im){return hasFiles(im)||square(im)||im.layout==="oral5"||im.layout==="face5"||im.layout==="face2"||im.layout==="face9"||im.layout==="faceGrid"}
function variableGrid(im){return !hasFiles(im)&&!square(im)&&(im.layout==="face5"||im.layout==="face2"||im.layout==="face9"||im.layout==="faceGrid")}
function mixed(im){return false}
function isFaceKey(key){return key.indexOf("face_")===0}
function hasFace(im){return im.layout==="face5"||im.layout==="face2"||im.layout==="face9"||im.layout==="faceGrid"}
function rowsForView(key){return isFaceKey(key)?FACE:ORAL}
function preset(layout){if(layout==="face5"||layout==="faceGrid")return{front:4,left:6,right:8,upper:3,lower:5,face_left:0,face_front:1,face_smile:2};if(layout==="face2"||layout==="face9")return{front:7,left:6,right:8,upper:3,lower:5,face_left:0,face_front:1,face_smile:2};return{front:4,left:3,right:5,upper:1,lower:7,face_left:0,face_front:1,face_smile:2}}
function presetLabel(p){return p==="face5"||p==="faceGrid"?"正面5":p==="face2"||p==="face9"?"正面8":p==="手動"?"手動":"標準"}
function gridRect(im,idx){const tw=Math.floor(im.w/3);if(variableGrid(im)){const y1=Math.round(im.h*(im.layout==="faceGrid"?0.53:0.5)),y2=im.layout==="faceGrid"?Math.round(im.h*0.765):y1+Math.round((im.h-y1)/2),ys=[0,y1,y2],hs=[y1,y2-y1,im.h-y2],row=Math.floor(idx/3),col=idx%3;return[col*tw,ys[row],tw,hs[row]]}const th=Math.floor(im.h/3),x=(idx%3)*tw,y=Math.floor(idx/3)*th;return[x,y,tw,th]}
function cropByIndex(im,idx){const r=gridRect(im,idx);return cropRect(im,r[0],r[1],r[2],r[3])}
function cropRect(im,x,y,w,h){const sw=im.w/w*100,sh=im.h/h*100,tx=-(x/im.w)*100,ty=-(y/im.h)*100;return'<div class="pic" style="aspect-ratio:'+w+'/'+h+'"><img src="'+esc(im.src)+'" style="width:'+sw+'%;height:'+sh+'%;transform:translate('+tx+'%,'+ty+'%)"></div>'}
function fileView(im,key){const file=im.files[Number(im.map[key]??0)];if(!file)return'<div class="blank"></div>';const w=file.w||4,h=file.h||3;return'<div class="pic single" style="aspect-ratio:'+w+'/'+h+'"><img src="'+esc(file.src)+'" alt=""></div>'}
function crop(im,key){if(!im)return'<div class="blank"></div>';if(hasFiles(im))return fileView(im,key);if(grid9(im))return cropByIndex(im,Number(im.map[key]??0));const tw=Math.floor(im.w/3),th=Math.floor(im.h/3);const rects={front:[tw,th,tw,th],left:[0,th,tw,th],right:[tw*2,th,tw,th],upper:[tw,0,tw,th],lower:[tw,th*2,tw,im.h-th*2],face_left:[0,0,tw,th],face_front:[tw,0,tw,th],face_smile:[tw*2,0,tw,th]};const r=rects[key];return r?cropRect(im,r[0],r[1],r[2],r[3]):'<div class="blank"></div>'}
function photoFor(im,key){return im?{id:im.id,date:im.iso,key,label:labelFor(key),src:hasFiles(im)&&im.files[Number(im.map[key]??0)]?im.files[Number(im.map[key]??0)].src:im.src}:null}
function imageById(id){return DATA.find(im=>String(im.id)===String(id))}
function photoForDate(key,date){const im=rowsForView(key).find(row=>row.iso===date);return photoFor(im,key)}
function viewDates(key){return rowsForView(key).map(im=>im.iso).sort()}
function defaultPhotos(key){const dates=viewDates(key);if(!dates.length)return[];const first=photoForDate(key,dates[0]);const last=photoForDate(key,dates[dates.length-1]);return first&&last&&first.date!==last.date?[first,last]:first?[first]:[]}
function adjacentPhoto(photo){const dates=viewDates(photo.key);const idx=dates.indexOf(photo.date);if(idx<0)return null;const date=dates[idx+1]||dates[idx-1]||"";return date?photoForDate(photo.key,date):null}
function ensureComparePair(){if(selectedPhotos.length===1){const pair=adjacentPhoto(selectedPhotos[0]);if(pair)selectedPhotos=[selectedPhotos[0],pair].sort((a,b)=>a.date.localeCompare(b.date))}if(selectedPhotos.length>2)selectedPhotos=selectedPhotos.slice(0,2)}
function stopPlayback(){if(playTimer){clearInterval(playTimer);playTimer=null}const btn=document.getElementById("playBtn");if(btn){btn.textContent="再生";btn.classList.remove("on")}}
function select(im,key){if(!grid9(im))return'';let o='';for(let i=0;i<slotCount(im);i++)o+='<option value="'+i+'" '+(Number(im.map[key])===i?'selected':'')+'>'+String(i+1)+'</option>';return'<select class="pick" data-id="'+im.id+'" data-key="'+key+'" title="画像番号から選択">'+o+'</select>'}
function head(im){return'<th><div class="date">'+esc(im.iso)+'</div>'+(grid9(im)?'<div class="applied">'+(hasFiles(im)?'単体: '+slotCount(im)+'枚':'配置: '+presetLabel(im.preset))+'</div>':'')+(grid9(im)&&!hasFiles(im)?'<div class="preset"><button class="'+(im.preset==="square"?'on':'')+'" data-preset="square" data-id="'+im.id+'">標準</button><button class="'+(im.preset==="face5"||im.preset==="faceGrid"?'on':'')+'" data-preset="face5" data-id="'+im.id+'">正面5</button><button class="'+(im.preset==="face2"||im.preset==="face9"?'on':'')+'" data-preset="face9" data-id="'+im.id+'">正面8</button></div>':'')+'</th>'}
function selectedKeySet(){return new Set(selectedPhotos.map(p=>p.key+"|"+p.id))}
function cell(im,key){const n=Number(im.map[key]??0)+1;const on=selectedKeySet().has(key+"|"+im.id);return'<td class="cell '+(grid9(im)?'square ':'')+(on?'isSelected':'')+'" data-id="'+im.id+'" data-key="'+key+'">'+select(im,key)+'<button class="compareBtn '+(on?'on':'')+'" type="button" data-compare="1" data-id="'+im.id+'" data-key="'+key+'">比較</button>'+crop(im,key)+(grid9(im)?'<span class="num">'+n+'</span>':'')+'</td>'}
function render(){document.getElementById("oralCount").textContent=ORAL.length;document.getElementById("faceCount").textContent=FACE.length;document.getElementById("oralBody").innerHTML=ORAL.map(im=>'<tr>'+head(im)+oralCols.map(([k])=>cell(im,k)).join('')+'</tr>').join('');document.getElementById("faceBody").innerHTML=FACE.length?FACE.map(im=>'<tr>'+head(im)+faceCols.map(([k])=>cell(im,k)).join('')+'</tr>').join(''):'<tr><th>なし</th><td></td><td></td><td></td></tr>';renderCompare(false)}
function syncSelectionToView(key){const mapped=selectedPhotos.map(p=>photoForDate(key,p.date)).filter(Boolean);selectedPhotos=mapped.length?mapped:defaultPhotos(key)}
function setActiveView(key){if(!rowsForView(key).length)return;stopPlayback();activeView=key;syncSelectionToView(key);renderCompare(true)}
function selectDateForSide(side,date,scroll=true){const photo=photoForDate(activeView,date);if(!photo)return;stopPlayback();const next=selectedPhotos.slice(0,2);next[side]=photo;selectedPhotos=next.filter(Boolean);renderCompare(scroll)}
function selectIndexForSide(side,index){const dates=viewDates(activeView);if(!dates.length)return;const safe=Math.max(0,Math.min(dates.length-1,Number(index)||0));selectDateForSide(side,dates[safe],false)}
function jumpDate(side,kind){const dates=viewDates(activeView);if(!dates.length)return;selectDateForSide(side,kind==="latest"?dates[dates.length-1]:dates[0],true)}
function selectFromCell(im,key){stopPlayback();if(activeView!==key){activeView=key;selectedPhotos=[]}const photo=photoFor(im,key);if(!photo)return;const hit=selectedPhotos.findIndex(p=>p.id===photo.id&&p.key===photo.key);if(hit>=0){renderCompare(true);return}else if(selectedPhotos.length===0){const pair=adjacentPhoto(photo);selectedPhotos=pair?[photo,pair]:[photo]}else if(selectedPhotos.length<2){selectedPhotos.push(photo)}else{selectedPhotos=[selectedPhotos[0],photo]}selectedPhotos.sort((a,b)=>a.date.localeCompare(b.date));renderCompare(true)}
function playbackDates(){const dates=viewDates(activeView);if(!dates.length)return[];const base=selectedPhotos[0];if(!base)return dates;const later=dates.filter(date=>date!==base.date&&date>base.date);return later.length?later:dates.filter(date=>date!==base.date)}
function stepPlayback(delta){if(!selectedPhotos[0])selectedPhotos=defaultPhotos(activeView);const seq=playbackDates();if(!seq.length)return;const current=selectedPhotos[1]?selectedPhotos[1].date:"";let idx=seq.indexOf(current);idx=idx<0?0:(idx+delta+seq.length)%seq.length;selectedPhotos[1]=photoForDate(activeView,seq[idx]);renderCompare(false)}
function togglePlayback(){if(playTimer){stopPlayback();return}if(!selectedPhotos.length)selectedPhotos=defaultPhotos(activeView);if(selectedPhotos.length===1)stepPlayback(1);const btn=document.getElementById("playBtn");btn.textContent="停止";btn.classList.add("on");playTimer=setInterval(()=>stepPlayback(1),Number(document.getElementById("speed").value||900));renderCompare(true)}
function renderViewTabs(){const tabs=document.getElementById("viewTabs");tabs.innerHTML=viewCols.filter(([key])=>rowsForView(key).length).map(([key,label])=>'<button type="button" class="'+(key===activeView?'on':'')+'" data-view="'+key+'">'+esc(label)+'</button>').join('')}
function renderTimeline(){const dates=viewDates(activeView),rows=rowsForView(activeView);document.querySelectorAll(".dateSlider").forEach(slider=>{const side=Number(slider.dataset.sliderSide||0);const selected=selectedPhotos[side];let idx=selected?dates.indexOf(selected.date):0;if(idx<0)idx=0;slider.max=String(Math.max(dates.length-1,0));slider.value=String(idx);slider.disabled=dates.length<2;slider.title=dates[idx]||""});document.querySelectorAll(".dateBtns").forEach(row=>{const side=Number(row.dataset.side||0);const selected=selectedPhotos[side];row.innerHTML=rows.map(im=>'<button type="button" class="'+(selected&&selected.date===im.iso?'on':'')+'" data-side="'+side+'" data-date="'+esc(im.iso)+'">'+esc(im.iso.slice(5))+'</button>').join('')})}
function renderSlot(slot,photo,index){if(!photo){slot.innerHTML='<div class="placeholder">'+String(index+1)+'</div>';return}const im=imageById(photo.id);slot.innerHTML='<div class="compareStage">'+crop(im,activeView)+'</div><div class="compareMeta"><b>'+esc(photo.date)+'</b><span>'+esc(labelFor(activeView))+'</span></div>'}
function updateCellSelection(){const keys=selectedKeySet();document.querySelectorAll(".cell").forEach(cell=>{const on=keys.has(cell.dataset.key+"|"+cell.dataset.id);cell.classList.toggle("isSelected",on);const btn=cell.querySelector(".compareBtn");if(btn)btn.classList.toggle("on",on)})}
function renderCompare(scroll){const panel=document.getElementById("compare");if(!panel)return;if(selectedPhotos.length)ensureComparePair();panel.hidden=selectedPhotos.length===0;if(panel.hidden){stopPlayback();updateCellSelection();return}renderViewTabs();renderTimeline();document.querySelectorAll(".compareSlot").forEach((slot,index)=>renderSlot(slot,selectedPhotos[index],index));updateCellSelection();if(scroll)panel.scrollIntoView({block:"start",behavior:"smooth"})}
document.addEventListener("input",(e)=>{const slider=e.target.closest("[data-slider-side]");if(slider){stopPlayback();selectIndexForSide(Number(slider.dataset.sliderSide||0),slider.value)}});
document.addEventListener("change",(e)=>{const p=e.target.closest("[data-key]");if(!p)return;const im=imageById(p.dataset.id);if(im){im.map[p.dataset.key]=Number(p.value);im.preset="手動";render()}});
document.addEventListener("click",(e)=>{const cmp=e.target.closest("[data-compare]");if(cmp){const im=imageById(cmp.dataset.id);selectFromCell(im,cmp.dataset.key);return}const jump=e.target.closest("[data-jump]");if(jump){jumpDate(Number(jump.dataset.jumpSide||0),jump.dataset.jump);return}const view=e.target.closest("[data-view]");if(view){setActiveView(view.dataset.view);return}const date=e.target.closest("[data-date]");if(date){selectDateForSide(Number(date.dataset.side||0),date.dataset.date);return}const pre=e.target.closest("[data-preset]");if(pre){const im=imageById(pre.dataset.id);if(im){im.map=preset(pre.dataset.preset);im.preset=pre.dataset.preset;render()}return}if(e.target.id==="playBtn"){togglePlayback();return}if(e.target.id==="nextBtn"){stopPlayback();stepPlayback(1);return}if(e.target.id==="prevBtn"){stopPlayback();stepPlayback(-1);return}if(e.target.id==="clearBtn"){stopPlayback();selectedPhotos=[];render();return}const cellEl=e.target.closest(".cell.square");if(cellEl&&!e.target.closest("select")){const im=imageById(cellEl.dataset.id);if(im&&grid9(im)){const key=cellEl.dataset.key;im.map[key]=(Number(im.map[key]??0)+1)%slotCount(im);im.preset="手動";render()}return}const tab=e.target.closest("[data-tab]");if(tab){document.querySelectorAll(".pane").forEach(x=>x.classList.toggle("on",x.id===tab.dataset.tab));document.querySelectorAll("[data-tab]").forEach(x=>x.classList.toggle("on",x===tab))}});
document.getElementById("speed").addEventListener("change",()=>{if(playTimer){stopPlayback();togglePlayback()}});
render();
</script></body></html>`;
  report.document.open();
  report.document.write(html);
  report.document.close();
})();

このコードにはログイン情報や患者情報は含まれていません。実行時に、開いているOrthoNova画面の写真だけを読み取ります。