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

・　説明

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

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

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

・　帰ってきた回答

🔧完成コード（HTML / CSS / JS）

そのまま1ファイルでも動きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>

/* 画像共通 */
.koboData {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

/* 表示中 */
.koboData.active {
  opacity: 1;
  z-index: 1;
}
</style>
</head>

<body>

// 初期表示
images[current].classList.add("active");

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

// 3秒ごとに切り替え
setInterval(showNext, 3000);
</script>

</body>
</html>

💡 ポイント解説
✔ 画像数に依存しない
const images = document.querySelectorAll(".base .koboData");

→ 自動取得するので、HTMLに画像を追加・削除してもOK

✔ object-fit: contain
object-fit: contain;

→ 縦横比を保ったまま .base に収まる

✔ フェード切り替え
transition: opacity 1s ease;

→ なめらかに切り替え

✔ ループ処理
current = (current + 1) % images.length;

→ 最後まで行ったら最初に戻る

🔥 カスタマイズ例
▶ 切り替え時間変更（例：5秒）
setInterval(showNext, 5000);
▶ 手動ボタン追加（必要なら）

「次へ」「前へ」も簡単に追加できます。希望あれば書きます。

▶ フェード無し（即切替）
transition: none;
必要なら
スワイプ対応（スマホ）
サムネイル付き
無限ループスクロール風
Ken Burns（ズーム演出）

なども作れます。

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

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

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

了解です。
以下に「前へ」「次へ」＋再生/停止トグル付き の完成コードを提示します。
画像枚数が変わってもそのまま動作します。

🔧 完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>

/* 画像 */
.koboData {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

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

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

button {
  padding: 8px 12px;
  margin-right: 5px;
  cursor: pointer;
}
</style>
</head>

<body>

// 初期表示
images[current].classList.add("active");

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

function showNext() {
  show(current + 1);
}

function showPrev() {
  show(current - 1);
}

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

// 停止
function stopSlideshow() {
  clearInterval(interval);
}

// 初期起動
startSlideshow();

// ボタン操作
document.getElementById("next").onclick = () => {
  showNext();
};

document.getElementById("prev").onclick = () => {
  showPrev();
};

</body>
</html>

💡 追加された機能
▶ 前へ / 次へ
手動で画像送り・戻し可能
▶ 停止 / 開始トグル
「停止」→自動再生ストップ
「開始」→再開

🔧 補足（改善したい場合）
もしさらに進化させるなら：

ボタンを画像の上に重ねる（UI改善）
ホバーで一時停止
スマホスワイプ対応
インジケーター（●●●）

なども簡単に追加できます。

・　ここまでの感想: 　最初のプロンプトではアニメーションや操作ボタンなどに関する指示はしなかったため、ChatGPT・Gemini・Copilotの三者ともアニメーションが透かし型（現画像がフェードアウトして次の画像がフェードインする）になり操作ボタンが無いスライドショーができました。activeクラスを使うアニメーションのロジックも同じで、まるでAI専用のマニュアルでも存在するかの様な結果になりました。三者とも一応動作するスライドショーが排出されて一安心です。確かに「AIがあればエンジニアはいらない」かもしれません。; 　しかし、二度目のプロンプトでボタンを追加すると、結果に差が出てきました。; 　ChatGPTでは、前へ次へボタンをクリックしたときに、単純に関数showNext();やshowPrev();を呼び出しているだけなので、その間にもメインのスライドショーのタイマーが進行してしまっています。即ち、スライドショー作動状態で前へ次へボタンを数回クリックしていると、いきなり画像が切替わってビックリさせられます。本来は、前へ次へボタンをクリックしたときはメインスライドショーを停止して処理が完了した時点で新たにタイマーをスタートさせる配慮が必要です。

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

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

・　帰ってきた回答

その通りです。そのままだとタイマーが裏で進行し続けるので、手動操作と衝突します。
方針としては：

手動操作時は必ず stopSlideshow() で一旦停止
操作後、再生状態だった場合のみタイマーを再スタート
setInterval の二重起動を防ぐ（ここ重要）

これを踏まえて、コード全体を整理して書き直します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>

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

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

.controls {
  margin-top: 10px;
}

button {
  padding: 8px 12px;
  margin-right: 5px;
  cursor: pointer;
}
</style>
</head>

<body>

let current = 0;
let intervalId = null;
let playing = true;
const intervalTime = 3000;

// 初期表示
images[current].classList.add("active");

// 表示切替
function show(index) {
  images[current].classList.remove("active");
  current = (index + images.length) % images.length;
  images[current].classList.add("active");
}

function showNext() {
  show(current + 1);
}

function showPrev() {
  show(current - 1);
}

// スライドショー開始（多重起動防止）
function startSlideshow() {
  stopSlideshow(); // 念のため必ず止める
  intervalId = setInterval(showNext, intervalTime);
}

// 停止
function stopSlideshow() {
  if (intervalId !== null) {
    clearInterval(intervalId);
    intervalId = null;
  }
}

// 初期起動
startSlideshow();

// ===== ボタン処理 =====

// 次へ
document.getElementById("next").onclick = () => {
  const wasPlaying = playing;

stopSlideshow();
  showNext();

if (wasPlaying) startSlideshow();
};

// 前へ
document.getElementById("prev").onclick = () => {
  const wasPlaying = playing;

stopSlideshow();
  showPrev();

if (wasPlaying) startSlideshow();
};

// 再生 / 停止トグル
document.getElementById("toggle").onclick = () => {
  if (playing) {
    stopSlideshow();
    document.getElementById("toggle").textContent = "開始";
  } else {
    startSlideshow();
    document.getElementById("toggle").textContent = "停止";
  }
  playing = !playing;
};
</script>

</body>
</html>

💡 改良ポイント
✔ タイマー競合を完全排除
stopSlideshow();

→ 手動操作前に必ず停止

✔ 状態保持して再開
const wasPlaying = playing;

→ 元が再生中だった場合のみ再スタート

✔ 多重 setInterval 防止（超重要）
stopSlideshow(); // start前に必ず呼ぶ

→ 気づかないうちに倍速になる事故を防止

👍 結果
手動操作しても「突然切り替わる」現象なし
操作後は自然に次の3秒カウント開始
安定して拡張可能な構造

必要ならさらに：

「クリック後◯秒は自動再開しない」
「ホバーで一時停止」
「スワイプ対応」

など、操作性をもう一段上げることもできます。

・　ここまでの感想: 　帰ってくる回答にもChatGPTの負けず嫌いな性格が出ていて笑ってしまいます。 Geminiの回答とはえらい違いです。とりあえずChatGPT・Gemini・Copilotの三者とも同じレベルに到達したので、次の改良を考えてみます。

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

・　帰ってきた回答