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

・　説明

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

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

・　生成したスライドショー見本: 　ページが長くなるので見本は別ページに作りました。; 　Gemini_SL_0001

・　帰ってきた回答

クラス名 base の中にある img 要素の数を自動で取得し、画像が何枚になっても動くシンプルなスライドショー（フェードイン・アウト形式）を作成しました。

実装のポイント
CSS: すべての画像を重ねて配置し、opacity（不透明度）で表示・非表示を切り替えています。

JavaScript: querySelectorAll を使って実行時に要素をすべて取得するため、HTML側の img タグを増やしたり減らしたりしても、コードを書き換える必要はありません。

コード全文
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Simple Slideshow</title>
    <style>
        /* スライドショーの外枠 */
        .base {
            position: relative;
            width: 100%;
            max-width: 800px; /* 任意の最大幅 */
            height: 500px;    /* 任意の高さ */
            margin: 0 auto;
            background-color: #000; /* 余白部分の色 */
            overflow: hidden;
        }

/* 画像のスタイル */
        .koboData {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain; /* アスペクト比を維持して収める */
            opacity: 0;          /* 最初はすべて非表示 */
            transition: opacity 1s ease-in-out; /* フェード速度 */
        }

/* 表示中の画像用クラス */
        .koboData.active {
            opacity: 1;
            z-index: 1; /* 前面に持ってくる */
        }
    </style>
</head>
<body>

// 最初の画像を表示状態にする
    if (images.length > 0) {
        images[0].classList.add('active');
    }

function showNextSlide() {
        // 現在の画像から active クラスを取り除く
        images[currentIndex].classList.remove('active');

// 次のインデックスを計算（最後の次は最初に戻る）
        currentIndex = (currentIndex + 1) % images.length;

// 次の画像に active クラスを付与する
        images[currentIndex].classList.add('active');
    }

// 指定した時間ごとに繰り返し実行
    if (images.length > 1) {
        setInterval(showNextSlide, intervalTime);
    }
</script>

</body>
</html>
解説
CSS: object-fit: contain;
ご指定通り、画像の縦横比を崩さずに .base の枠内に収めています。枠と画像のサイズが合わない場合は、背景色（今回は黒）が見えるようになっています。

CSS: 重ね合わせ
position: absolute; で全ての画像を同じ位置に重ねています。そのままでは重なっているだけなので、opacity: 0; で一旦消し、active クラスがついた画像だけ opacity: 1; になるようにしています。

JS: querySelectorAll
document.querySelectorAll('.koboData') を使うことで、HTML上の画像が5枚でも10枚でも、スクリプトが自動的にその数を images.length として認識します。

JS: ループ処理
(currentIndex + 1) % images.length という計算式を使うことで、インデックスが「0, 1, 2, 3, 4, 0, 1...」と永久にループするようにしています。

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

・　生成したスライドショー見本: 　ページが長くなるので見本は別ページに作りました。; 　Gemini_SL_0002

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

手動コントロール機能ですね、了解しました！
「自動で動いているのを止めたい」「自分のペースで見たい」というニーズに応えるために、ボタン操作とタイマー管理のロジックを追加します。

画像が何枚になっても、JavaScriptが勝手に枚数を数えて処理するので、HTML側の img タグを自由にいじっても大丈夫です。

実装コード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Advanced Slideshow</title>
    <style>
        .base {
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 500px;
            margin: 0 auto;
            background-color: #000;
            overflow: hidden;
        }

.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: 1;
        }

/* ボタンのコンテナ */
        .controls {
            text-align: center;
            margin-top: 15px;
        }

button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 5px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

button:hover {
            background-color: #e0e0e0;
        }

/* 停止中のボタン色を変える（おまけ） */
        #playPauseBtn.stopped {
            background-color: #ffcccc;
        }
    </style>
</head>
<body>

let currentIndex = 0;
    let timer = null;
    const intervalTime = 3000;

// 1. スライドを切り替える関数
    function updateSlide(nextIndex) {
        // 現在の画像を非表示
        images[currentIndex].classList.remove('active');
        
        // インデックスを更新（ループ処理）
        // (n + length) % length にすることでマイナス値にも対応
        currentIndex = (nextIndex + images.length) % images.length;
        
        // 次の画像を表示
        images[currentIndex].classList.add('active');
    }

// 2. 自動再生の開始・停止
    function startTimer() {
        if (!timer) {
            timer = setInterval(() => updateSlide(currentIndex + 1), intervalTime);
            playPauseBtn.textContent = '停止';
            playPauseBtn.classList.remove('stopped');
        }
    }

function stopTimer() {
        if (timer) {
            clearInterval(timer);
            timer = null;
            playPauseBtn.textContent = '開始';
            playPauseBtn.classList.add('stopped');
        }
    }

// --- イベントリスナー ---

// 「次へ」ボタン
    nextBtn.addEventListener('click', () => {
        stopTimer(); // 手動操作時は一旦タイマーを止めるのが親切
        updateSlide(currentIndex + 1);
    });

// 「前へ」ボタン
    prevBtn.addEventListener('click', () => {
        stopTimer();
        updateSlide(currentIndex - 1);
    });

// 「開始・停止」トグルボタン
    playPauseBtn.addEventListener('click', () => {
        if (timer) {
            stopTimer();
        } else {
            startTimer();
        }
    });

// 初期起動
    if (images.length > 0) {
        images[0].classList.add('active');
        startTimer();
    }
</script>

</body>
</html>
追加した工夫ポイント
マイナスの計算: 「前へ」ボタンでインデックスが 0 から -1 になったとき、(currentIndex - 1 + images.length) % images.length と計算することで、自動的に最後の画像に飛ぶようにしています。

