2024年1月10日、カスタムGPTを公開することができるGPT Storeが始まりました。
GPT Storeには多くのGPTが公開されていますが、どれも説明が英語で書かれていてよくわからないですよね。
そこで当ブログでは、人気のカスタムGPTを実際に使ってレビューしていきます。
この記事では、Programmingカテゴリーで1位（2024/4/4現在）になっている「Code Copilot」を紹介します！
Code Copilotって何？
まずは「Code Copilot」が、どんな機能をもっているのか確認してみます。
【説明文の日本語訳】
10 倍のプログラマーの専門知識を利用して、よりスマートにコードを作成し、より迅速に構築します。
どうやらCode Copilotは、プログラミングに特化したGPTsのようです。
この説明だけだと機能が分かりにくいので、何ができるのか質問してみました。
Code Copilotは何ができるの？
Code Copilotは、プログラミングに関するあらゆる質問や課題に対してサポートを提供するAIプログラミングアシスタントです。
以下のようなことができます：
- APIドキュメントの速やかな閲覧
- コードレビュー
- デバッグ
- 新しいコードスニペットの作成
具体的なプログラミング言語を指定することで、その言語に特化した支援を受けることができます。
また、コードの例、ドキュメントへのリンク、または関連する課題について詳細に説明することで、より具体的で適切なサポートを提供できます。
さらに詳しいガイドが必要な場合は、/helpコマンドを使用してください。
プログラミングの知識に関するサポートを受けられるみたいです。
ここからは、実際にCode Copilotを使ってプログラミングをしてみます！
Code Copilotを実際に使ってみた
突然ですが、下のストップウォッチを使ってみてください！！！
このストップウォッチはCode Copilotが作ったプログラミングを張り付けただけなんです！
どうやってストップウォッチを作ったのか、実際のチャットの様子をご紹介します。
（作成したプログラミングも一部載せていますが、読みたい方だけご覧ください...）
ストップウォッチができるまでのやり取り
ストップウォッチが使えるHTMLを作りたい
※HTML：ウェブサイトを作るのに必要なプログラミングのこと
ストップウォッチ機能を持つHTMLを作成するには、HTMLで基本的な構造を作り、JavaScriptを使用してタイマーのロジックを実装します。
以下のステップに従ってください：
- HTML：ストップウォッチの表示、スタート、ストップ、リセットボタンを含む基本的なマークアップを作成します。
- CSS：オプショナルですが、ストップウォッチとボタンを見やすくするためのスタイルを追加します。
- JavaScript：ストップウォッチの開始、停止、リセットの機能を実装します。
以下は、基本的なストップウォッチ機能を持つHTMLの例です：
【作成されたHTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ストップウォッチ</title>
<style>
#stopwatch {
font-size: 24px;
margin-bottom: 10px;
}
button {
font-size: 20px;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="stopwatch">00:00:00</div>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
<script>
let startTime, updatedTime, difference, tInterval, savedTime;
let running = 0;
function startTimer(){
if(!running){
startTime = new Date().getTime();
tInterval = setInterval(getShowTime, 1);
running = 1;
document.getElementById('start').style.pointerEvents = 'none';
}
}
function stopTimer(){
if(running){
clearInterval(tInterval);
savedTime = difference;
running = 0;
document.getElementById('start').style.pointerEvents = 'auto';
}
}
function resetTimer(){
clearInterval(tInterval);
savedTime = 0;
difference = 0;
running = 0;
document.getElementById('stopwatch').innerHTML = '00:00:00';
document.getElementById('start').style.pointerEvents = 'auto';
}
function getShowTime(){
updatedTime = new Date().getTime();
if(savedTime){
difference = (updatedTime - startTime) + savedTime;
} else {
difference = updatedTime - startTime;
}
let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
let milliseconds = Math.floor((difference % (1000 * 60)) / 100);
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
document.getElementById('stopwatch').innerHTML = hours + ':' + minutes + ':' + seconds;
}
document.getElementById('start').addEventListener('click', startTimer);
document.getElementById('stop').addEventListener('click', stopTimer);
document.getElementById('reset').addEventListener('click', resetTimer);
</script>
</body>
</html>
実際に動くストップウォッチが作れました！
文字化け対策として、４行目の<meta charset="UTF-8">を削除したものを閲覧できるようにしました。
気になる方は下記リンクからチェックしてみてください！
ここから機能や見た目を改善してみます。
0.01秒単位で計測できるストップウォッチにしたい
デザインをより魅力的にしたい
0.01秒（10ミリ秒）単位で計測する機能と、デザインをより魅力的にするためのスタイルを追加したバージョンのストップウォッチを以下に示します。
この例では、ストップウォッチを中央に配置し、ボタンにカスタムスタイルを適用しています。
【改善後のHTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ストップウォッチ</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#stopwatch {
font-size: 48px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 20px;
color: #333;
}
button {
font-size: 16px;
padding: 10px 20px;
margin-right: 10px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover {
background-color: #0056b3;
}
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div id="stopwatch">00:00:00.00</div>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
</div>
<script>
let startTime, updatedTime, difference, tInterval, savedTime;
let running = 0;
function startTimer(){
if(!running){
startTime = new Date().getTime();
tInterval = setInterval(getShowTime, 10); // 0.01秒ごとに更新
running = 1;
document.getElementById('start').disabled = true;
}
}
function stopTimer(){
if(running){
clearInterval(tInterval);
savedTime = difference;
running = 0;
document.getElementById('start').disabled = false;
}
}
function resetTimer(){
clearInterval(tInterval);
savedTime = 0;
difference = 0;
running = 0;
document.getElementById('stopwatch').innerHTML = '00:00:00.00';
document.getElementById('start').disabled = false;
}
function getShowTime(){
updatedTime = new Date().getTime();
if(savedTime){
difference = (updatedTime - startTime) + savedTime;
} else {
difference = updatedTime - startTime;
}
let hours = Math.floor(difference / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
let milliseconds = Math.floor((difference % 1000) / 10);
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
milliseconds = (milliseconds < 10) ? "0" + milliseconds : milliseconds;
document.getElementById('stopwatch').innerHTML = hours + ':' + minutes + ':' + seconds + '.' + milliseconds;
}
document.getElementById('start').addEventListener('click', startTimer);
document.getElementById('stop').addEventListener('click', stopTimer);
document.getElementById('reset').addEventListener('click', resetTimer);
</script>
</body>
</html>
指示通り0.01秒単位の計測機能の追加とデザインの改善を行ってくれました！
改善したストップウォッチも使えるようにしてあるので、下記リンクをチェックしてみてください。
ブログに張り付けられるバージョンも作成してもらいます。
ワードプレスのカスタムHTMLに張り付けて使えるバージョンも作成してほしい
※ワードプレスのカスタムHTML：ブログに張り付ける用のHTML
WordPressのカスタムHTMLウィジェットやページに直接貼り付けて使用できるバージョンのストップウォッチです。
WordPressでは、外部スクリプトやスタイルシートのインラインでの使用を推奨しています。
以下のコードは、その要件に沿って作成されています。
このコードは、WordPressの「カスタムHTML」ウィジェットや、ページエディターのHTMLモードで直接使用できるようになっています。
外部リソースを使わず、スクリプトとスタイルをHTML内に直接記述していますので、WordPressでもそのまま機能します。
【ブログ用のHTML】
<div class="stopwatch-container">
<div id="stopwatch">00:00:00.00</div>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
</div>
<style>
.stopwatch-container {
text-align: center;
font-family: 'Arial', sans-serif;
margin-top: 20px;
}
#stopwatch {
font-size: 2em;
color: #333;
}
button {
font-size: 1em;
padding: 10px 20px;
margin: 5px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
</style>
<script>
(function() {
var startTime, updatedTime, difference, tInterval, savedTime;
var running = 0;
var stopwatch = document.getElementById('stopwatch');
var startButton = document.getElementById('start');
var stopButton = document.getElementById('stop');
var resetButton = document.getElementById('reset');
startButton.addEventListener('click', startTimer);
stopButton.addEventListener('click', stopTimer);
resetButton.addEventListener('click', resetTimer);
function startTimer(){
if(!running){
startTime = new Date().getTime();
tInterval = setInterval(getShowTime, 10); // 0.01秒ごとに更新
running = 1;
startButton.disabled = true;
}
}
function stopTimer(){
if(running){
clearInterval(tInterval);
savedTime = difference;
running = 0;
startButton.disabled = false;
}
}
function resetTimer(){
clearInterval(tInterval);
savedTime = 0;
difference = 0;
running = 0;
stopwatch.innerHTML = '00:00:00.00';
startButton.disabled = false;
}
function getShowTime(){
updatedTime = new Date().getTime();
if(savedTime){
difference = (updatedTime - startTime) + savedTime;
} else {
difference = updatedTime - startTime;
}
var hours = Math.floor(difference / (1000 * 60 * 60));
var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((difference % (1000 * 60)) / 1000);
var milliseconds = Math.floor((difference % 1000) / 10);
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
milliseconds = (milliseconds < 10) ? "0" + milliseconds : milliseconds;
stopwatch.innerHTML = hours + ':' + minutes + ':' + seconds + '.' + milliseconds;
}
})();
</script>
上記のHTMLに枠線のデザインを追加してもらったものが、冒頭で紹介したストップウォッチになります！
次はこのストップウォッチを利用したゲームを作ってみます。
ストップウォッチを使った時間当てゲームを作ってみた
ここからは時間当てゲームが完成するまでのやり取りをご覧ください。
完成するまでにできた失敗作もすべて使えるようにしておきますので、修正の過程もご覧ください！
【1回目のやり取り】
ストップウォッチを活用した時間あてゲームを作りたい
ゲームの詳細：プレイヤーが10秒になったと思ったときにストップを止めて、どれだけ10秒に近いかを試す
今回は最初4秒間カウントを表示して、そのあとは見えないようにしてください
【2回目のやり取り】
OKを押すと枠内が最初の状態に戻るようにしたい
表示を隠す時にCSSの工夫をしてほしい
【3回目のやり取り】
OKを押した後、数字の表示をもとに戻してほしい
数字が隠れている間は、????のような表示をしてほしい
【4回目のやり取り】
結果で0.001の位まで出しているので、タイマーも結果の表記に合わせてほしい
ストップボタンが押された時の時刻表示を、結果と同じ秒数にしてほしい
????が表示されていないので直してほしい
【5回目のやり取り】
最初から4秒間は従来通りカウントを表示して、4秒以降を????にしてほしい
【6回目のやり取り】
カウントに表示する桁数を統一してほしい
6回目のやり取りで完成しました！
【完成版のHTML】
<div class="stopwatch-container">
<div id="stopwatch_wp">00:00.000</div>
<button id="start_wp">スタート</button>
<button id="stop_wp" disabled>ストップ</button>
<div id="result_wp" style="display: none;">
<p id="result_text_wp"></p>
<button id="reset_wp">OK</button>
</div>
</div>
<style>
.stopwatch-container {
text-align: center;
font-family: 'Arial', sans-serif;
margin-top: 20px;
padding: 20px;
border: 2px solid #007bff;
border-radius: 10px;
display: inline-block;
background-color: #fff;
}
#stopwatch_wp {
font-size: 2em;
color: #333;
margin-bottom: 20px;
}
button {
font-size: 1em;
padding: 10px 20px;
margin: 5px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
#result_wp {
margin-top: 20px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var startTime, tInterval;
var running = false;
var elapsedTime = 0;
var hideTimerScheduled = false;
var stopwatch = document.getElementById('stopwatch_wp');
var startButton = document.getElementById('start_wp');
var stopButton = document.getElementById('stop_wp');
var resultDiv = document.getElementById('result_wp');
var resultText = document.getElementById('result_text_wp');
var resetButton = document.getElementById('reset_wp');
startButton.addEventListener('click', startTimer);
stopButton.addEventListener('click', stopTimer);
resetButton.addEventListener('click', resetGame);
function startTimer() {
if (!running) {
stopwatch.textContent = '00:00.000';
resultDiv.style.display = 'none';
startTime = Date.now();
tInterval = setInterval(updateTimer, 1); // Update timer every millisecond
hideTimerScheduled = false;
running = true;
startButton.disabled = true;
stopButton.disabled = false;
}
}
function stopTimer() {
if (running) {
clearInterval(tInterval);
running = false;
elapsedTime = Date.now() - startTime;
updateTimer(true); // Force final timer update to match the result
showResult();
stopButton.disabled = true;
}
}
function updateTimer(forceUpdate = false) {
elapsedTime = Date.now() - startTime;
if (elapsedTime >= 4000 && !hideTimerScheduled) {
hideTimerScheduled = true;
stopwatch.textContent = '????';
}
if (elapsedTime < 4000 || forceUpdate) {
var seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
var milliseconds = elapsedTime % 1000;
seconds = (seconds < 10) ? "0" + seconds : seconds;
milliseconds = (milliseconds < 10) ? "00" + milliseconds : (milliseconds < 100) ? "0" + milliseconds : milliseconds;
stopwatch.textContent = `00:${seconds}.${milliseconds}`;
}
}
function showResult() {
var timeDiff = Math.abs(elapsedTime - 10000);
resultText.textContent = `結果: ${elapsedTime / 1000}秒です。誤差は${timeDiff / 1000}秒です。`;
resultDiv.style.display = 'block';
}
function resetGame() {
resultDiv.style.display = 'none';
stopwatch.textContent = '00:00.000';
startButton.disabled = false;
}
});
</script>Code Copilotを使ってみた感想
この記事ではCode Copilotを使って、ストップウォッチや時間あてゲームを作ってみました。
1回の指示で完璧なプログラミングができるわけではないですが、「指示→修正」を繰り返すことで、理想のプログラミングに近づけていくことは可能でした。
何より驚きなのは、私が「一切プログラミングをしていないこと」です。
誰でもチャットとやり取りするだけで、この記事のようなプログラミングができます！
皆さんもぜひ「Code Copilot」を使ったプログラミングに挑戦してみてください！
