ChatGPTとメモ帳で簡単アプリ作成！

AI・プログラミング

ChatGPTとメモ帳で簡単アプリ作成！HTMLでデスクトップでもWebでも遊べる！

こんにちは！今回は 「メモ帳」だけでできる超カンタンなアプリ作りを紹介します。
しかも ChatGPTを使えばコードを考える必要もナシ！
誰でもすぐにパソコンでアプリを動かせるので、プログラミング初心者や親子での自由研究にもピッタリです！

◆ こんな人にオススメ！

  • プログラミングはまったくの初心者

  • 子どもと一緒に楽しく学びたい

  • 難しいソフトを使いたくない

  • すぐに動くアプリを作ってみたい

◆ 必要なものはたったの2つ！

✅ パソコン（WindowsでもMacでもOK）
✅ メモ帳（またはテキストエディタ）

◆ 今回つくるのは「おみくじアプリ」！

クリックするだけで今日の運勢がランダムに表示される、お手軽アプリです！

おみくおみくじアプリ

◆ ChatGPTにお願いしたコードはこちら！

ChatGPTに「おみくじアプリのHTMLコードをください。文字コードは「UTF-8」にしてください」とお願いしたら、こんなコードをくれました👇

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おみくじアプリ</title>
<style>
body {
font-family: "Arial", sans-serif;
text-align: center;
margin-top: 100px;
}
button {
font-size: 1.5em;
padding: 10px 20px;
cursor: pointer;
}
#result {
margin-top: 30px;
font-size: 2em;
color: #cc0000;
}
</style>
</head>
<body>
<h1>今日の運勢は？</h1>
<button onclick="drawFortune()">おみくじを引く！</button>
<div id="result"></div>

<script>
function drawFortune() {
const fortunes = [
“大吉 🎉”,
“中吉 😊”,
“小吉 😌”,
“吉 🙂”,
“末吉 🤔”,
“凶 😢”,
“大凶 😱”
];
const result = fortunes[Math.floor(Math.random() * fortunes.length)];
document.getElementById(“result”).textContent = result;
}
</script>
</body>
</html>

◆ アプリの作り方：たった3ステップ！

✅ ステップ1：メモ帳を開く

メモ帳を開いて、上のコードをそのままコピー＆ペーストしてください。

✅ ステップ2：ファイル名を「omikuji.html」で保存

  • 文字コードは「UTF-8」にしてください（文字化け防止）

  • 保存する場所は「デスクトップ」がオススメ！

✅ ステップ3：ダブルクリックで起動！

保存した「omikuji.html」をダブルクリックすると、すぐにブラウザでアプリが開きます！

◆ スマホやWebに公開するには？

Google DriveやGitHub Pagesなどを使えば、スマホでも見れるようにできます！
それはまた別の記事で詳しくご紹介しますね♪

◆ まとめ

ChatGPTとメモ帳があれば、誰でも簡単にアプリが作れます！
今回は「おみくじアプリ」でしたが、アイデア次第でいろんなゲームやツールも作れます。
次回は「計算クイズ」や「クリックゲーム」にチャレンジしてみましょう！

コメント

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