親切設計: ボタンで「次へ」「前へ」を押した瞬間に、自動再生を停止させています。勝手に画像が切り替わってしまうストレスを防ぐためですが、もし「手動で動かしても自動再生を続けたい」場合は、stopTimer() の行を消すだけでOKです。

トグルボタン: timer 変数が中身を持っているかどうかで、現在の状態を判断し、テキストと機能を切り替えています。

これで、画像の枚数を増やしても減らしても、そのままお使いいただけます！

・　ここまでの感想: 　Geminiはシンプルなスライドショーながらデザインが整っていて、全体をコピーしてそのまま使用できる仕上がりです。急にスライドショーが必要になった時はChatGPT・Gemini・Copilotの三者の中では一番便利です。; 　二度目のプロンプトでは、前へ次へボタンをクリックしたときに自動再生を停止させる配慮をしています。しかし、[もし「手動で動かしても自動再生を続けたい」場合は、stopTimer() の行を消すだけでOKです。]という説明がありますが、消すだけではChatGPTと同じ状態になり「勝手に画像が切り替わってしまうストレス」を感じてしまいます。正解は「stopTimer() の行を消す」のではなく「処理後に動作中ならばstartTimer();を追加する」です。

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

・　生成したスライドショー見本: 　ページが長くなるので見本は別ページに作りました。; 　Gemini_SL_0003

・　帰ってきた回答

おっしゃる通りですね！その修正を加えることで、**「ボタンを押した瞬間にタイマーがリセットされ、そこからまた一定時間（3秒など）待機してから自動再生が再開される」**という、よりストレスのない挙動になります。

「ボタンを押した直後に、たまたまタイマーのタイミングが重なって画像が2枚連続で変わってしまう」という事故を防げる、非常に理にかなった設計です。

ご提案の方針に基づき、タイマーのリセット機能を盛り込んだコードを再構成しました。

修正版：タイマーリセット機能付きスライドショー

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Refined Slideshow</title>
    <style>
        /* スライド表示エリア */
        .base {
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 500px;
            margin: 0 auto;
            background-color: #000;
            overflow: hidden;
        }

.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: 1;
        }

/* 操作パネル */
        .controls {
            text-align: center;
            margin-top: 15px;
        }

button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 5px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 4px;
            transition: background 0.2s;
        }

button:hover {
            background-color: #e0e0e0;
        }

/* 停止中であることを示すスタイル（任意） */
        #playPauseBtn.is-paused {
            background-color: #ffeb3b;
            border-color: #fbc02d;
        }
    </style>
</head>
<body>

let currentIndex = 0;
    let timer = null;
    let isAutoPlaying = true; // 自動再生の状態を管理
    const intervalTime = 3000;

// 画像の切り替え処理
    function updateSlide(nextIndex) {
        images[currentIndex].classList.remove('active');
        currentIndex = (nextIndex + images.length) % images.length;
        images[currentIndex].classList.add('active');
    }

// タイマーを開始する関数
    function startTimer() {
        // すでにタイマーが動いている場合は一度クリア（重複防止）
        stopTimer();
        timer = setInterval(() => {
            updateSlide(currentIndex + 1);
        }, intervalTime);
        
        playPauseBtn.textContent = '停止';
        playPauseBtn.classList.remove('is-paused');
        isAutoPlaying = true;
    }

// タイマーを止める関数
    function stopTimer() {
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
        playPauseBtn.textContent = '開始';
        playPauseBtn.classList.add('is-paused');
        isAutoPlaying = false;
    }

// --- イベント設定 ---

// 次へボタン：止めて、動かして、(元々再生中なら)再開
    nextBtn.addEventListener('click', () => {
        const wasPlaying = isAutoPlaying;
        stopTimer();
        updateSlide(currentIndex + 1);
        // 元々再生モードだったなら、タイマーをリセットして再開
        if (wasPlaying) startTimer();
    });

// 前へボタン：止めて、戻して、(元々再生中なら)再開
    prevBtn.addEventListener('click', () => {
        const wasPlaying = isAutoPlaying;
        stopTimer();
        updateSlide(currentIndex - 1);
        if (wasPlaying) startTimer();
    });

// 停止・開始ボタン
    playPauseBtn.addEventListener('click', () => {
        if (isAutoPlaying) {
            stopTimer();
        } else {
            startTimer();
        }
    });

// 初期化：最初の画像を表示して開始
    if (images.length > 0) {
        images[0].classList.add('active');
        startTimer();
    }
</script>

</body>
</html>

改良したポイント
１）状態変数 isAutoPlaying の導入
単に startTimer() を呼ぶだけだと、ユーザーが「停止」ボタンを押してわざわざ止めた後に「次へ」を押した際、また勝手に自動再生が始まってしまいます。
今回のコードでは、**「元々動いていたならタイマーをリセットして再開」「止めていたなら止めたまま」**という、さらに一歩踏み込んだ親切設計にしています。

２）startTimer 内での重複防止
startTimer を呼ぶ際、念のため最初に stopTimer を実行するようにしています。これにより、タイマーが二重に動いて速度が速くなってしまうバグを完全に防いでいます。

３）直感的なループ計算
currentIndex - 1 に images.length を足してから余り算を行うことで、0枚目から「前へ」を押した時にスムーズに最後の枚数へジャンプします。

これで、手動操作を楽しみつつ、放っておけばまた心地よく流れ始めるスライドショーになりました！

・　ここまでの感想: 　Geminiは回答の日本語は丁寧ですね。チップを渡したくなる言葉遣いです。とりあえずChatGPT・Gemini・Copilotの三者とも同じレベルに到達したので、次の改良を考えてみます。

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

・　帰ってきた回答