寿司職人への道　文系初心者のノーコードツール作成録（Teachable Machine）



# 寿司職人ツール作成のキッカケ

こんにちは、小売り勤務のプログラミング初心者です。
２回ほどノーコードでデジタルツールを作成してみて、足の小指分ぐらいは分かってきたような気がしてきました。

今回は[Teachable Machine](https://teachablemachine.withgoogle.com/)という機械学習AIで**お寿司の出来栄えチェックツール**作成にチャレンジしてみました。


以前同僚が

**商品の盛り付け方に個人差があって、教えるのが難しい…** 

と嘆いていて、**出来栄えチェックツールを作ったら、新人の教育に一役買えるかも！** と思ったのが発端です。

生鮮食品を扱う部署は、お店で原料を加工し盛り付けてから店頭に出すのですが、盛り付けの細かい部分を言葉で伝えるのは難しいので、機械に学習させて判定してもらったら分かりやすそうです。



# できた

**:sushi:　これで君も寿司職人!!　:sushi:**

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🍣お寿司出来栄えチェックツール🍣 ３段階で出来栄え判定してくれます <a href="https://t.co/ubfIHK3eIZ">pic.twitter.com/ubfIHK3eIZ</a></p>&mdash; いず (@88Eqv) <a href="https://twitter.com/88Eqv/status/1527636843512012800?ref_src=twsrc%5Etfw">May 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


:::note info

**ポイント**
- :white_flower:　**寿司職人！**　と　:o:　**見習い**　と　:x:　**やりなおし！**　の三段階判定

- 練習のチェックをＡＩに任せ、:white_flower:の商品を２回作れたらＯＫなどの判定を任せられる


:::




# 使用ツール
- [Teachable Machine](https://teachablemachine.withgoogle.com/ "Teachable Machine")
Webカメラ・画像ファイル・マイクから手軽に機械学習をさせ、簡易のAI学習ツールを作成することができるツールです。


- [CodePen](https://codepen.io/)
HTML.CSS.JavaScriptのコーディングを行えるサイトです。

# 作成手順


**①.[Teachable Machine](https://teachablemachine.withgoogle.com/)で三段階のお寿司の写真を覚えてもらいます。**

https://qiita.com/misa_m/items/d8a20d153c8ee7daf0c1



↑**Teachable Machine**の実装過程については、丁寧で分かりやすい記事があったのでこちらを参考に。

![2022-05-20_22h15_00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613615/3c60af84-bb48-976c-0e00-72a576d75640.jpeg)
画像を覚えさせる→トレーニング→反応がOKだったらエクスポート


テストの画像。反応してくれています。
![2022-05-20_03h51_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613615/c8584627-8d3a-3a6d-9e69-52da35e90125.png)

**②.無事作成できたら、モデルをエクスポートし、画像部分のp5.jsをクリックして中身をコピー。**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613615/e9136dd1-71e8-b6de-cf1e-e775f2a092a0.jpeg" width=550 />




**③.[CodePen](https://codepen.io/trending)で新しいpenを作成し、HTML部分に②でコピーしたものをペースト**

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613615/9c80b940-0f38-aee3-8603-bcc1e4b35672.jpeg" width=600 />

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613615/3e789610-92f1-9e76-ce21-18675560ccc9.jpeg" width=750 />


↓実際の中身はこちら
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOvRYYO" data-user="88eqv" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/88eqv/pen/gOvRYYO">
  Untitled</a> by いず (<a href="https://codepen.io/88eqv">@88eqv</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


CSSでタイトルを飾ったり:sushi:を流したりしてますが、大体は張り付けたまま
で、**判定ツールの完成！**
といいつつ、スマホの画像を映して判定するという完成には遠い仕上がりです…。


## ノーコード？

まだまだ改良の余地ありですが、概ね思い描いた挙動をしてくれたと思います。

:::note info
**今後の課題**
- LINEbotと連携して、上司に結果を通知したい
- カメラで撮った写真をアップロードしたら判定するようにしたい
- 作業場で使用できるよう、スマートフォンで扱いたい
　しかし、カメラの向きが内側のままなので扱いづらい
- ボタンを押したらスタートする仕様にしたい
:::

上記の課題を解決しようと色々と調べたのですが、恐らくTeachable Machineが自動で出してくれたコードを修正、書き加えないといけないようでした。
いよいよ私もコードを…！と思ったのですが、試行錯誤しても全く思ったような挙動をしてくれず、**タイムアップ……。**

タイトルにノーコードと書きましたが、本当は今回は若干**コードアリ**な記事をお届けしたかったです…。


こちらのツール、ＷＥＢカメラのみの実装に留まったため、実際に使ってもらうこともまだ出来ていないので、ちゃんと改良して早く使ってもらいたい！

**出来栄え**のような言葉での説明が難しいものと、ＡＩ学習ツール相性は良さそうな気がしました。
盛り付けのチェックの他にも、**バックルームの片づけ・在庫過多度合**などにも応用できそうです！