slide-interval-show.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Canvas スライドショー（プレビュー）</title>
  <style>
    :root{--gap:10px;--ui-bg:#0f1720;--card:#0b1220;--accent:#06b6d4;color-scheme:light}
    html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
    .app{display:grid;grid-template-columns:360px 1fr;gap:var(--gap);height:100vh;padding:12px;background:linear-gradient(180deg,#071025 0%, #081027 100%);box-sizing:border-box}
    .panel{background:rgba(255,255,255,0.04);padding:12px;border-radius:8px;display:flex;flex-direction:column;gap:10px;min-height:0}
    h1{font-size:16px;margin:0 0 6px 0}
    label{font-size:13px;color:#cbd5e1}
    input[type=file]{width:100%}
    .controls{display:flex;gap:8px;flex-wrap:wrap}
    .controls > *{flex:1}
    button{padding:8px 10px;border-radius:6px;border:0;background:var(--accent);color:#032;cursor:pointer}
    button.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#e2e8f0}
    input[type=number],select,input[type=text]{width:100%;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#e2e8f0}
    .dropzone{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;border:2px dashed rgba(255,255,255,0.04);border-radius:6px;color:#94a3b8;text-align:center}
    .thumbs{display:flex;gap:6px;overflow:auto;padding-top:6px}
    .thumb{width:72px;height:48px;object-fit:cover;border-radius:4px;cursor:pointer;opacity:.8;border:2px solid transparent}
    .thumb.active{border-color:var(--accent);opacity:1}
    .viewer{display:flex;flex-direction:column;gap:8px}
    .canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#000;border-radius:6px;padding:8px}
    canvas{max-width:100%;max-height:100%;background:#000;border-radius:4px}
    .toolbar{display:flex;gap:8px;align-items:center}
    .status{color:#cbd5e1;font-size:13px}
    footer{font-size:12px;color:#94a3b8}
    @media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr}}
  </style>
  <!-- PDF.js CDN (used to render single-page PDFs into canvas thumbnails) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
</head>
<body>
  <div class="app">
    <div class="panel" id="panel">
      <h1>スライド設定</h1>
      <label>画像 / PDF を追加（複数可）</label>
      <input id="file" type="file" accept="image/*,application/pdf" multiple />
      <div class="dropzone" id="drop">またはここに画像/ PDF をドラッグ＆ドロップ（PDFは1ページスライドを想定）</div>

      <div style="display:flex;gap:8px">
        <div style="flex:1">
          <label>切替秒数（秒）</label>
          <input id="interval" type="number" min="1" value="5" />
        </div>
        <div style="width:120px">
          <label>プリセット</label>
          <select id="preset">
            <option value="5">5秒</option>
            <option value="3">3秒</option>
            <option value="10">10秒</option>
            <option value="custom">カスタム</option>
          </select>
        </div>
      </div>

      <div style="display:flex;gap:8px">
        <div style="flex:1">
          <label>スライドサイズ（横）px</label>
          <input id="width" type="number" min="100" value="1280" />
        </div>
        <div style="flex:1">
          <label>スライドサイズ（縦）px</label>
          <input id="height" type="number" min="100" value="720" />
        </div>
      </div>

      <div>
        <label>フィットモード</label>
        <div style="display:flex;gap:8px;margin-top:6px">
          <label style="font-size:13px;color:#cbd5e1"><input type="radio" name="fit" value="contain" checked /> contain (縦横全体を表示)</label>
          <label style="font-size:13px;color:#cbd5e1"><input type="radio" name="fit" value="cover" /> cover (埋める)</label>
        </div>
      </div>

      <div style="display:flex;gap:8px;align-items:end">
        <div style="flex:1">
          <label>トランジション（秒）</label>
          <input id="transition" type="number" step="0.1" min="0" value="0.6" />
        </div>
        <div style="width:120px">
          <label>表示方法</label>
          <select id="modeSelect"><option value="crossfade">クロスフェード</option><option value="cut">カット</option></select>
        </div>
      </div>

      <div class="controls">
        <button id="play">再生</button>
        <button id="prev" class="secondary">◀ 前へ</button>
        <button id="next" class="secondary">次へ ▶</button>
        <button id="fs" class="secondary">全画面</button>
        <button id="openNew" class="secondary">別ウィンドウで開く</button>
      </div>

      <div>
        <label>サムネイル（クリックでジャンプ）</label>
        <div class="thumbs" id="thumbs"></div>
      </div>

      <footer>
        <div style="margin-top:8px">ヒント: Space = 再生/一時停止, ← → = 前/次, Enter = 全画面切替</div>
      </footer>
    </div>

    <div class="panel viewer">
      <div class="toolbar">
        <div class="status" id="status">画像なし</div>
        <div style="flex:1"></div>
        <div>
          <label style="font-size:13px;color:#cbd5e1">スライド位置</label>
          <input id="indexInput" type="number" min="1" value="1" style="width:80px;padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#e2e8f0" />
        </div>
      </div>

      <div class="canvas-wrap">
        <canvas id="canvas" width="1280" height="720"></canvas>
      </div>

    </div>
  </div>

<script>
(function(){
  // Ensure PDF.js worker is configured
  if(window['pdfjsLib']){
    try{ window['pdfjsLib'].GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js'; }catch(e){}
  }

  const fileEl = document.getElementById('file');
  const drop = document.getElementById('drop');
  const thumbs = document.getElementById('thumbs');
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const playBtn = document.getElementById('play');
  const prevBtn = document.getElementById('prev');
  const nextBtn = document.getElementById('next');
  const fsBtn = document.getElementById('fs');
  const openNewBtn = document.getElementById('openNew');
  const status = document.getElementById('status');
  const intervalInput = document.getElementById('interval');
  const widthInput = document.getElementById('width');
  const heightInput = document.getElementById('height');
  const preset = document.getElementById('preset');
  const indexInput = document.getElementById('indexInput');
  const transitionInput = document.getElementById('transition');
  const modeSelect = document.getElementById('modeSelect');

  let images = []; // {img, url, name, kind: 'image'|'pdf'}
  let current = 0;
  let timer = null;
  let playing = false;
  let transitioning = false;

  function updateStatus(){
    if(images.length===0){ status.textContent = '画像なし'; return }
    status.textContent = `スライド ${current+1} / ${images.length} — ${images[current].name}`;
  }

  function clearCanvas(){
    ctx.fillStyle = '#000';
    ctx.fillRect(0,0,canvas.width,canvas.height);
  }

  function computeDrawParams(img){
    const mode = document.querySelector('input[name=fit]:checked').value;
    const cw = canvas.width, ch = canvas.height;
    const iw = img.width, ih = img.height;
    if(iw===0||ih===0) return {dx:0,dy:0,dw:0,dh:0};
    let scale, dw, dh, dx, dy;
    if(mode === 'contain'){
      scale = Math.min(cw/iw, ch/ih);
    }else{
      scale = Math.max(cw/iw, ch/ih);
    }
    dw = Math.round(iw * scale);
    dh = Math.round(ih * scale);
    dx = Math.round((cw - dw)/2);
    dy = Math.round((ch - dh)/2);
    return {dx,dy,dw,dh};
  }

  function drawScaled(img){
    const p = computeDrawParams(img);
    ctx.drawImage(img, p.dx, p.dy, p.dw, p.dh);
  }

  function drawImageToCanvas(imgObj){
    clearCanvas();
    if(!imgObj) return;
    drawScaled(imgObj.img);
  }

  function startTransition(toIndex){
    if(images.length===0) return;
    toIndex = (toIndex + images.length) % images.length;
    if(toIndex === current){ render(); return; }
    const mode = modeSelect.value;
    const duration = Math.max(0, Number(transitionInput.value) || 0) * 1000;
    if(mode === 'cut' || duration <= 0){ current = toIndex; render(); return; }
    if(transitioning) return; // ignore requests during transition
    transitioning = true;
    const fromIndex = current;
    const start = performance.now();
    function step(now){
      const elapsed = now - start;
      const t = Math.min(1, elapsed / duration);
      ctx.clearRect(0,0,canvas.width,canvas.height);
      // draw from with alpha
      ctx.save(); ctx.globalAlpha = 1 - t; drawScaled(images[fromIndex].img); ctx.restore();
      // draw to with alpha
      ctx.save(); ctx.globalAlpha = t; drawScaled(images[toIndex].img); ctx.restore();
      if(elapsed < duration){ requestAnimationFrame(step); }
      else { current = toIndex; transitioning = false; render(); }
    }
    requestAnimationFrame(step);
  }

  function render(){
    drawImageToCanvas(images[current]);
    updateStatus();
    updateThumbActive();
    indexInput.value = Math.min(Math.max(1, current+1), Math.max(1, images.length));
  }

  function next(){
    if(images.length===0) return;
    startTransition(current + 1);
  }
  function prev(){
    if(images.length===0) return;
    startTransition(current - 1);
  }

  function start(){
    const secs = Math.max(1, Number(intervalInput.value) || 5);
    stop();
    timer = setInterval(()=>{ next(); }, secs*1000);
    playing = true; playBtn.textContent = '一時停止';
  }
  function stop(){
    if(timer){ clearInterval(timer); timer = null }
    playing = false; playBtn.textContent = '再生';
  }
  function togglePlay(){ playing ? stop() : start() }

  function updateThumbs(){
    thumbs.innerHTML = '';
    images.forEach((it, i) => {
      const imgEl = document.createElement('img');
      imgEl.src = it.url;
      imgEl.className = 'thumb' + (i===current ? ' active' : '');
      imgEl.title = `${i+1}: ${it.name} ${it.kind==='pdf' ? '(PDF)' : ''}`;
      imgEl.addEventListener('click', ()=>{ startTransition(i); });
      thumbs.appendChild(imgEl);
    });
  }
  function updateThumbActive(){
    Array.from(thumbs.children).forEach((el, i)=>{
      el.classList.toggle('active', i===current);
    });
  }

  // Helper: render first page of PDF file to an Image object (dataURL)
  function renderPdfFirstPageToImage(file, desiredWidth, desiredHeight){
    return new Promise((resolve, reject) => {
      if(!window['pdfjsLib']) return reject(new Error('PDF.js が読み込まれていません'));
      const reader = new FileReader();
      reader.onload = async ()=>{
        try{
          const arrayBuffer = reader.result;
          const loadingTask = window['pdfjsLib'].getDocument({data: arrayBuffer});
          const pdf = await loadingTask.promise;
          const page = await pdf.getPage(1);
          const opv = page.getViewport({scale:1});
          const pageW = opv.width, pageH = opv.height;
          // choose scale to fit desired size while preserving aspect
          const scale = Math.min(desiredWidth / pageW, desiredHeight / pageH);
          const viewport = page.getViewport({scale});
          const off = document.createElement('canvas');
          off.width = Math.round(viewport.width);
          off.height = Math.round(viewport.height);
          const offCtx = off.getContext('2d');
          const renderContext = { canvasContext: offCtx, viewport };
          await page.render(renderContext).promise;
          const dataUrl = off.toDataURL('image/png');
          const img = new Image();
          img.onload = ()=> resolve({img, url: dataUrl, name: file.name, kind: 'pdf'});
          img.src = dataUrl;
        }catch(err){ reject(err); }
      };
      reader.onerror = ()=> reject(reader.error);
      reader.readAsArrayBuffer(file);
    });
  }

  function handleFiles(fileList){
    const files = Array.from(fileList).filter(f=>f.type.startsWith('image/') || f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf'));
    if(files.length===0) return;

    const desiredW = Math.max(100, Number(widthInput.value)||1280);
    const desiredH = Math.max(100, Number(heightInput.value)||720);

    const promises = files.map(f => new Promise((resolve)=>{
      if(f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf')){
        // render first page
        renderPdfFirstPageToImage(f, desiredW, desiredH).then(res => resolve(res)).catch(err => {
          console.warn('PDF render error', err);
          // fallback: create a placeholder image
          const off = document.createElement('canvas'); off.width = Math.max(200, desiredW/4); off.height = Math.max(150, desiredH/4);
          const octx = off.getContext('2d'); octx.fillStyle='#333'; octx.fillRect(0,0,off.width,off.height); octx.fillStyle='#fff'; octx.fillText('PDF',10,20);
          const img = new Image(); img.onload = ()=> resolve({img, url:off.toDataURL(), name:f.name+' (PDF: render failed)', kind:'pdf'});
          img.src = off.toDataURL();
        });
      }else{
        const fr = new FileReader();
        fr.onload = ()=>{
          const img = new Image();
          img.onload = ()=> resolve({img, url:fr.result, name:f.name, kind: 'image'});
          img.src = fr.result;
        };
        fr.readAsDataURL(f);
      }
    }));

    Promise.all(promises).then(results=>{
      const firstNewIndex = images.length;
      images = images.concat(results);
      if(images.length>0) current = firstNewIndex; // jump to first newly added
      updateThumbs();
      render();
    }).catch(err=>{ console.warn(err); });
  }

  // events
  fileEl.addEventListener('change', e=>{
    handleFiles(e.target.files);
    fileEl.value = '';
  });

  drop.addEventListener('dragover', e=>{ e.preventDefault(); drop.style.borderColor = 'rgba(255,255,255,0.12)'; });
  drop.addEventListener('dragleave', e=>{ drop.style.borderColor = ''; });
  drop.addEventListener('drop', e=>{ e.preventDefault(); drop.style.borderColor = ''; handleFiles(e.dataTransfer.files); });

  playBtn.addEventListener('click', ()=>{ togglePlay(); });
  nextBtn.addEventListener('click', ()=>{ next(); });
  prevBtn.addEventListener('click', ()=>{ prev(); });

  intervalInput.addEventListener('change', ()=>{ if(playing) start(); });
  preset.addEventListener('change', ()=>{
    if(preset.value !== 'custom'){
      intervalInput.value = preset.value;
      if(playing) start();
    }
  });

  widthInput.addEventListener('change', ()=>{ canvas.width = Math.max(100, Number(widthInput.value)||1280); render(); });
  heightInput.addEventListener('change', ()=>{ canvas.height = Math.max(100, Number(heightInput.value)||720); render(); });
  document.querySelectorAll('input[name=fit]').forEach(r=>r.addEventListener('change', render));

  transitionInput.addEventListener('change', ()=>{});
  modeSelect.addEventListener('change', ()=>{});

  fsBtn.addEventListener('click', async ()=>{
    try{
      if(!document.fullscreenElement){
        await canvas.requestFullscreen({navigationUI: 'hide'});
      }else{
        await document.exitFullscreen();
      }
    }catch(e){ console.warn(e) }
  });

  // open new window popup - includes crossfade logic as well
  openNewBtn.addEventListener('click', ()=>{
    if(images.length===0){ alert('画像がありません'); return }
    const imgs = images.map(i=>i.url);
    const w = Number(widthInput.value)||1280;
    const h = Number(heightInput.value)||720;
    const interval = Number(intervalInput.value)||5;
    const fit = document.querySelector('input[name=fit]:checked').value;
    const duration = Math.max(0, Number(transitionInput.value)||0);
    const mode = modeSelect.value;

    const popupHtml = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Slideshow</title>
    <style>html,body{height:100%;margin:0;background:#000;color:#fff;display:flex;flex-direction:column}canvas{margin:auto;display:block;max-width:100%;max-height:100%}</style></head><body>
    <canvas id="cv" width="${w}" height="${h}"></canvas>
    <script>
      const imgs = ${JSON.stringify(imgs)};
      let index = 0; const cv = document.getElementById('cv'); const ctx = cv.getContext('2d');
      function computeParams(img){ const cw=cv.width,ch=cv.height,iw=img.width,ih=img.height; if(!iw||!ih) return {dx:0,dy:0,dw:0,dh:0}; let scale; if('${fit}'==='contain') scale=Math.min(cw/iw,ch/ih); else scale=Math.max(cw/iw,ch/ih); const dw=Math.round(iw*scale), dh=Math.round(ih*scale); return {dx:Math.round((cw-dw)/2),dy:Math.round((ch-dh)/2),dw,dh}; }
      function drawScaled(img){ const p=computeParams(img); ctx.drawImage(img,p.dx,p.dy,p.dw,p.dh); }
      function drawOne(i){ const img=new Image(); img.onload=()=>{ ctx.fillStyle='#000'; ctx.fillRect(0,0,cv.width,cv.height); drawScaled(img); }; img.src=imgs[i]; }
      function crossfade(from,to,dur){ const start=performance.now(); const imgFrom=new Image(), imgTo=new Image(); imgFrom.onload = ()=>{ imgTo.onload = ()=>{ function step(now){ const t=Math.min(1,(now-start)/ (dur*1000)); ctx.clearRect(0,0,cv.width,cv.height); ctx.save(); ctx.globalAlpha = 1-t; drawScaled(imgFrom); ctx.restore(); ctx.save(); ctx.globalAlpha = t; drawScaled(imgTo); ctx.restore(); if(t<1) requestAnimationFrame(step); else { index = to; } } requestAnimationFrame(step); }; imgTo.src=imgs[to]; }; imgFrom.src=imgs[from]; }
      drawOne(0);
      const intervalMs = Math.max(1, ${interval}) * 1000;
      setInterval(()=>{ const next = (index + 1) % imgs.length; if('${mode}'==='crossfade' && ${duration} > 0) crossfade(index, next, ${duration}); else { index = next; drawOne(index); } }, intervalMs);
      cv.addEventListener('dblclick', ()=>{ if(!document.fullscreenElement) cv.requestFullscreen().catch(()=>{}); else document.exitFullscreen().catch(()=>{}); });
      setTimeout(()=>{ try{ cv.requestFullscreen(); }catch(e){} }, 300);
    <\/script>
    </body></html>`;

    const popup = window.open('', '_blank');
    if(!popup){ alert('ポップアップがブロックされました。別タブで開く許可を有効にしてください'); return }
    popup.document.write(popupHtml);
    popup.document.close();
  });

  // when fullscreen changes, resize canvas to screen size while preserving chosen slide size ratio
  document.addEventListener('fullscreenchange', ()=>{
    if(document.fullscreenElement){
      canvas.style.maxWidth = '100%';
      canvas.style.maxHeight = '100%';
    }else{
      canvas.style.maxWidth = '';
      canvas.style.maxHeight = '';
    }
    render();
  });

  // index input jump
  indexInput.addEventListener('change', ()=>{
    const v = Math.max(1, Math.min(images.length, Number(indexInput.value)||1));
    startTransition(v-1);
  });

  // keyboard
  window.addEventListener('keydown', (e)=>{
    if(e.code === 'Space'){ e.preventDefault(); togglePlay(); }
    if(e.key === 'ArrowRight'){ next(); }
    if(e.key === 'ArrowLeft'){ prev(); }
    if(e.key === 'Enter'){ if(e.target === indexInput) return; fsBtn.click(); }
  });

  // initial canvas clear
  clearCanvas();

})();
</script>
</body>
</html>