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

・　説明

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

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

・　生成したスライドショー見本: 　ページが長くなるので見本は別ページに作りました。生成されたコードに忠実に表示しているためセンタリングされていません。; 　Copilot_SL_0001

・　帰ってきた回答

最初に結論として、そのままコピペで動く完成コードを提示します。
その後に、仕組みのポイントも説明します。

🎞️ 自動対応スライドショー（画像枚数変更OK）
✅ HTML
<div class="base">
  <img class="koboData" src="https://miyake.static.jp/img65/0.jpg" />
  <img class="koboData" src="https://miyake.static.jp/img65/1.jpg" />
  <img class="koboData" src="https://miyake.static.jp/img65/2.jpg" />
  <img class="koboData" src="https://miyake.static.jp/img65/3.jpg" />
  <img class="koboData" src="https://miyake.static.jp/img65/4.jpg" />
  <img class="koboData" src="https://miyake.static.jp/img65/5.jpg" />
</div>

🎨 CSS
.base {
  width: 600px;        /* 必要に応じて変更 */
  height: 400px;       /* 必要に応じて変更 */
  position: relative;
  overflow: hidden;
  background: #000;
}

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

.koboData.active {
  opacity: 1;
}

⚙️ JavaScript（画像枚数に依存しない）
document.addEventListener("DOMContentLoaded", () => {
  const images = document.querySelectorAll(".base .koboData");
  let index = 0;

// 最初の画像を表示
  images[index].classList.add("active");

setInterval(() => {
    images[index].classList.remove("active");
    index = (index + 1) % images.length; // 枚数が変わっても自動対応
    images[index].classList.add("active");
  }, 3000); // 3秒ごとに切り替え
});

🔍 仕組みのポイント
.base .koboData を querySelectorAll でまとめて取得
→ 枚数が何枚でも自動で対応

index = (index + 1) % images.length  
→ 最後の画像の次は 0 に戻る

CSS の .active クラスで フェード表示  
→ スムーズなスライドショー

✨ カスタマイズしたい場合
切り替え時間を変えたい

フェードではなくスライドアニメにしたい

ランダム表示にしたい

前後ボタンを付けたい

どの方向に進めたいですか。

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

・　生成したスライドショー見本: 　ページが長くなるので見本は別ページに作りました。生成されたコードに忠実に表示しているためセンタリングされていません。; 　Copilot_SL_0002

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

前後ボタンと 停止・開始のトグルボタン を追加した、完成版のスライドショーを作りました。
もちろん、img 要素の数が変わってもプログラムはそのまま動きます。

🎞️ 前後ボタン＋停止/開始ボタン付きスライドショー
（HTML・CSS・JavaScript だけ）

✅ HTML
html
<div class="base">
  <img class="koboData" src="https://miyake.static.jp/img65/0.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/1.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/2.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/3.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/4.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/5.jpg">
</div>

🎨 CSS
css
.base {
  width: 600px;
  height: 400px;
  position: relative;
  overflow: hidden;
  background: #000;
  margin-bottom: 10px;
}

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

.koboData.active {
  opacity: 1;
}

.controls {
  text-align: center;
}

.controls button {
  padding: 8px 16px;
  margin: 0 5px;
  font-size: 16px;
  cursor: pointer;
}

⚙️ JavaScript（画像枚数に完全自動対応）
javascript
document.addEventListener("DOMContentLoaded", () => {
  const images = document.querySelectorAll(".base .koboData");
  let index = 0;
  let playing = true;
  let interval;

// 最初の画像を表示
  images[index].classList.add("active");

// 自動再生開始
  function startSlideShow() {
    interval = setInterval(nextImage, 3000);
  }

function stopSlideShow() {
    clearInterval(interval);
  }

function nextImage() {
    images[index].classList.remove("active");
    index = (index + 1) % images.length;
    images[index].classList.add("active");
  }

function prevImage() {
    images[index].classList.remove("active");
    index = (index - 1 + images.length) % images.length;
    images[index].classList.add("active");
  }

// ボタン操作
  document.getElementById("nextBtn").addEventListener("click", () => {
    stopSlideShow();
    nextImage();
    if (playing) startSlideShow();
  });

document.getElementById("prevBtn").addEventListener("click", () => {
    stopSlideShow();
    prevImage();
    if (playing) startSlideShow();
  });

// 初回スタート
  startSlideShow();
});
🔧 カスタマイズしたい方向はどれですか
切り替え時間を変更

