小学生でも作れる!自分だけの「おえかきアプリ」を作ってみよう!

AI・プログラミング

小学生でも作れる!自分だけの「おえかきアプリ」を作ってみよう!

こんにちは!
今日は 「じぶんでつくれる おえかきアプリ」 をしょうかいします。
なんと!このアプリは パソコンのメモ帳だけで作れる んだよ。

つくるのにむずかしいプログラムは ChatGPTにお願い しちゃおう!

完成するとこんなアプリができますよ→じぶんでつくれる おえかきアプリ


💬 ChatGPTになんて聞いたの?

こんなふうに聞いてみたよ:

お絵かきソフトをhtmlで作ってください。
細筆、ふと筆を用意してください。
消しゴムをつけてください(白固定でふと筆の2倍の太さ)。
〇△□◇×のスタンプをつけてください。
全てパレットで色を選べるようにしてください。

すると、ChatGPTがすぐにコードと説明をくれました!

すごいね✨


🧑‍💻 作りかたはとってもカンタン!

  1. パソコンの「メモ帳(notepad)」をひらく

  2. 下のコードを ぜんぶコピーして はりつける

  3. ファイル名を oekaki.html にして保存する(※「.txt」ではなく「.html」だよ!)

  4. ファイルをダブルクリックすると…
      → じゃーん! おえかきアプリがうごくよ!


📜 これがChatGPTが教えてくれたコード!

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お絵かきソフト</title>
<style>
body { font-family: sans-serif; text-align: center; background: #f0f0f0; }
canvas { border: 2px solid #333; background: #ffffff; cursor: crosshair; }
.tools, .instructions { margin: 10px auto; max-width: 600px; text-align: center; }
button, select, input[type=color] { margin: 5px; padding: 5px 10px; font-size: 16px; }
.instructions {
background: #fffbe7;
border: 1px solid #ccc;
padding: 10px;
border-radius: 10px;
}
</style>
</head>
<body>

<h2>おえかきソフト</h2>

<div class="instructions">
<h3>🎨 つかいかた</h3>
<ul style="text-align: left;">
<li>「細筆」(2px) と「ふと筆」(10px)で線がかけます</li>
<li>「消しゴム」(20px)でけせます(白固定)</li>
<li>「スタンプ」で〇△□◇×がクリックでおせます</li>
<li>「色えらび」で色をかえられます(筆・スタンプ用)</li>
<li>「全部けす」でぜんぶきえます</li>
</ul>
</div>

<div class="tools">
<button onclick="setTool('thin')">細筆</button>
<button onclick="setTool('thick')">ふと筆</button>
<button onclick="setTool('eraser')">消しゴム</button>

<select id="stamp">
<option value="">スタンプ</option>
<option value="○">○</option>
<option value="△">△</option>
<option value="□">□</option>
<option value="◇">◇</option>
<option value="×"</option>
</select>

<input type="color" id="color" value="#000000">
<button onclick="clearCanvas()">全部けす</button>
</div>

<canvas id="canvas" width="500" height="400"></canvas>

<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const colorPicker = document.getElementById("color");
const stamp = document.getElementById("stamp");

let currentTool = "thin";
let painting = false;

canvas.addEventListener("mousedown", startDraw);
canvas.addEventListener("mouseup", stopDraw);
canvas.addEventListener("mouseout", stopDraw);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("click", placeStamp);

function setTool(toolName) {
currentTool = toolName;
}

function startDraw(e) {
if (stamp.value) return;
painting = true;
draw(e);
}

function stopDraw() {
painting = false;
ctx.beginPath();
}

function draw(e) {
if (!painting) return;

const x = e.offsetX;
const y = e.offsetY;

ctx.lineCap = "round";
ctx.lineJoin = "round";

if (currentTool === "thin") {
ctx.lineWidth = 2;
ctx.strokeStyle = colorPicker.value;
} else if (currentTool === "thick") {
ctx.lineWidth = 10;
ctx.strokeStyle = colorPicker.value;
} else if (currentTool === "eraser") {
ctx.lineWidth = 20;
ctx.strokeStyle = "#ffffff"; // 白固定
}

ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}

function placeStamp(e) {
if (!stamp.value) return;

const x = e.offsetX;
const y = e.offsetY;

ctx.fillStyle = colorPicker.value;
ctx.font = "32px sans-serif";
ctx.fillText(stamp.value, x - 10, y + 10);
}

function clearCanvas() {
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// 背景を白くする
clearCanvas();
</script>

</body>
</html>


🌟 こんなときは?

  • 消したいとき → 「消しゴム」ボタンをおそう

  • 全部まっしろにしたい → 「全部けす」ボタンをおそう

  • 色をかえたい → 「色えらび」で色をぬりかえよう

  • うまくいかないとき → ファイルが .html になっているかチェック!


🎉 さいごに

じぶんでプログラムを作ってみると、とってもわくわくするよ!
つぎは**「画像を保存するボタン」「好きなスタンプを増やす」**こともできるよ。

やってみたいことがあったら、ChatGPTに聞いてみようね!

コメント

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