あそべる！まなべる！ふせんアプリをつくろう！

AI・プログラミング

あそべる！まなべる！ふせんアプリをつくろう！

💡なんでアプリをつくろうと思ったの？

夏休みのじゆうけんきゅうで、「なにかパソコンでできるおもしろいことないかな〜？」って考えたんだ。
そこで見つけたのが、「じぶんでアプリをつくること」！

え？アプリって大人がつくるんじゃないの？って思ったキミ！
じつは**ChatGPT（チャットジーピーティー）**っていうすごいAIを使えば、
小学生でもかんたんに作れるアプリがあるんだよ✨

🎯どんなアプリ？

今回つくるのは、ふせんアプリ！

  • 好きな色のふせんを出せるよ！

  • マウスで動かせるよ！

  • メモをかけるよ！

  • ×ボタンでけせるよ！

  • 自動で保存されるから、消えないよ！

🧠 まずはChatGPTにお願いしよう！

ChatGPTにこんなふうにたのんでみよう！

css
デスクトップで使えるふせんアプリを作ってください。
ふせんの色を4色から選べて、マウスで動かせて、けすこともできて、自動で保存できるようにしてください。
小学生でも作れるように、HTMLだけでお願いします。

💻 プログラムの使い方

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

  2. 下のプログラムをコピーして、メモ帳に貼りつける

  3. fusen.htmlという名前で保存（ファイルの種類は「すべてのファイル」に）

  4. 保存したファイルをダブルクリックして開く！

✏️ ChatGPTが書いてくれたプログラム

html
<!DOCTYPE html>
<html>
<head>
<title>ふせんアプリ</title>
<style>
body { font-family: sans-serif; background: #f0f0f0; }
#controls { margin: 10px; }
.note {
width: 200px;
height: 150px;
position: absolute;
padding: 10px;
box-shadow: 2px 2px 5px gray;
resize: both;
overflow: auto;
border-radius: 8px;
}
.delete-btn {
float: right;
background: #fff;
border: none;
cursor: pointer;
font-weight: bold;
}
</style>
</head>
<body><h2>📝 ふせんアプリ</h2>
<p>好きな色をえらんで「ふせんを追加」をクリックしてね！</p>
<p>ふせんはドラッグしてうごかせるよ！ ×ボタンでけせるよ！</p>

<div id=“controls”>
<button onclick=“setColor(‘lightyellow’)”>黄色</button>
<button onclick=“setColor(‘lightpink’)”>ピンク</button>
<button onclick=“setColor(‘lightblue’)”>水色</button>
<button onclick=“setColor(‘lightgreen’)”>みどり</button>
<button onclick=“addNote()”>ふせんを追加</button>
</div>

<div id=“notes-container”></div>

<script>
let currentColor = ‘lightyellow’;

function setColor(color) {
currentColor = color;
}

function addNote(content = ”, x = 50, y = 50) {
const note = document.createElement(‘div’);
note.className = ‘note’;
note.contentEditable = true;
note.style.background = currentColor;
note.style.left = x + ‘px’;
note.style.top = y + ‘px’;
note.innerHTML = ‘<button class=”delete-btn” onclick=”deleteNote(this)”>×</button>’ + content;
note.onmousedown = dragMouseDown;
document.getElementById(‘notes-container’).appendChild(note);
saveNotes();
note.oninput = saveNotes;
}

function deleteNote(btn) {
const note = btn.parentNode;
note.remove();
saveNotes();
}

function saveNotes() {
const notes = [];
document.querySelectorAll(‘.note’).forEach(note => {
notes.push({
content: note.innerHTML.replace(/<button.*<\/button>/, ”),
color: note.style.background,
x: note.style.left.replace(‘px’, ”),
y: note.style.top.replace(‘px’, ”)
});
});
localStorage.setItem(‘stickyNotes’, JSON.stringify(notes));
}

function loadNotes() {
const notes = JSON.parse(localStorage.getItem(‘stickyNotes’) || ‘[]’);
notes.forEach(n => {
currentColor = n.color;
addNote(n.content, parseInt(n.x), parseInt(n.y));
});
}

function dragMouseDown(e) {
const note = this;
let shiftX = e.clientX – note.getBoundingClientRect().left;
let shiftY = e.clientY – note.getBoundingClientRect().top;

function moveAt(pageX, pageY) {
note.style.left = pageX – shiftX + ‘px’;
note.style.top = pageY – shiftY + ‘px’;
}

function onMouseMove(e) {
moveAt(e.pageX, e.pageY);
}

document.addEventListener(‘mousemove’, onMouseMove);

note.onmouseup = function () {
document.removeEventListener(‘mousemove’, onMouseMove);
note.onmouseup = null;
saveNotes();
};
}

window.onload = loadNotes;
</script>

</body>
</html>

📌 アプリのつかいかた

  1. 上の「黄色」「ピンク」などのボタンで色をえらぼう！

  2. 「ふせんを追加」ボタンをクリック！

  3. 出てきたふせんに、メモをかこう！

  4. マウスでドラッグして、好きな場所にうごかそう！

  5. ×ボタンでけしたいふせんをけせるよ！

  6. 書いたメモはじどうで保存されるよ！

🎉 アプリ完成！

これで、きみだけの「ふせんアプリ」ができたね！

「こんなのも作りたい！」と思ったら、またChatGPTにたのんでみてね♪

コメント

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