にぎり寿司を作るのに必要なシャリ玉と細巻を計算するアプリ

<a id="top"></a>

### 完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/f2a67785-c220-e762-3d01-16077b496ad3.png)


### 操作動画
https://x.com/9Bp7Pmk7Gp1266/status/1849074264173113726

### 目次
1.  [なぜ⁉寿司計画＆製造をもっと簡単に][1]
2. [使用したツール][2]
3. [完成htmlコード][3]
4. [作成手順][4]
5. [お疲れ様でした！][5]
6. [ChatGPTが苦手な事][6]

[1]:#なぜ⁉お寿司計画＆製造をもっと簡単に
[2]:#使用したツール
[3]:#完成htmlコード
[4]:#作成手順
[5]:#お疲れ様でした！
[6]:#ChatGPTが苦手な事

##
### なぜ⁉お寿司計画＆製造をもっと簡単に
私は、スーパーのお惣菜コーナーで働いています。
フライ・弁当・焼き立てパンなど色々業務がある中でも、**お寿司の製造** はとても **頭を使う** のです。

何しろにぎり寿司の中に細巻が入っていたり、細巻だけでださなきゃいけなかったり。また、**お店で設備環境が異なって** おり店内炊飯で酢飯を作ったり、毎日配送される工場の酢飯を使ったり。

今まで店内炊飯だったのでお寿司製造し放題だったのですが、異動で工場酢飯のお店になり酢飯を過剰発注したり、足りなくて製造出来ない日も（泣）
今回のアプリを作成した **”ねらい”** は
　　**①慣れないパートさんが発注する時に参考にする。
    　　②細巻の数を把握することでスムーズに作業できる。
     　　③シャリ玉の過不足をなくす。**

本当に、本当にシャリ玉の計算が大変で。
エクセルでも **数式が複雑** になりすぎて修正する時も大変で。
今回は、**流行りの「ChatGPT」** に助けてもらいながら作成していきます！

##
##  使用したツール
・ChatGPT https://chatgpt.com/
・CodePen https://codepen.io/
・メモ帳 



## 作成手順
まず、自分自身がどんな計算アプリを作りたいのかイメージを紙に書きだす。

その上で、chatGPTに作りたい内容を書き込む。
例：「にぎり寿司Aを作るのに必要なシャリ玉を計算したいです。
　　シャリ玉10個
  　　鉄火細巻　1本で2/6本使用
   　　かっぱ細巻　１本で2/6本使用
     　　※細巻1本製造する際に、シャリ玉を４個消費します。
       　　にぎり寿司Aを〇パック製造する際、シャリ玉をいくつ必要か計算できるhtmlを作りたいです。」

ChatGPTから出てきた回答を「CodePen」のHTML欄に貼り付けて、**検証** してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/1b2be7d4-d3e9-9a3e-014a-b1401b71e32a.png)
↑　すべてのhtmlを表示していません。途中までです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/9af62ef6-d98e-17b4-3b45-283fec24df58.png)

:::note info
指示文が複雑だと間違えることも。
小学生に説明するように少しずつ具体的に説明すると◎
:::


ううーん、理想とは違う…。
どうしようと不安になるかもですが安心してください、１回の回答で完成品になることはまずないので **何回でも指示** を出していきます。

### 完成品になるように、追加で指示を出していきます。
「追加で計算結果を出してください。必要な鉄火細巻の本数。必要なかっぱ細巻の本数」
   「表はこのままで、シャリ玉の発注が55個単位です。全て製造するのにシャリ玉はいくつ発注したらいいですか？」
   「表がみにくいです。中央に揃えて下さい」
   「表を可愛くして下さい」
   「計算が間違っています。細巻は巻きたい本数なので、小数点を切り上げて下さい」などなど。


## 完成htmlコード
```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>
```

## 実際に運用するために拡張子を変換！
メモ帳に上記の完成コードを張り付けて、名前を付けて保存する際に拡張子（好きな名前.<font color="Red">拡張子</font>）を **htmlに変換して保存** 。
これで **ワンクリック** でアプリを使う事が出来ます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885174/c2db56c5-f970-bc9e-9dc7-6e7a66e4fc1a.png)


## お疲れ様でした！
私は **ChatGPTの無料版** を使っていたので、完成までに２日掛かりました。
初めてChatGPTを使ったので余計時間が掛かったのかも。
それでも、**職場で役に立つ** ものが作れて **すごく嬉しい** です。

今回も実際にパートさんに使ってみたかったのですが、新規事業の影響でお寿司の製造が叶わず（泣）

今後パートさん達にシャリ玉の発注をお願いしたいと思っているので、商品Aだけではなく、商品Dまで計算できるように、細巻・中巻・太巻も含めた計算が出来るように　**バージョンアップ** を目指していきたいと思います。

商品Aの状態だけでもとても魅力的なこのアプリは **ずっと使っていく** 予定です( *´艸｀)

## ChatGPTが苦手な事
ChatGPTに **「chatGPT が苦手な事、出来ない事はありますか？」** と聞いてみた結果です。

・とりあえずの感情や意識
・最新のニュースや現在進行中の情報について
・個人のプライバシー情報や特定の人物の詳細
・停止する、実実験
・創造的作業
・曖昧な要求や非論理非論理的な質問

ただ計算アプリ作りたいんだけど、と曖昧に質問しても、 **「どのようにサポートすればよいでしょうか? 」** との返答でしたね。
また、最初は計算式があっていたのに途中で間違えることもありました。
私もですがAIも成長途中です。最後は**確認が必要**です。

  <br>

最後まで読んで頂き、ありがとうございました！
以上

[ページの一番上に戻る](#top)