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

・　説明

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

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

・　生成したスライドショー見本: 　見本には、後述の様に白いドットが見えないので、私がスタイルシートにbody{background: #356;}の一行を追加しました。; 　Grok_SL_0001

・　帰ってきた回答

以下は、ご要望通りに img要素の数を変更してもコードを一切修正しなくてよい スライドショーです。完成コード（コピーしてそのまま使えます）html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>KoboData スライドショー</title>
<style>
  .base {
    width: 100%;           /* 必要に応じて変更してください */
    max-width: 800px;      /* 最大幅（お好みで調整） */
    height: 500px;         /* スライドの高さ（お好みで調整） */
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #000;
  }

.koboData {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 画像が歪まずに収まる */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
  }

.koboData.active {
    opacity: 1;
    z-index: 2;
  }

/* ナビゲーション */
  .slideshow-nav {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
  }

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
  }

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

/* 前後ボタン */
  .prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.prev { left: 15px; }
  .next { right: 15px; }
</style>
</head>
<body>

<div class="slideshow-nav" id="dots"></div>
<button class="prev" id="prevBtn">‹</button>
<button class="next" id="nextBtn">›</button>

// ドット生成
function createDots() {
  const dotsContainer = document.getElementById('dots');
  dotsContainer.innerHTML = '';

slides.forEach((_, index) => {
    const dot = document.createElement('div');
    dot.classList.add('dot');
    dot.addEventListener('click', () => {
      goToSlide(index);
    });
    dotsContainer.appendChild(dot);
  });
}

// スライド表示切り替え
function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.toggle('active', i === index);
  });

// ドットのアクティブ状態
  document.querySelectorAll('.dot').forEach((dot, i) => {
    dot.classList.toggle('active', i === index);
  });
}

// 指定のスライドへ移動
function goToSlide(index) {
  currentIndex = (index + slides.length) % slides.length; // 循環させる
  showSlide(currentIndex);
  resetInterval();
}

// 次のスライド
function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
  resetInterval();
}

// 前のスライド
function prevSlide() {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  showSlide(currentIndex);
  resetInterval();
}

// 自動再生のインターバルリセット
function resetInterval() {
  clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, 4000); // 4秒ごとに自動切り替え
}

// 初期化
function initSlideshow() {
  createDots();

// 最初のスライドを表示
  showSlide(0);

// 自動再生開始
  slideInterval = setInterval(nextSlide, 4000);

// ボタンイベント
  document.getElementById('nextBtn').addEventListener('click', nextSlide);
  document.getElementById('prevBtn').addEventListener('click', prevSlide);

// キーボード対応（← →）
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') nextSlide();
    if (e.key === 'ArrowLeft') prevSlide();
  });
}

// ページ読み込み完了後に実行
window.addEventListener('load', initSlideshow);
</script>

</body>
</html>

特徴img要素を追加・削除してもコード変更不要（querySelectorAll('.koboData') で自動取得）
object-fit: contain; を維持したままスライドショー化
フェードイン・アウトで滑らかに切り替え
ドットナビゲーション、前後ボタン、キーボード対応
自動再生（4秒間隔）
画像の枚数に関係なく動作

カスタマイズポイント.base の height を変更 → スライドの高さを調整
setInterval(nextSlide, 4000) の数値を変える → 切り替え速度の調整
transition: opacity 0.8s の秒数を変える → フェード速度の調整

この1ファイルだけで完結していますので、すぐに試せます！
画像を増やしたい場合は、ただ <img class="koboData" src="..."> を追加するだけでOKです。

・　ここまでの感想: 　Grokはスライドショー本体だけではなく次へ前へボタンとドット（ガイドまたはインジケーター）が付いています。しかも、これらをクリックするとスライドショータイマーが止まり、処理後に再スタートします。また、キーボードの矢印キーでの操作に対応していて、マウスが使えない環境でも動作します。 JavaScriptは完璧です。ただし、残念ながらドットの色が白に設定されているため見えません。「生成したスライドショー見本」には前述の通りスタイルシートにbody{background: #356;}の一行を追加しました。

・　二度目に投げたプロンプト

・　生成したスライドショー見本: 　背景が白なので白いドットが見えない件を伝えるのを忘れました。この見本も私がスタイルシートにbody{background: #356;}の一行を追加しました。; 　Grok_SL_0002

・　二度目に帰ってきた回答

以下は、停止・開始のトグルボタンを追加した完成版です。完成コード（コピーしてそのまま使えます）html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>KoboData スライドショー（停止/開始トグル付き）</title>
<style>
  .base {
    width: 100%;
    max-width: 800px;
    height: 500px;
    margin: 30px auto;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #000;
  }

.koboData {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
  }

.koboData.active {
    opacity: 1;
    z-index: 2;
  }

/* コントロールボタン群 */
  .slideshow-controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
  }

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
  }

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

