【初心者向け】Google　Geminiでプログラミングできるのか２？「キッチンタイマーを作る」

※ 当サイトではアフィリエイト広告を利用しています。リンクは広告リンクも含みます。

2023.05.23
この記事は約25分で読めます。

Google Geminiに聞きながらキッチンタイマーを作ってみました。ChatGptやCopilot（旧Bing）でも同じようにできます。結局AIに1から聞いて作ると行き詰ります。その様子と作り上げるためにしたことをご紹介します。同じ質問をしてもAIは異なるコードを回答してくる可能性が高いので、ご自分で実行したとき本記事と違うコードが回答されるかもしれません。
注）この記事でBardと書いてありますが、BardはGeminiの前のバージョンです。

Gemini CLIはこちら↓

Gemini CLI をWindowsで使ってみた！
本記事では、Windows 環境で Gemini CLI を使ってみた体験をベースに、インストール方法から実行例までを紹介していきます。Node.jsをインストールしてある状態なら簡単にインストールできます。あと必要なのはGoogleアカウ...
kikuichige.com
2025.06.26

プログラムのメモ帳での実行方法などは、こちらを参照してください。

【初心者向け】Google Geminiでプログラミングできるのか？「ずんだもんの声がするボタンをつくる」
Google Geminiで日本語が使えるようになったので使ってみた。実践的なプログラムをGeminiに聞きながら作りました。BingやChatGptでも同じことができます。ボタンを押したらVoiceBoxのずんだもんの声が再生されるプログ...
kikuichige.com
2023.05.12
Geminiで簡易ゲームを作って公開する方法！
Geminiをちょっと使ったら、簡単にゲームができた。音も出ます。完成品：ゲーム終了時の「AIによる戦績レポート」はエラーになります。（APIキーを登録していないため）注意：このゲームのようなhtmlアプリで、htmlにAPIキーを書いたも...
kikuichige.site
広告
MINISFORUM日本公式ストア

2026/2/25 最新のGeminiで再挑戦

というのも、2023/5/23に作ったものを置ていたサーバーが使用できなくなり、コードがなくなっていたので、この際、Gemini3高速モードで同じものを作って見ようと思い立ちました。

プロンプト
「キッチンタイマーをHTML、CSS、JavaScriptで作って。
時間が来たら、audio.mp3を再生して。」

シンプルで使いやすく、ちょっとおしゃれなキッチンタイマーを作成しましょう。

構成は、残り時間を表示するディスプレイ、時間を設定するボタン、そしてスタート/ストップ/リセットの操作ボタンです。

HTML (index.html)

タイマーの構造を作ります。音源ファイル（audio.mp3）は、HTMLファイルと同じフォルダに置いてください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Simple Kitchen Timer</title>
    <link href="style.css">
</head>
<body>

    <div class="timer-container">
        <div id="display">00:00</div>
        
        <div class="settings">
            <button onclick="addTime(60)">+1分</button>
            <button onclick="addTime(10)">+10秒</button>
        </div>

        <div class="controls">
            <button id="startStop" onclick="toggleTimer()">スタート</button>
            <button id="reset" onclick="resetTimer()">リセット</button>
        </div>
    </div>

    <audio id="alarm-sound" src="audio.mp3" preload="auto"></audio>

    <script src="script.js"></script>
</body>
</html>

CSS (style.css)

見た目を整えます。中央に配置し、ボタンを押しやすくデザインしています。

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
    font-family: 'Arial', sans-serif;
}

.timer-container {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    width: 300px;
}

#display {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
}

.settings, .controls {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
}

button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    font-weight: bold;
    transition: background 0.2s;
}

button:hover {
    background-color: #0056b3;
}

button#reset {
    background-color: #dc3545;
}

button#reset:hover {
    background-color: #a71d2a;
}

JavaScript (script.js)

カウントダウンのロジックと、音が鳴る仕組みを記述します。

JavaScript

let timeLeft = 0; // 残り時間（秒）
let timerId = null;
const display = document.getElementById('display');
const startStopBtn = document.getElementById('startStop');
const alarmSound = document.getElementById('alarm-sound');

