AIにスライドショーを作らせてみた_letAI_Claude

・　説明

　ChatGPT・Gemini・Copilotの三者、後から加えたGrok、最後に文章やコード生成に特化したAIのClaudeに、同じプロンプトを投げてスライドショーを作らせてみました。 2026年4月時点の結果です。 AIは進歩が速いので、皆様がこのページをご覧になっている時点では、もっと完成度の高いコードを排出できる様になっているかもかもしれません。このページはClaudeです。

・　最初に投げたプロンプト

・　生成したスライドショー見本: 　Claude_SL_0001

・　帰ってきた回答

スライドショーが完成しました。

機能:

4秒ごとに自動でスライドが切り替わります（プログレスバー付き）
「前へ」「次へ」ボタンで手動切り替え
ドットをクリックして直接ジャンプ
「停止/再生」ボタンで自動再生を制御
キーボードの ← → キーやスペースキーにも対応

img要素の数への対応:
querySelectorAll('img.koboData') で自動取得しているため、<img class="koboData"> を増減させてもJavaScriptの変更は不要です。

ダウンロードしたファイル：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スライドショー</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

body {
    background: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: sans-serif;
    gap: 16px;
    padding: 24px;
  }

.base {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
  }

.koboData {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

.koboData.active {
    opacity: 1;
  }

/* コントロールパネル */
  .controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

.btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    transition: background 0.15s;
  }

.btn:hover {
    background: rgba(255,255,255,0.25);
  }

.dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

.dot.active {
    background: #fff;
    transform: scale(1.35);
  }

.counter {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    min-width: 48px;
    text-align: center;
  }

/* プログレスバー */
  .progress {
    width: 100%;
    max-width: 800px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    overflow: hidden;
  }

.progress-bar {
    height: 100%;
    background: #fff;
    width: 0%;
    transition: none;
  }

.progress-bar.animating {
    transition: width linear;
  }
</style>
</head>
<body>

const base      = document.getElementById('ssBase');
  const dotsEl    = document.getElementById('ssDots');
  const counter   = document.getElementById('ssCounter');
  const btnPrev   = document.getElementById('btnPrev');
  const btnNext   = document.getElementById('btnNext');
  const btnPlay   = document.getElementById('btnPlay');
  const bar       = document.getElementById('progressBar');

// .koboData の img 要素を全て取得（数が変わっても自動対応）
  const imgs = Array.from(base.querySelectorAll('img.koboData'));

let current = 0;
  let playing = true;
  let timer   = null;

// ドットを動的生成
  const dots = imgs.map(function (_, i) {
    const d = document.createElement('button');
    d.className = 'dot';
    d.setAttribute('aria-label', 'スライド ' + (i + 1));
    d.addEventListener('click', function () { goTo(i); });
    dotsEl.appendChild(d);
    return d;
  });

// プログレスバー
  function startBar() {
    bar.style.transition = 'none';
    bar.style.width = '0%';
    // 次フレームでアニメーション開始
    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        bar.style.transition = 'width ' + INTERVAL + 'ms linear';
        bar.style.width = '100%';
      });
    });
  }

function stopBar() {
    bar.style.transition = 'none';
    bar.style.width = '0%';
  }

function goTo(idx) {
    show(idx);
    if (playing) {
      clearInterval(timer);
      startBar();
      timer = setInterval(function () { goTo(current + 1); }, INTERVAL);
    }
  }

btnPrev.addEventListener('click', function () { goTo(current - 1); });
  btnNext.addEventListener('click', function () { goTo(current + 1); });
  btnPlay.addEventListener('click', togglePlay);

// キーボード操作
  document.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowLeft')  { goTo(current - 1); }
    if (e.key === 'ArrowRight') { goTo(current + 1); }
    if (e.key === ' ')          { e.preventDefault(); togglePlay(); }
  });

// 初期表示
  show(0);
  startBar();
  timer = setInterval(function () { goTo(current + 1); }, INTERVAL);
})();
</script>
</body>
</html>

・　ここまでの感想: 　Claudeはソースコードを画面に表示するのではなく、完成したスライドショーファイルをダウンロードして使う形式です。; 　仕上がりは完璧です。最初から前後ボタン・開始/停止トグルボタン・ドットインジケータ（ガイドボタン）があり、枚数表示やプログレスバー（進捗状況がどの程度完了したのかを視覚的・直感的に表示するもの）まで付いています。キーボード操作も矢印キーだけではなくスペースキーに停止・開始のトグルを割り当てています。; 　デザイン面も完成度が高く、ダウンロードしたソースをそのまま使用できます。スタイルシート内の.progress-bar.animatingは不要（別ロジックのプログレスバー用の消し忘れ？）だと思いますが、表示に影響している訳ではありません。全体的には文句のつけようがありません。間違いなく「AIがあればエンジニアはいらない」様です。; 　Claudeは画像生成ができないので、ほとんど使っていませんでしたが、今後は利用したいと思います。

・　最後に投げたプロンプト

・　帰ってきた回答