Teachable Machineで商品券の使用可否チェッカーを作る

## 「この商品券、使えますか？」にすぐ答えられない

小売業で働いていると、避けては通れない**レジでの会計**。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/21fc319b-928e-0fbf-9274-c880358d0822.png" width="50%">
そこでよく聞かれるのが「**この商品券、使えますか？**」です。

全て使えればいいのですが、残念ながら使えないものもあります。
そのため、使える商品券をまとめた一覧を確認して、お答えします。

サッとお答えしたいのですが、いかんせん一覧が見づらい！

ということで、
今回は**商品券の使用可否がサッと分かるWebアプリ**を作りました。

## 作ったもの
https://twitter.com/kmsn_kmsn_kmsn/status/1525440847059202048![-ba8bs1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/a7805dff-c976-81c6-9207-6ffe7cfa2408.jpeg)


使用の可否を◯✕で教えてくれます。

## 使ったもの
- [Teachable Machine](https://teachablemachine.withgoogle.com/)
- [CodePen](https://codepen.io/)

## 構造
1. *Teachable Machine*でAIに商品券の写真や画像を学習させます。
<details><summary>今回は◯：3種、✕：1種にしました。</summary>
◯：500円、1,000円、5,000円<br>
✕：おこめ券<br>
（全てフリー素材のイラストを使用しております。）
</details>

⑴ ウェブカメラ(撮影) または アップロード
![スクリーンショット (78).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/17bbdca1-06b3-2c42-46ad-f1922c01f669.png)
⑵ モデルをトレーニングする
![スクリーンショット (79).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/abb49607-c766-d5fe-ba25-1cbad22ac620.png)
⑶ モデルをエクスポートする
![スクリーンショット (81).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/745f0497-68a1-ca84-8780-7c8ef92f2667.png)
⑷ モデルをアップロード
![スクリーンショット (82).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/5f7925ef-703d-4e72-bd81-04f66c07229f.png)
⑸ URL生成完了
![スクリーンショット (83).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/cf51e69e-13f8-4567-7b56-ee510256459e.png)
⑹ p5.jsのコードをコピー
![スクリーンショット (85).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/9aab5d1d-e187-e1ba-400b-57f3ccfa3c43.png)
2. *CodePen*で新たなPenを作成し、HTMLの欄にコードを貼り付けます。
![スクリーンショット (90).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/2f9f47a2-6acf-4126-cdc9-120e9154698b.png)
![スクリーンショット (86).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/386ace1c-2593-9141-6234-1344d7c493aa.png)
3. 説明文を入れたり、背景や文字の色を変えたりしてみました。
```ruby:追加コード
<body bgcolor="#FF0066" text="#FFFFFF">
<h1>商品券使用◯✕チェッカー</h1>
<div align="left">使用の可否を知りたい商品券をカメラに映してください。</div>
```
![スクリーンショット (87).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/e2f38026-b27f-f093-3723-ca2925ede87f.png)
4. 画面右上Saveで保存します。Change View（⚙Settingsとピンマークの間の□が並んだマーク）から**Full Page View**を選択すると、エディタが非表示となり、Webアプリとして利用できる画面になりました。
![スクリーンショット (88).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/8c269a56-25df-030c-db7e-9a27b4747a66.png)
![スクリーンショット (89).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/902d5b23-c3fd-ae1a-bf41-284f2837852d.png)

## 実際に使ってみて
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWZNaJY" data-user="kmsnkmsnkmsn" 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/kmsnkmsnkmsn/pen/XWZNaJY">
  商品券使用◯✕チェッカー</a> by kmsnkmsnkmsn (<a href="https://codepen.io/kmsnkmsnkmsn">@kmsnkmsnkmsn</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

**精度はまずまず**のようです。（✕判定の商品券をかなり異なるデザインのものにしたため？）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/908eb17c-e947-2e89-1f46-6aadc066cc15.jpeg" width="25%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/24f4ba9f-2101-7ca5-fc04-31c71572c087.jpeg" width="25%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/3667943a-8100-109f-b17f-17a54aa8919a.jpeg" width="25%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/295fe830-aae7-781e-24af-865ac9545eeb.jpeg" width="25%">

ちなみに、学習させていないものは、何となくの色や文字位置で判定しているようでした。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/32f5ca6c-b522-ab33-86ce-ab7e6a7e96cc.jpeg" width="25%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/1c5c28d7-78de-6f86-eba0-71364244cbce.jpeg" width="25%">

## あとがき
今回は◯✕両方学習させましたが、**使えるものだけを学習させて、学習データに無いものには✕判定が出るようにした方が使いやすそう**です。

それでは、スマホ片手にちょっくら商品券をお預かりしてきます！
「こちらの商品券は……ご利用いただけます！」

**追記（2022/05/25）**
〇を商品券毎に細分化してみました。こちらの方が精度は上がりそう？

<blockquote class="twitter-tweet"data-conversation="none"><p lang="ja" dir="ltr">細かく商品券を判別できるようにしてみた <a href="https://twitter.com/hashtag/TeachableMachine?src=hash&amp;ref_src=twsrc%5Etfw">#TeachableMachine</a> <a href="https://twitter.com/hashtag/codepen?src=hash&amp;ref_src=twsrc%5Etfw">#codepen</a> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <br><br>音楽: Carnival<br>ミュージシャン: SoundCarousel<br>URL: <a href="https://t.co/76BN5BXNN0">https://t.co/76BN5BXNN0</a><a href="https://twitter.com/hashtag/VideoGuru?src=hash&amp;ref_src=twsrc%5Etfw">#VideoGuru</a> <a href="https://t.co/rSltNhVwUu">pic.twitter.com/rSltNhVwUu</a></p>&mdash; kmsn (@kmsn_kmsn_kmsn) <a href="https://twitter.com/kmsn_kmsn_kmsn/status/1528787034654920704?ref_src=twsrc%5Etfw">May 23, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>