/* トグルボタン */
  #toggleBtn {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    min-width: 80px;
    transition: all 0.3s;
  }

#toggleBtn:hover {
    background: rgba(0,0,0,0.7);
  }

.prev { left: 15px; }
  .next { right: 15px; }
</style>
</head>
<body>

<div class="slideshow-controls">
  <button class="prev" id="prevBtn">‹</button>
  
  <div id="dots" style="display: flex; gap: 10px;"></div>
  
  <button id="toggleBtn">一時停止</button>
  
  <button class="next" id="nextBtn">›</button>
</div>

// ドット生成
function createDots() {
  const dotsContainer = document.getElementById('dots');
  dotsContainer.innerHTML = '';

slides.forEach((_, index) => {
    const dot = document.createElement('div');
    dot.classList.add('dot');
    dot.addEventListener('click', () => goToSlide(index));
    dotsContainer.appendChild(dot);
  });
}

// スライド表示
function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.toggle('active', i === index);
  });

document.querySelectorAll('.dot').forEach((dot, i) => {
    dot.classList.toggle('active', i === index);
  });
}

// 指定スライドへ移動
function goToSlide(index) {
  currentIndex = (index + slides.length) % slides.length;
  showSlide(currentIndex);
}

// 次のスライド
function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}

// 前のスライド
function prevSlide() {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  showSlide(currentIndex);
}

// 自動再生の開始
function startSlideshow() {
  if (slideInterval) clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, 4000); // 4秒ごとに切り替え
  isPlaying = true;
  document.getElementById('toggleBtn').textContent = '一時停止';
}

// 自動再生の停止
function stopSlideshow() {
  clearInterval(slideInterval);
  isPlaying = false;
  document.getElementById('toggleBtn').textContent = '再生';
}

// トグルボタン
function togglePlay() {
  if (isPlaying) {
    stopSlideshow();
  } else {
    startSlideshow();
  }
}

// 初期化
function initSlideshow() {
  createDots();
  showSlide(0);                    // 最初のスライドを表示
  startSlideshow();                // 自動再生開始

// ボタンイベント
  document.getElementById('nextBtn').addEventListener('click', () => {
    nextSlide();
    if (isPlaying) startSlideshow(); // 手動操作後も自動再生を継続
  });

document.getElementById('prevBtn').addEventListener('click', () => {
    prevSlide();
    if (isPlaying) startSlideshow();
  });

document.getElementById('toggleBtn').addEventListener('click', togglePlay);

// キーボード対応
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
      nextSlide();
      if (isPlaying) startSlideshow();
    }
    if (e.key === 'ArrowLeft') {
      prevSlide();
      if (isPlaying) startSlideshow();
    }
    if (e.key === ' ') {           // スペースキーで再生/停止
      e.preventDefault();
      togglePlay();
    }
  });
}

// ページ読み込み後に実行
window.addEventListener('load', initSlideshow);
</script>

</body>
</html>

追加した機能一時停止 / 再生 トグルボタン（中央に配置）
ボタンの表示が「一時停止」「再生」に切り替わる
スペースキーでも再生/停止が可能
手動で前後ボタンやドットをクリックした後も、再生中なら自動再生が継続

これで画像の枚数を増やしてもコードを一切変更する必要はありません。必要に応じて以下の部分を調整してください：height: 500px; → スライドの高さ
setInterval(..., 4000) → 自動切り替えの秒数

お好みでさらにカスタマイズしたい部分があれば教えてください！

・　ここまでの感想: 　依頼した通りに停止・開始のトグルボタンは追加されていますが、ボタンとドットが重なって表示されています。また、ドットのクリック時にスライドショーを一時停止する処理が無くなってしまいました。

・　Grokだけに投げたプロンプト

・　生成したスライドショー見本: 　ドットのクリック時にスライドショーを一時停止する処理が無くなってしまった事を伝えるのを忘れました。依頼した件、デザインは破綻が無く、bodyのスタイルシートもより良く設定されています。; 　Grok_SL_0003

