簡単に、野菜の美味しい茹で時間だけを教えます!（機械学習）

こんにちは、私は食品スーパーマーケットの事務所で働いています

食品スーパーの店頭には、いつも沢山の野菜や果物が並んでいます。
それは、どこの食品スーパーも同じで、青果コーナーは入口の、一番最初の場所にあります。
ところで皆さん、どうして青果コーナーは店頭にあるのか知ってますか？
私は、野菜から献立を考える方が決めやすいからと、思っていました。
「今日はじゃがいもが安いから肉じゃが作ろう、じゃぁ、次は肉を買わなきゃ」てな感じと思っていました。
逆の見方をすると、どこの食品スーパーも、そういう並びになっているので、長年の学習でそういう思考にさせられたのかも？と勝手な妄想はいけません。
### 本当の意味の食品スーパーマーケットの青果コーナーの戦略は、何なのか？
初めて真面目な質問を店長にぶつけてみました。
すると、**店長の答えはとても素敵なものでした。**
***<font color="gree">青果コーナーには、旬の野菜や果物が並ぶので、お客様に季節を感じてもう為に、店の一番顔になる場所、お客様が一番眼にする場所ということで、店頭に青果コーナーが置かれています」</font>ということでした。***
すみません。前述の、私の適当な言葉は、撤回させていただきます。




### 今回は野菜にスポットを当ててみました。


![野菜５分類.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762532/b9417f5b-fb16-9013-e15f-fa1531c97e94.png)




***野菜について勉強しよう!***

ところで皆さん、野菜には５つ分類があるのご存知ですか？
葉茎菜類、根菜類、果菜類、果実的野菜、香辛野菜の５つです。
そして、更に野菜の色で、緑黄色野菜と淡色野菜とに分類されています。

それぞれの野菜には、栄養素や保存方法などで違いがあります。
野菜を美味しく食べるためには野菜のことを知る必要がありそうです。

### 野菜の調理時間が簡単に分かる方法を簡単に知りたい

皆さんは、料理をする時に、一番野菜が美味しく食べられる茹で時間を考えながらやっていますか？
私は結構適当で「柔らかくなったからもういいかな」てな、感覚でやっているので、いざ食べたら、茹ですぎた、硬すぎたは、よくあります。
そんな***私の失敗をなくしたい。***
### 野菜の茹で時間だけを簡単に教えてくれるアプリを作ってみました。

https://x.com/aTaKa2443/status/1793312672672563450

_____

>**<font color="red">使用したツールと参考記事**
>1. Teachable Machine
>1. CodePen
>1. こちらの記事を参考にさせていただきました

https://qiita.com/dx_kumagai/items/7fa7ca14c6af6c6a9d15


https://ouchigohan-lab.jp/yasai-yudezikan/

https://www.maff.go.jp/j/heya/sodan/1205/05a.html
### Teachable Machineで画像学習


Teachable Machineは画像を認識させて、画像判断をさせることが出来ます。
判定しやすいことを考慮して、色や分類の違う野菜を５つ選びました。

* 小松菜
* さつまいも
* とうもろこし
* かぼちゃ
* じゃがいも

**Teachable Machineで画像を撮影しサンプルを集めます**

![TeachaMachi 画像取得.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762532/44255307-842e-e60f-c3e0-b7b02ccaead3.png)


**次に、トレーニングで画像を学習させます**

![TeachMachi トレーニング.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762532/a20b4a48-f029-8ded-afa6-a5ece95a0261.png)

**そしてプレビューを確認します**
じゃがいもの判定率が低いので、手で持っている画像を追加してみました。
![TeachMachi 野菜画像種類.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762532/514f30a4-8d4a-3735-81f4-c228f2de99e4.png)


**無事、結果判定率が上がったので「モデルをエクスポート」します。**


![TeachMach モデルをエクスポート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762532/cb0483c2-4cf0-2ece-8c9e-8347a48883f0.png)








**次の画面で「モデルのアップロード」をクリック**
その下の「**共有可能なリンク**」が表示されたら
モデルを使用するコードスニペットの「**p5.js**」のコードをコピーして***CodePen***に貼り付けます。




![TeachaMachi モデルをアップロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762532/7393a905-b482-9e5a-70ae-d4d890f87423.png)

**Teachable Machineの設定はここまでです。**

___


### CodePenの設定

先ほど***Teachable Machine***の設定で作成した「**p５.js**」コードをコピーして。***CodePen***の作成画面の中の「**HTML**」にペーストします。

**コードを貼ると下の方にカメラ画像が現れます。**

![codepen HTML.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762532/9520b664-a78a-7dff-de94-f23729a9cf6f.png)

**野菜をカメラに向けると、先ほどのTeachable Machineと同じ判定結果がでました。**


![ちんげん菜.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762532/c3a3facf-d0d2-a83b-7168-3d9c804634ac.png)

### スマホを使ってCodePenを開いてみました。
ビニール袋に入っていても正しく判定されました。


<img width="400" alt="Screenshot_スマホ画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762532/5293f7c9-1421-75cb-10d2-e680a807ff21.png">


___

### 感想とまとめ

 **実際に、店にある野菜でも正しく判定できるのか、仕事帰りに試してみました。**
 ちゃんと判定できました。
 うれしくなって、丁度、近くにいた職場の人に「これどう？」って見せて感想を聞いてみました。
 皆んな「いいね」とか「えっ、こう言うのあるの?」って驚いてくれたりもしました。
 それは、あまりにも嬉しそうな私に、圧倒された為かもしれませんが…
 
 今回は判定しやすさを考えて、色や形の違うもので選んでみましたが、画像の取得を同じ種類の野菜でも、複数の野菜を使うとか、シチュエーションを変えて撮るなど工夫をすれば、もっと判定精度が、上がるのではないかと思いました。
今回はここまでの実装ですが、例えば判定した野菜を使ったレシピとか、保存方法とかの情報に結びつけられたらいいなと**初心者ながも想像は膨らみました。**