フェードではなくスライドアニメに変更

サムネイル付きナビゲーションを追加

自動再生を最初からオフにしたい

用途に合わせて、さらに最適化できます。

・　ここまでの感想: 　Copilotは、htmlとcssとJavaScriptのコードが別々に表示されます。既存のホームページに張り付けて使う事が前提の様で、JavaScriptもロード関数の中に入れて他のJavaScriptとの変数のバッティングを避ける配慮をしています。反面、スライドショーを完成させるには最低でもhtmlタグheadタグbodyタグscriptタグstyleタグを書き加える事が必要で、排出されるコードを単純にコピーしてすぐに検証する事はできません。また、koboDataのスタイルシートにtop:0;left:0;が無く、単独や他のページに張り付けて使う場合表示が乱れる可能性があります。; 　二度目のプロンプトでは、前へ次へボタンをクリックしたときに自動再生を停止させ、処理後に自動再生中であることを確認してstartSlideShow()を加えています。 JavaScriptに関してはChatGPT・Gemini・Copilotの三者の中で一番だと思います。

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

・　生成したスライドショー見本: 　ページが長くなるので見本は別ページに作りました。今回はbaseのスタイルシートにmargin: 20px auto;がありセンタリングされていました。ただし、koboDataのスタイルシートにtop:0;left:0;の記述が無いため表示が乱れていたので、見本は追加しておきました。; 　Copilot_SL_0003

・　帰ってきた回答

了解です。  
ご希望の **「単体で開ける HTML ページ」** の形に完全統合したコードを作りました。  
このまま **1つの .html ファイルとして保存すれば即動作**します。

もちろん、**画像枚数が変わってもプログラムの変更は不要**です。

---

# 📄 **完成版：単体で動くスライドショー HTML**

```html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>スライドショー</title>

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

.koboData.active {
  opacity: 1;
}

/* --- ボタン類 --- */
.controls {
  text-align: center;
  margin-top: 10px;
}

.controls button {
  padding: 8px 16px;
  margin: 0 5px;
  font-size: 16px;
  cursor: pointer;
}
</style>

</head>
<body style="text-align:center;">

<div class="base">
  <img class="koboData" src="https://miyake.static.jp/img65/0.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/1.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/2.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/3.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/4.jpg">
  <img class="koboData" src="https://miyake.static.jp/img65/5.jpg">
</div>

// 最初の画像を表示
  images[index].classList.add("active");

// 自動再生開始
  function startSlideShow() {
    interval = setInterval(nextImage, 3000);
  }

function stopSlideShow() {
    clearInterval(interval);
  }

function nextImage() {
    images[index].classList.remove("active");
    index = (index + 1) % images.length;
    images[index].classList.add("active");
  }

function prevImage() {
    images[index].classList.remove("active");
    index = (index - 1 + images.length) % images.length;
    images[index].classList.add("active");
  }

// ボタン操作
  document.getElementById("nextBtn").addEventListener("click", () => {
    stopSlideShow();
    nextImage();
    if (playing) startSlideShow();
  });

document.getElementById("prevBtn").addEventListener("click", () => {
    stopSlideShow();
    prevImage();
    if (playing) startSlideShow();
  });

// 初回スタート
  startSlideShow();
});
</script>

</body>
</html>

```

---

# 🔧 次にどうしますか  
必要なら、次のような拡張もできます。

- **切り替え時間を変更**  
- **スライドアニメーションに変更**  
- **サムネイル一覧を追加**  
- **自動再生を最初からオフにする**

用途に合わせて、さらに最適化できます。

・　ここまでの感想: 　Copilotの回答は簡潔で分かりやすく好感が持てます。Gemini程ではありませんが日本語も丁寧です。 JavaScriptはChatGPT・Gemini・Copilotの三者の中で一番なのにスタイルシートに欠点があり残念です。

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

・　帰ってきた回答