// 表示を更新する関数
function updateDisplay() {
    let minutes = Math.floor(timeLeft / 60);
    let seconds = timeLeft % 60;
    display.textContent = 
        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// 時間を追加する
function addTime(seconds) {
    timeLeft += seconds;
    updateDisplay();
}

// スタート・ストップの切り替え
function toggleTimer() {
    if (timerId === null) {
        if (timeLeft <= 0) return; // 0秒ならスタートしない
        
        startStopBtn.textContent = 'ストップ';
        timerId = setInterval(() => {
            timeLeft--;
            updateDisplay();

            if (timeLeft <= 0) {
                clearInterval(timerId);
                timerId = null;
                startStopBtn.textContent = 'スタート';
                alarmSound.play(); // 音を再生
                alert("時間になりました！");
            }
        }, 1000);
    } else {
        clearInterval(timerId);
        timerId = null;
        startStopBtn.textContent = 'スタート';
        alarmSound.pause(); // 止めたら音も止める（任意）
    }
}

// リセット
function resetTimer() {
    clearInterval(timerId);
    timerId = null;
    timeLeft = 0;
    updateDisplay();
    startStopBtn.textContent = 'スタート';
    alarmSound.pause();
    alarmSound.currentTime = 0;
}

使い方

  1. 同じフォルダに index.html, style.css, script.js を保存します。
  2. 同じフォルダに好きな音声ファイルを audio.mp3 という名前で保存します。
  3. index.html をブラウザで開けば完成です！

注意点: ブラウザのセキュリティ制限により、ユーザーが一度も画面をクリック（操作）していない状態では、JavaScriptから自動で音を鳴らすことができない場合があります。このコードでは「スタート」ボタンを押す操作があるため、問題なく動作するはずです。

もし、**「一時停止した時に音を止めないようにしたい」や「残り10秒で色を変えたい」**などの追加機能が必要であれば、いつでも教えてくださいね。

音声audio.mp3はこちらで準備しました。
完成品(広告横並びバージョン)（2026/3/27まで有効）
完成品(広告横並びバージョン)（2026/12/18まで）
修正など依頼せず、1発目の完成品をアップロードしてます。
ファイルをアップロードしているサーバーXREAの無料ブランは広告が、XREAで自動で入れてきます。見ての通り、横並びになってバランスが悪いので縦並びに変更します。

XREA無料ブランでも、広告が縦に並ぶように修正

1発目のままで、XREAにアップロードすると広告とキッチンタイマーが横並びになってしまうので
開発者ツールで広告を差し込んでいるJavascriptスクリプトを添付してGeminiに聞いて修正した。

プロンプト
「Xreaの無料版にアップロードしたが、添付のjsにより広告とindex.htmlが横に並んでしまう。縦に並ぶようにindex.htmlで対策できないか」

/* body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
    font-family: 'Arial', sans-serif;
}

.timer-container {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    width: 300px;
} */
/* bodyのflexを解除し、背景色などの基本設定のみにする */
body {
    background-color: #f0f2f5;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

/* タイマーの外枠で中央寄せを制御する */
.timer-container {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    width: 300px;
    
    /* 中央に配置するための設定 */
    margin: 50px auto; /* 上下に余白を作り、左右中央に */
}

#display {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
}

.settings, .controls {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
}

button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    font-weight: bold;
    transition: background 0.2s;
}

button:hover {
    background-color: #0056b3;
}

button#reset {
    background-color: #dc3545;
}

button#reset:hover {
    background-color: #a71d2a;
}

完成品(広告縦並びバージョン)（2026/3/27まで有効）
完成品(広告縦並びバージョン)（2026/12/18まで）

2026/2/25所感

1発で完成。
改善の余地はあるが、あれだけのプロンプトでは上出来だと思う。
2023/5/23は以下のように何度も修正した。2年間のAIの進化を感じた。

XREAの広告を縦に並べる修正は、前にも経験していたので、辺りはついていたし、AIに聞いて解決していたので、プロンプトも適切だったと思う。
一番最初に原因を探るときに、どんな感じで聞いて解決したか忘れたが、AI丸投げ（最近のAIエージェント）で解決できたかはわからない。
個人的には、AIエージェントが嫌い。AIの評価が信用できません。余計、手間かかる気がする。
なので、AI無料枠（Gemini、ChatGpt、Copilot、Claude）に質問する、こんな感じのスタイルが好きです。
2年後にはAIエージェント大好きになってる可能性もあるが・・・