・　帰ってきた回答

了解しました！
ご指摘の通り、トグルボタンを追加したことでコントロール部分が重なってしまっていましたね。以下の修正版では、前回のトグルボタンなしバージョンのレイアウトをベースに、
トグルボタンを自然に配置しつつ、ドットと前後ボタンが重ならないように調整しました。修正版コード（おすすめ）html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>KoboData スライドショー（停止/開始トグル付き）</title>
<style>
  body {
    background: #356;        /* 背景色を暗めに設定 */
    margin: 0;
    padding: 20px;
  }

.base {
    width: 100%;
    max-width: 800px;
    height: 500px;
    margin: 30px auto;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #000;
  }

.koboData {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
  }

.koboData.active {
    opacity: 1;
    z-index: 2;
  }

/* コントロール全体 */
  .slideshow-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
  }

/* 前後ボタン */
  .prev, .next {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
  }

.prev:hover, .next:hover {
    background: rgba(0,0,0,0.7);
  }

/* ドットコンテナ */
  #dots {
    display: flex;
    gap: 10px;
  }

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
  }

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

/* トグルボタン */
  #toggleBtn {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s;
  }

#toggleBtn:hover {
    background: rgba(0,0,0,0.7);
  }
</style>
</head>
<body>

<div class="slideshow-controls">
  <button class="prev" id="prevBtn">‹</button>
  
  <div id="dots"></div>
  
  <button id="toggleBtn">一時停止</button>
  
  <button class="next" id="nextBtn">›</button>
</div>

// ドット生成
function createDots() {
  const dotsContainer = document.getElementById('dots');
  dotsContainer.innerHTML = '';

// スライド表示
function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.toggle('active', i === index);
  });

document.querySelectorAll('.dot').forEach((dot, i) => {
    dot.classList.toggle('active', i === index);
  });
}

// 指定スライドへ
function goToSlide(index) {
  currentIndex = (index + slides.length) % slides.length;
  showSlide(currentIndex);
}

// 次のスライド
function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}

// 前のスライド
function prevSlide() {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  showSlide(currentIndex);
}

// 自動再生開始
function startSlideshow() {
  if (slideInterval) clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, 4000);
  isPlaying = true;
  document.getElementById('toggleBtn').textContent = '一時停止';
}

// 自動再生停止
function stopSlideshow() {
  clearInterval(slideInterval);
  isPlaying = false;
  document.getElementById('toggleBtn').textContent = '再生';
}

// トグル
function togglePlay() {
  if (isPlaying) {
    stopSlideshow();
  } else {
    startSlideshow();
  }
}

// 初期化
function initSlideshow() {
  createDots();
  showSlide(0);
  startSlideshow();

// ボタンイベント
  document.getElementById('nextBtn').addEventListener('click', () => {
    nextSlide();
    if (isPlaying) startSlideshow();
  });

document.getElementById('prevBtn').addEventListener('click', () => {
    prevSlide();
    if (isPlaying) startSlideshow();
  });

document.getElementById('toggleBtn').addEventListener('click', togglePlay);

// キーボード
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
      nextSlide();
      if (isPlaying) startSlideshow();
    }
    if (e.key === 'ArrowLeft') {
      prevSlide();
      if (isPlaying) startSlideshow();
    }
    if (e.key === ' ') {
      e.preventDefault();
      togglePlay();
    }
  });
}

window.addEventListener('load', initSlideshow);
</script>

</body>
</html>

主な修正点body { background: #356; } を追加（ご希望通り）
コントロール部分（.slideshow-controls）を flex で自然に配置
前後ボタン → ドット → トグルボタン の順で横並び
各要素の余白（gap）を調整して重なりを解消
ドットの背景を少し明るくして見やすく調整

これで前回のレイアウト感覚に近く、トグルボタンもきれいに収まっているはずです。試してみて、もしさらに調整したい部分（間隔、ボタンサイズ、背景色など）があれば教えてください！

・　Grokだけに投げたプロンプト２

・　生成したスライドショー見本: 　私が伝え忘れをしなければこのプロンプトは不要でした。ページが長くなって申し訳ありません。; 　Grok_SL_0004

・　帰ってきた回答

了解しました！
ご指摘の通り、ドットをクリックしたときに自動再生のタイマーが残ったままになっているため、突然次のスライドに切り替わって驚く現象が発生していました。以下の改良版では、ドットをクリックした時点で一旦自動再生を停止し、その後すぐに新しいタイマーを開始するように修正しました。これにより、ドットをクリックした直後は自動再生がリセットされ、4秒後に次のスライドに自動で進むようになります。改良版コード（修正済み）html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>KoboData スライドショー（停止/開始トグル付き・改良版）</title>
<style>
  body {
    background: #356;
    margin: 0;
    padding: 20px;
  }

.koboData {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
  }

.koboData.active {
    opacity: 1;
    z-index: 2;
  }

.slideshow-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
  }

