完成図
操作動画
目次
なぜ⁉お寿司計画＆製造をもっと簡単に
私は、スーパーのお惣菜コーナーで働いています。
フライ・弁当・焼き立てパンなど色々業務がある中でも、お寿司の製造 はとても 頭を使う のです。
何しろにぎり寿司の中に細巻が入っていたり、細巻だけでださなきゃいけなかったり。また、お店で設備環境が異なって おり店内炊飯で酢飯を作ったり、毎日配送される工場の酢飯を使ったり。
今まで店内炊飯だったのでお寿司製造し放題だったのですが、異動で工場酢飯のお店になり酢飯を過剰発注したり、足りなくて製造出来ない日も（泣）
今回のアプリを作成した ”ねらい” は
①慣れないパートさんが発注する時に参考にする。
②細巻の数を把握することでスムーズに作業できる。
③シャリ玉の過不足をなくす。
本当に、本当にシャリ玉の計算が大変で。
エクセルでも 数式が複雑 になりすぎて修正する時も大変で。
今回は、流行りの「ChatGPT」 に助けてもらいながら作成していきます！
使用したツール
・ChatGPT https://chatgpt.com/
・CodePen https://codepen.io/
・メモ帳
作成手順
まず、自分自身がどんな計算アプリを作りたいのかイメージを紙に書きだす。
その上で、chatGPTに作りたい内容を書き込む。
例：「にぎり寿司Aを作るのに必要なシャリ玉を計算したいです。
シャリ玉10個
鉄火細巻 1本で2/6本使用
かっぱ細巻 １本で2/6本使用
※細巻1本製造する際に、シャリ玉を４個消費します。
にぎり寿司Aを〇パック製造する際、シャリ玉をいくつ必要か計算できるhtmlを作りたいです。」
ChatGPTから出てきた回答を「CodePen」のHTML欄に貼り付けて、検証 してみます。
↑ すべてのhtmlを表示していません。途中までです。
指示文が複雑だと間違えることも。
小学生に説明するように少しずつ具体的に説明すると◎
ううーん、理想とは違う…。
どうしようと不安になるかもですが安心してください、１回の回答で完成品になることはまずないので 何回でも指示 を出していきます。
完成品になるように、追加で指示を出していきます。
「追加で計算結果を出してください。必要な鉄火細巻の本数。必要なかっぱ細巻の本数」
「表はこのままで、シャリ玉の発注が55個単位です。全て製造するのにシャリ玉はいくつ発注したらいいですか？」
「表がみにくいです。中央に揃えて下さい」
「表を可愛くして下さい」
「計算が間違っています。細巻は巻きたい本数なので、小数点を切り上げて下さい」などなど。
完成htmlコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【商品A】シャリ玉・細巻計算</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f8ff;
color: #333;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
text-align: center;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
border-radius: 10px;
margin-bottom: 20px;
}
label {
font-size: 18px;
margin-bottom: 10px;
}
input {
width: 100px;
padding: 8px;
margin-bottom: 20px;
border: 2px solid #ff6f61;
border-radius: 5px;
font-size: 16px;
}
input:focus {
border-color: #ff3366;
outline: none;
}
h2 {
background-color: #fff;
border: 1px solid #ff6f61;
border-radius: 5px;
padding: 15px;
font-size: 18px;
max-width: 400px;
text-align: left;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<h1>【商品A】シャリ玉・細巻計算</h1>
<label for="packs">製造パック数:</label>
<input type="number" id="packs" min="0" value="0" onchange="calculateShari()"><br>
<h2 id="result"></h2>
<script>
function calculateShari() {
const packs = document.getElementById('packs').value;
const shariPerPack = 10; // 1パックあたりのシャリ玉数
const shariPerRoll = 4; // 細巻1本に必要なシャリ玉数
const tekkaCount = Math.ceil((packs * 2) / 6); // 鉄火細巻の本数（切り上げ）
const kappaCount = Math.ceil((packs * 2) / 6); // かっぱ細巻の本数（切り上げ）
const totalShariFromPacks = packs * shariPerPack;
const totalShariFromRolls = (tekkaCount + kappaCount) * shariPerRoll;
const totalShari = totalShariFromPacks + totalShariFromRolls;
const orderCount = Math.ceil(totalShari / 55);
document.getElementById('result').innerText =
`必要なシャリ玉の数: ${totalShari} \n` +
`必要な鉄火細巻の本数: ${tekkaCount} \n` +
`必要なかっぱ細巻の本数: ${kappaCount} \n` +
`シャリ玉55個の発注数: ${orderCount}`;
}
</script>
</body>
</html>
`必要なシャリ玉の数: ${totalShari} \n` +
`必要な鉄火細巻の本数: ${tekkaCount} \n` +
`必要なかっぱ細巻の本数: ${kappaCount} \n` +
`シャリ玉55個の発注数: ${orderCount}`;
}
</script>
</body>
</html>
実際に運用するために拡張子を変換！
メモ帳に上記の完成コードを張り付けて、名前を付けて保存する際に拡張子（好きな名前.拡張子）を htmlに変換して保存 。
これで ワンクリック でアプリを使う事が出来ます！
お疲れ様でした！
私は ChatGPTの無料版 を使っていたので、完成までに２日掛かりました。
初めてChatGPTを使ったので余計時間が掛かったのかも。
それでも、職場で役に立つ ものが作れて すごく嬉しい です。
今回も実際にパートさんに使ってみたかったのですが、新規事業の影響でお寿司の製造が叶わず（泣）
今後パートさん達にシャリ玉の発注をお願いしたいと思っているので、商品Aだけではなく、商品Dまで計算できるように、細巻・中巻・太巻も含めた計算が出来るように バージョンアップ を目指していきたいと思います。
商品Aの状態だけでもとても魅力的なこのアプリは ずっと使っていく 予定です( *´艸｀)
ChatGPTが苦手な事
ChatGPTに 「chatGPT が苦手な事、出来ない事はありますか？」 と聞いてみた結果です。
・とりあえずの感情や意識
・最新のニュースや現在進行中の情報について
・個人のプライバシー情報や特定の人物の詳細
・停止する、実実験
・創造的作業
・曖昧な要求や非論理非論理的な質問
ただ計算アプリ作りたいんだけど、と曖昧に質問しても、 「どのようにサポートすればよいでしょうか? 」 との返答でしたね。
また、最初は計算式があっていたのに途中で間違えることもありました。
私もですがAIも成長途中です。最後は確認が必要です。
最後まで読んで頂き、ありがとうございました！
以上