イチゲをOFUSEで応援する(御質問でもOKです）Vプリカでのお支払いがおすすめです。
MENTAやってます（ichige）

ここから下は2023/5/23に作成した内容です。

（2023/5/23）とりあえず聞いてみる

質問1：キッチンタイマーをHTML、CSS、JavaScriptで作って
Bardの回答1：

<!DOCTYPE html>
<html>
<head>
<title>キッチンタイマー</title>
<style>
body {
  margin: 0;
  padding: 0;
  background-color: #eee;
}

.timer {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

.timer .time {
  font-size: 18px;
  font-weight: bold;
}

.timer .buttons {
  margin-top: 20px;
}

.timer .start-button {
  background-color: #0088cc;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.timer .stop-button {
  background-color: #ff0000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
</head>
<body>
<div class="timer">
  <div class="time">00:00</div>
  <div class="buttons">
    <button class="start-button">スタート</button>
    <button class="stop-button">ストップ</button>
  </div>
</div>

<script>
var timer = document.querySelector(".timer");
var time = document.querySelector(".time");
var startButton = document.querySelector(".start-button");
var stopButton = document.querySelector(".stop-button");

var interval;

startButton.addEventListener("click", function() {
  if (interval) {
    window.clearInterval(interval);
  }

  interval = window.setInterval(function() {
    var seconds = Math.floor(new Date() / 1000);
    var minutes = Math.floor(seconds / 60);
    seconds %= 60;

    time.innerHTML = minutes + ":" + seconds;
  }, 1000);
});

stopButton.addEventListener("click", function() {
  if (interval) {
    window.clearInterval(interval);
  }
});
</script>
</body>
</html>

実際の動作：スタートを押すと巨大な数字28079109:53ぐらいからカウントアップ始める。
ストップを押すと止まる。

（2023/5/23）うまくいかないので質問を変える

一気に作るのではなく簡単な機能から聞きながら作っていくことにした。
質問2：HTML、JavaScriptで0から1秒ずつカウントするタイマーを作って

Bardの回答2：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントダウンタイマー</title>
</head>
<body>
<h1>カウントダウンタイマー</h1>
<p id="timer"></p>
<script>
var timer = 0;
setInterval(function() {
  timer++;
  document.getElementById("timer").innerHTML = timer;
}, 1000);
</script>
</body>
</html>

質問3：スタートボタンとストップボタンとリセットボタンを追加して

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Countup Timer</title>
</head>
<body>
<h1>Countup Timer</h1>
<div id="timer"></div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
<script>
var timer = 0;
var running = false;

function startTimer() {
  running = true;
  setInterval(function() {
    if (!running) {
      return;
    }
    timer++;
    document.getElementById("timer").innerHTML = timer;
  }, 1000);
}

function stopTimer() {
  running = false;
  clearInterval(timer);
}

function resetTimer() {
  timer = 0;
  document.getElementById("timer").innerHTML = timer;
}

document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("reset").addEventListener("click", resetTimer);
</script>
</body>
</html>

質問4：停止やリセットを押したあとスタートを押すと1秒より速くカウントアップするので直して

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Countup Timer</title>
</head>
<body>
<h1>Countup Timer</h1>
<div id="timer"></div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
<script>
var timer = 0;
var running = false;
var intervalId;

function startTimer() {
  running = true;
  intervalId = setInterval(function() {
    if (!running) {
      clearInterval(intervalId);
      return;
    }
    timer++;
    document.getElementById("timer").innerHTML = timer;
  }, 1000);
}

function stopTimer() {
  running = false;
  clearInterval(intervalId);
}

function resetTimer() {
  timer = 0;
  document.getElementById("timer").innerHTML = timer;
  stopTimer();
}

document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("reset").addEventListener("click", resetTimer);
</script>
</body>
</html>

ここまでは順調に動作するものが回答された。
目次へ

（2023/5/23）行き詰まる

質問5：目標値が３分と５分のボタンを追加して時間になったらメッセージを表示して

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Countup Timer</title>
</head>
<body>
<h1>Countup Timer</h1>
<div id="timer"></div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
<button id="three-minute-timer">3 Minute Timer</button>
<button id="five-minute-timer">5 Minute Timer</button>
<script>
var timer = 0;
var running = false;
var intervalId;

function startTimer() {
  running = true;
  intervalId = setInterval(function() {
    if (!running) {
      clearInterval(intervalId);
      return;
    }
    timer++;
    document.getElementById("timer").innerHTML = timer;
  }, 1000);
}

function stopTimer() {
  running = false;
  clearInterval(intervalId);
}

function resetTimer() {
  timer = 0;
  document.getElementById("timer").innerHTML = timer;
  stopTimer();
}

function threeMinuteTimer() {
  startTimer();
  var threeMinuteTimer = setTimeout(function() {
    running = false;
    alert("3 minutes have passed!");
  }, 180000);
}

function fiveMinuteTimer() {
  startTimer();
  var fiveMinuteTimer = setTimeout(function() {
    running = false;
    alert("5 minutes have passed!");
  }, 300000);
}

document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("reset").addEventListener("click", resetTimer);
document.getElementById("three-minute-timer").addEventListener("click", threeMinuteTimer);
document.getElementById("five-minute-timer").addEventListener("click", fiveMinuteTimer);
</script>
</body>
</html>

以下は上のコードを動作確認のため3minutes→10秒にしてあるものです。10secondsをクリックすると10秒カウントをはじめ10秒たつとアラートが出ます。

Countup Timer

結果：時間が来たらアラートとして表示される。意図したのは画面に出てほしい。そこで修正してもらうために以下の質問と実験を繰り返したがうまくいかなかった。メッセージの意味が伝わらない点が大きい。

メッセージは画面に出してください→メッセージはalertでだすのではなくボタンの上に出してください→メッセージはdivタグでかこまれているところに出してください→時間が来たら文字列を<div id=”message”></div>に表示してください

ここまでは、元のコードを修正してもらおうとしていた。

ここから機能をしぼって質問した。
→ボタンを押したらタイマーがスタートし１０秒後にpタグに’完了’の文字を表示するコード

しかし意図した結果は得られなかった。
目次へ

（2023/5/23）シンプルな質問で解決

解決に至った質問
質問：javascriptでボタンを押したら文字を表示する方法は
Bardの回答：

<button onclick="document.getElementById('text').innerHTML = 'Hello World!'">Click me!</button>
<div id="text"></div>

これにより赤色の部分が文字を表示させるコードで、
表示させる場所は青色の部分だということがわかった。
よってBardの回答5を以下のように修正すれば基本的なものは完成です。

略
<h1>Countup Timer</h1>
<div id="text"></div>
<div id="timer"></div>
略
function resetTimer() {
  timer = 0;
  document.getElementById("timer").innerHTML = timer;
  stopTimer();
  document.getElementById('text').innerHTML = '';
}
略
alert("3 minutes have passed!");→document.getElementById('text').innerHTML = 'おかみさん、時間ですよ！';
略
alert("5 minutes have passed!");→document.getElementById('text').innerHTML = 'おかみさん、時間ですよ！';

キッチンタイマー完成品　5second　timerを押して確認してください。
目次へ

（2023/5/23）見栄えやバグ修正、音声を追加

見栄えは1番最初のBardの回答1でCSSが使われていたので、それを基本的に利用。
ボタンの押す順番によっては動作がおかしくなるので対策。
時間が来たら音声で知らせるようにした。

Bardに聞いたりGoogleったり実験したりの合わせ技で完成。

声がするキッチンタイマー
こちらのソースはアプリを表示した状態でEdgeの場合、どこかで右クリック→「開発者ツールで調査する」→ソースタブで左に表示しているkitchen.htmlまたはkitchen1.htmlをダブルクリックすれば見れます。

（2023/5/23）あとがき

知らないことをAIに聞きながらプログラミングすると必ず行き詰ります。
そこで基本の勉強を本やGoogleで調べて行う。シンプルなコードにそぎ落として、ここはこういう動作だなと実験して理解する。AIに聞く。この合わせ技で結局はコードが何をやっているか理解していくしかないと思います。
いつも述べていますがAIに丸投げでプログラミングはできない。基本的なことは勉強しないとダメだと思います。今回Bardでやっていますが、ChatGptやBingを使っても大差はないです。

目次へ

コメント

タイトルとURLをコピーしました