ChatGPTを使ってお絵かきアプリを作ってみよう！

ChatGPTを使ってお絵かきアプリを作ってみよう！

ChatGPTを使ってお絵かきアプリを作ってみよう！

こんにちは！今日はChatGPTというAIを使って、簡単なお絵かきアプリを作る方法を紹介します。パソコンを使って、自分だけのオリジナルお絵かきソフトを作ってみよう！難しくないので、安心して挑戦してみてね。

完成イメージはこちらですChatGPTを使ってお絵かきアプリを作ってみよう！

Step 1: ChatGPTに質問してみよう

まずは、ChatGPTに「お絵かきアプリを作りたいんだけど、どうすればいい？」と聞いてみます。ChatGPTはすごく頭が良くて、プログラムの作り方を教えてくれますよ。例えば、こんな風に質問してみてください。

ChatGPTへのプロンプト：

Step 2: もらったコードをメモ帳に貼ろう

ChatGPTからコードをもらったら、それをメモ帳というアプリにコピーして貼り付けてください。コピーしたコードはこんな感じです：

html

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>お絵かきソフト</title>

<style>

body { text-align: center; font-family: sans-serif; }

canvas { border: 2px solid black; background: white; }

button { margin-top: 10px; padding: 10px; font-size: 16px; }

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

.color-buttons button { width: 30px; height: 30px; margin: 0 5px; border: none; cursor: pointer; }

</style>

</head>

<body>

<h1>お絵かきソフト</h1>

canvas.addEventListener(‘mousedown’, function(e) {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});

canvas.addEventListener(‘mousemove’, function(e) {
if (isDrawing) {
ctx.strokeStyle = currentColor;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
});

canvas.addEventListener(‘mouseup’, function() {
isDrawing = false;
});

function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function changeColor(color) {
currentColor = color;
}
</script>

</body>
</html>

Step 3: 保存してブラウザで開く

メモ帳にコードを貼り付けたら、ファイル > 名前を付けて保存を選んで、名前を「oekaki.html」にして保存します。ファイルの名前は**.html**で終わらせてくださいね。
保存した「oekaki.html」をダブルクリックすると、パソコンのブラウザが開いてお絵かきアプリが使えるようになります。