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

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をコピーしました