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

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

2023.05.23
この記事は約17分で読めます。
広告

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

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

【初心者向け】Google Geminiでプログラミングできるのか？「ずんだもんの声がするボタンをつくる」
Google Geminiで日本語が使えるようになったので使ってみた。実践的なプログラムをGeminiに聞きながら作りました。BingやChatGptでも同じことができます。ボタンを押したらVoiceBoxのずんだもんの声が再生されるプログ...
kikuichige.com
2023.05.12

キッチンタイマー完成品（シンプル版）　声がするキッチンタイマー完成品（機能拡張版）

広告

とりあえず聞いてみる

質問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ぐらいからカウントアップ始める。
ストップを押すと止まる。

うまくいかないので質問を変える

一気に作るのではなく簡単な機能から聞きながら作っていくことにした。
質問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>

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

行き詰まる

質問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タグに’完了’の文字を表示するコード

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

シンプルな質問で解決

解決に至った質問
質問：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を押して確認してください。
目次へ

見栄えやバグ修正、音声を追加

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

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

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

あとがき

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

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

コメント

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