見出し画像

一瞬で作れる1分タイマー！ChatGPT-3.5でプログラミング

ひろえ

こんにちは、ひろえです。
今回はChatGPTでちょっとしたアプリを作ってみようということで、簡単な1分タイマーを作ってみます。

使うのはメモ帳などのテキストエディターと、ChromeやEdgeといったウェブブラウザのみです。
プログラミング未経験者の方でも、新たにソフトをインストールをすることなく、簡単にできる内容ですので、ぜひ挑戦してみてください。

作ったタイマーは前回記事で紹介したゼロ秒思考のA4メモ書きにも使えますよ！

作成する1分タイマーのイメージと流れ

1分タイマーを10回繰り返すアプリを作ります。
できるのは、↓ こんなhtmlファイルのタイマーです

htmlファイル カウントダウンタイマー！

スタートとリセットボタンがあり、今何回目の1分タイマーを繰り返したかがわかるものです。
htmlファイルなので、ChromeやEdgeなどのWebブラウザがあれば使うことができます。

作成の流れは以下の通りです：
①ChatGPT(3.5でもOK！）に、タイマー作っての指示を出す
②ChatGPTが書いたコードを、名前をつけて保存する
③保存したファイルをダブルクリックで開く

では、順に説明していきます。

①ChatGPT(3.5でOK！）に、タイマー作っての指示を出す

指示を出す際には、最低限満たして欲しい仕様も書きます。
今回は以下のように指示をしました。

スタートボタンを押すと、1分カウントダウンタイマーを、10回数繰り返す、簡単なHTML, JavaScriptを使ったブラウザアプリを作ってもらえますか？
1ファイルで作ってください。
以下の仕様を満たしてください。
ステップバイステップで考えてください。

[仕様]
・画面には、タイマーの秒数を表示してください。
・画面には、スタートボタン、リセットボタンを配置してください。
・リセットボタンを押すと、このアプリを起動したときの状態に戻ります。
・画面には、今何回中何回目のタイマーか、回数を表示してください。最初にスタートボタンを押したときが1回目です。
・スタートボタンを押したあとは、自動ですぐ次の1分間のタイマーを開始します。
・次の1分間が始まるときは、必ず数字を60に戻してからカウントダウンを開始してください

すると、この内容を実現するプログラムのコードを、ChatGPTがつらつらと一瞬で書いてくれます。

たまに作り方だけ書いて、コードを書いてくれない場合もあるので、そのときは再度「New chat」から新しい会話を開始し、同じ指示を出すということを何度か試してください。

今回ChatGPT 3.5 から返ってきた内容がこちら↓

はい、以下がHTMLとJavaScriptのコードになります。このコードは、ブラウザで動作し、要件に応じたカウントダウンタイマーを提供します。

<!DOCTYPE html>
<html>
<head>
	<title>Countdown Timer</title>
</head>
<body>
	<h1>Countdown Timer</h1>
	<div id="timer">60</div>
	<div id="count">Count: 0/10</div>
	<button id="start">Start</button>
	<button id="reset">Reset</button>

	<script>
		let countdown;
		let timerDisplay = document.querySelector('#timer');
		let countDisplay = document.querySelector('#count');
		let startButton = document.querySelector('#start');
		let resetButton = document.querySelector('#reset');
		let count = 0;

		function startTimer() {
			count++;
			countDisplay.textContent = `Count: ${count}/10`;
			let seconds = 60;
			timerDisplay.textContent = seconds;

			countdown = setInterval(function() {
				seconds--;
				if(seconds < 0) {
					clearInterval(countdown);
					startButton.disabled = false;
				} else {
					timerDisplay.textContent = seconds;
				}
			}, 1000);

			startButton.disabled = true;
		}

		function resetTimer() {
			clearInterval(countdown);
			timerDisplay.textContent = 60;
			startButton.disabled = false;
			count = 0;
			countDisplay.textContent = `Count: ${count}/10`;
		}

		startButton.addEventListener('click', startTimer);
		resetButton.addEventListener('click', resetTimer);
	</script>
</body>
</html>

上記のコードは、以下の仕様を満たしています。

  • 画面には、タイマーの秒数を表示しています。

  • 画面には、スタートボタン、リセットボタンを配置しています。

  • リセットボタンを押すと、このアプリを起動したときの状態に戻ります。

  • 画面には、今何回中何回目のタイマーか、回数を表示しています。最初にスタートボタンを押したときが1回目です。

  • スタートボタンを押したあとは、自動ですぐ次の1分間のタイマーを開始します。

  • 次の1分間が始まるときは、必ず数字を60に戻してからカウントダウンを開始します。

いい感じです。

②ChatGPTが書いたコードを、名前をつけて保存する

ChatGPTが書いたコードをメモ帳に貼って、htmlファイルとして保存します。
手順は以下のとおりです。

１.ChatGPTのコードをコピー

ChatGPTの、コードブロック右上の「Copy code」を押すと、コードをコピーできます

ChatGPT画面

２.テキストエディタに貼り付ける

Windowsの「メモ帳」などのテキストエディタを開き、コピーしたコードをペーストします。ここではメモ帳を例に説明していきます。

メモ帳にコードをペーストした

３.名前を付けて保存

左上の「ファイル」を選び、「名前をつけて保存…」を選択します。

ファイル→名前をつけて保存を選ぶ

すると、以下のような画面が表示されるので、各項目をしっかり設定して保存します。
①「timer.html」など、必ずファイル名が「.html」で終わるファイル名を付ける
②ファイルの種類は「すべてのファイル(*.*)」を選ぶ
③文字コードは「UTF-8」を選ぶ

ファイル名、ファイルの種類、文字コードを指定する

上記は全て重要な点ですので、しっかり確認の上、「保存」ボタンを押して保存しましょう。

③保存したファイルをダブルクリックで開く

②で保存したファイルをダブルクリックすると、関連付けされたブラウザでアプリが開きます。

保存した「timer.html」ファイル

無事、カウントダウンタイマーアプリが出来ました

カウントダウンタイマー！

もし、想定と違うブラウザでアプリが開かれてしまった場合、アプリを右クリックし、「プログラムから開く」で適切なブラウザを選択してください。

右クリック→プログラムから開く→ブラウザ選択


応用：仕様の揺れを改善する

今回のタイマーですが、あまり仕様をガッチリと指定していないため、ChatGPTを実行するたび、出来上がる見た目が異なるものになります。
以下のようなタイマーも生成される可能性があります。

ちょっと味気ないタイマー

そこで、もう少しだけ仕様を追加していきましょう。
・タイトル「1分カウントダウンタイマー」の表記
・タイマーの秒数表記指定
・回数表記指定
また、何度もスタートボタンを押せる不具合が発生する可能性もあるので、潰していきます。

スタートボタンを押すと、1分カウントダウンタイマーを、10回数繰り返す、簡単なHTML, JavaScriptを使ったブラウザアプリを作ってもらえますか？
1ファイルで作ってください。
以下の仕様を満たしてください。
ステップバイステップで考えてください。

[仕様]
・画面には、タイマーの秒数を表示してください。
・画面には、スタートボタン、リセットボタンを配置してください。
・リセットボタンを押すと、このアプリを起動したときの状態に戻ります。
・画面には、今何回中何回目のタイマーか、回数を表示してください。最初にスタートボタンを押したときが1回目です。
・スタートボタンを押したあとは、自動ですぐ次の1分間のタイマーを開始します。
・次の1分間が始まるときは、必ず数字を60に戻してからカウントダウンを開始してください

・画面上部には<h1>タグで「1分カウントダウンタイマー」と記載します。
・タイマーは、「タイマー：XX秒」のように表示します。XXには2桁で秒数が入ります
・回数は、「1/10」 のように表示します。この例は10回中1回目であることを表します。
・スタートボタンを押した後は、リセットボタンを押さない限りスタートボタンは押せなくなります。

黒字部が今回追加した内容になります。
これをChatGPTに指示した結果は以下の通り。

はい、作成します。以下が実装例になります。

<!DOCTYPE html>
<html>
<head>
	<title>1分カウントダウンタイマー</title>
	<style>
		#timer {
			font-size: 48px;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<h1>1分カウントダウンタイマー</h1>
	<div id="timer">タイマー：60秒</div>
	<div>回数：<span id="counter">1/10</span></div>
	<button id="start">スタート</button>
	<button id="reset" disabled>リセット</button>

	<script>
		let countdownInterval;
		let timerCount = 60;
		let currentCount = 1;
		let totalCounts = 10;
		let startBtn = document.getElementById("start");
		let resetBtn = document.getElementById("reset");
		let counterEl = document.getElementById("counter");
		let timerEl = document.getElementById("timer");

		startBtn.addEventListener("click", () => {
			// Disable start button
			startBtn.disabled = true;

			// Enable reset button
			resetBtn.disabled = false;

			// Update counter
			counterEl.innerText = `${currentCount}/${totalCounts}`;

			// Reset timer
			timerCount = 60;
			timerEl.innerText = `タイマー：${timerCount}秒`;

			// Start countdown
			countdownInterval = setInterval(() => {
				timerCount--;
				timerEl.innerText = `タイマー：${timerCount.toString().padStart(2, "0")}秒`;

				if (timerCount === 0) {
					currentCount++;
					clearInterval(countdownInterval);

					if (currentCount <= totalCounts) {
						// Start next countdown
						setTimeout(() => {
							startBtn.disabled = false;
							startBtn.click();
						}, 1000);
					} else {
						// Enable start button
						startBtn.disabled = false;
						startBtn.innerText = "再開";
						resetBtn.disabled = true;
					}
				}
			}, 1000);
		});

		resetBtn.addEventListener("click", () => {
			// Stop countdown
			clearInterval(countdownInterval);

			// Reset variables
			timerCount = 60;
			currentCount = 1;

			// Reset UI
			startBtn.disabled = false;
			startBtn.innerText = "スタート";
			resetBtn.disabled = true;
			counterEl.innerText = `1/${totalCounts}`;
			timerEl.innerText = `タイマー：${timerCount}秒`;
		});
	</script>
</body>
</html>

このコードを 保存して、ブラウザで開くと、1分カウントダウンタイマーアプリが起動します。

今回はtimer2.htmlなどと別名で保存し、ダブルクリックで開いた結果はこちら。

指示した内容を満たすカウントダウンタイマー

加えた仕様を満たすアプリが出来ました。

注意点

今回、1ファイルで作るようにChatGPTに指定しているので、コードが長くなっています。そのため、コードの途中でChatGPTの回答が途切れてしまう場合もあります。

コードの途中でChatGPTの回答が途切れたときの解決法は2つあります。
1. もう1度 New chatで初めから書いてもらう
2. 続きを促し、続きを書いてもらう
推奨は1です。

2を行う場合は、以下のように「続きをお願いします」など、続きを促すような指示を入れると、続きを書いてくれます。

コードが途中で途切れてしまい、続きを促した

ですが、上記の続きで書かれたコードは完全な続きというわけではありません。途切れた箇所の少し前から書かれています。他にも、その時々に応じてコードブロックでないところに書かれたり、変な続きが書かれる場合があります。

htmlに関して少し詳しい方は、つながりがわかると思うので、続きを促し、続きを書いてもらう方が効率が良いです。ですが、不安な場合は、途切れのないコードを出力してもらうまで、はじめから終わりまで書いてもらうのを何度かためすと良いと思います。

仕様を詰め込みすぎると、ソースコードが長くなりますので、今回のように1ファイルで簡潔するのは少し難しくなっていきます。
さらに、GPT-3.5ですとバグが多く、動かないコードとなる可能性が高くなるので注意が必要です。

今回のような簡単な仕様のアプリですと、1ファイルで簡単に実現できます。たまにバグのあるコードもできますが、個人で使う分には問題無いレベルのものができます。
もし動かない場合は、何度かNew chatで、新しい画面で初めから書いてもらうのが良いです。

まとめ

ChatGPTにプログラミングをしてもらうことで簡単な1分タイマーを作ってみました。

簡単な仕様のアプリでしたら、プログラミングの知識が無くともChatGPTに指示するだけで作れてしまいます。
ぜひいろいろ挑戦してみてくださいね。

いいなと思ったら応援しよう！