.prev, .next {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
  }

.prev:hover, .next:hover {
    background: rgba(0,0,0,0.7);
  }

#dots {
    display: flex;
    gap: 10px;
  }

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
  }

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

#toggleBtn {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s;
  }

#toggleBtn:hover {
    background: rgba(0,0,0,0.7);
  }
</style>
</head>
<body>

// ドット生成
function createDots() {
  const dotsContainer = document.getElementById('dots');
  dotsContainer.innerHTML = '';

slides.forEach((_, index) => {
    const dot = document.createElement('div');
    dot.classList.add('dot');
    dot.addEventListener('click', () => {
      goToSlide(index);        // ← ここで自動再生をリセット
    });
    dotsContainer.appendChild(dot);
  });
}

// スライド表示
function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.toggle('active', i === index);
  });

document.querySelectorAll('.dot').forEach((dot, i) => {
    dot.classList.toggle('active', i === index);
  });
}

// 指定スライドへ移動（自動再生もリセット）
function goToSlide(index) {
  currentIndex = (index + slides.length) % slides.length;
  showSlide(currentIndex);
  
  // ドットクリック時は一旦停止 → すぐに再スタート（タイマーリセット）
  if (isPlaying) {
    resetInterval();
  }
}

// 次のスライド
function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}

// 前のスライド
function prevSlide() {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  showSlide(currentIndex);
}

// 自動再生のインターバルをリセット（再スタート）
function resetInterval() {
  if (slideInterval) clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, 4000);
}

// 自動再生開始
function startSlideshow() {
  resetInterval();
  isPlaying = true;
  document.getElementById('toggleBtn').textContent = '一時停止';
}

// 自動再生停止
function stopSlideshow() {
  if (slideInterval) clearInterval(slideInterval);
  isPlaying = false;
  document.getElementById('toggleBtn').textContent = '再生';
}

// トグル
function togglePlay() {
  if (isPlaying) {
    stopSlideshow();
  } else {
    startSlideshow();
  }
}

// 初期化
function initSlideshow() {
  createDots();
  showSlide(0);
  startSlideshow();   // 最初は自動再生ON

// 前後ボタン
  document.getElementById('nextBtn').addEventListener('click', () => {
    nextSlide();
    if (isPlaying) resetInterval();
  });

document.getElementById('prevBtn').addEventListener('click', () => {
    prevSlide();
    if (isPlaying) resetInterval();
  });

// トグルボタン
  document.getElementById('toggleBtn').addEventListener('click', togglePlay);

// キーボード操作
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
      nextSlide();
      if (isPlaying) resetInterval();
    }
    if (e.key === 'ArrowLeft') {
      prevSlide();
      if (isPlaying) resetInterval();
    }
    if (e.key === ' ') {
      e.preventDefault();
      togglePlay();
    }
  });
}

window.addEventListener('load', initSlideshow);
</script>

</body>
</html>

変更点のまとめgoToSlide() 内で ドットクリック時に resetInterval() を呼ぶように修正
前後ボタンやキーボード操作時も同じく resetInterval() を使用（一貫性を持たせました）
resetInterval() という関数を新設して、タイマーのクリア＋再設定をまとめて処理

これで、ドットをクリックした直後は一度タイマーがリセットされ、4秒後に次のスライドへ自動で進むようになります。
突然切り替わる現象が解消されるはずです。試してみて、動作が期待通りか確認してください！
さらに調整が必要な点があれば遠慮なく教えてください。

スライドショーのトランジション効果を追加して

スワイプ操作のタッチ対応を追加して

・　ここまでの感想: 　Grokの回答も簡潔で分かりやすく日本語も丁寧で好感が持てます。最初は完璧だったので期待しましたが、途中でJavaScriptが後退したのは残念でした。ただし、最後のバージョンのJavaScriptは他には無い工夫がある様だし、キーボードの矢印キーでの操作にも対応していて、今後研究してみようと思っています。

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

・　帰ってきた回答