Teachable Machineを使用したチケット判定ツール

### スマホで使用する簡易なチケット判定ツールを作成してみました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <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><br><br>Teachable Machine とCODEPENでスマホによるチケットチェックツールを作成してみました。<br>後ほど作成レポートもアップします。 <a href="https://t.co/NiEXqp79WV">pic.twitter.com/NiEXqp79WV</a></p>&mdash; opa11111 (@s_opa11111) <a href="https://twitter.com/s_opa11111/status/1681638733345591303?ref_src=twsrc%5Etfw">July 19, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 制作の背景

私の所属する会社はショッピングセンターの運営管理会社です。
店舗では消費者さまやお取引先さまを対象に、イベントを年に数回実施しています。
入場チェック時に相互に客観的チェックツールがあれば便利かと考えました。　　　　　　
入場チェックもフリー参加のものからチケットをもぎるものまで形式は様々です。
今回は、展示会や、招待生販売会など若干規制を緩めて対応可能なイベントを想定し
- 招待券持参
- もぎり無しの入場時チケットチェック

の条件想定で対応可能なものを作成してみました。
シンプルにチケットの表面がチェック面とし、「PASS」で入場可、
![2023-07-19_20h31_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/3e6cb0b6-099a-4a79-0a7a-c5a299f507f2.png)
裏面はNG面とし、再提示し「PASS」して入場いただくという設定にします。
それ以外のものを提示しても当然「NG」です。

## 使用ツール
- Teachable Machine
- CodePen
　　　　　　
## チケット設定（classの登録）
PASS面　
![PASS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/47e64495-5452-cb8a-910d-3b4a48192839.png)

NG面
![NG.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/ef5aacab-7d36-3747-b12d-2455a0ea08d0.png)

## 設定・トレーニングについて
Teachable Machineの画像メニューで、PASS面NG面を上下左右全方向登録しました。
PASS面
![PASS上.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/b0f5ec1b-3313-af21-7b86-f3e2333bdcde.png)![PASS下.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/77bc2772-b1e9-d79c-c1f9-a2857a0985cb.png)![PASS左.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/a196adba-58af-bd71-09aa-ff0ee0b74350.png)![PASS右.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/b70d1247-5c73-8eb8-1d6a-00cef7e87be2.png)

NG面
![NG上.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/0d5d7f94-3adb-5c2f-7876-9a56e358cff6.png)![NG下.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/02d33869-cc44-7e59-4903-494980291739.png)![NG右.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/4409e085-b08d-7a71-584f-0dd209665059.png)![NG左.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/15b67630-42ed-7882-bb9b-27f111920abb.png)

次にコードをアップロードしてCodePen用のコードスニペットををコピーします。
今回はp5.js の形式を選択しました。
![CODE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/9fe799b9-9389-f749-b8a2-8c67bbf142f9.png)

## CodePenを起動
HTML欄に先ほどコピーしたコードスニペットペーストします。
画面をフルサイズ版指定します。
![CODEPEN.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/992ad6d0-d6aa-5060-ae31-6693f215b55f.png)

## スマホでCodePen起動

PASS面は問題無く反応します。
![iPhpnePass.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/fe061ca0-9dd2-6234-6c44-42e4e8384bc1.jpeg)
NGも裏面については問題ありません。
![iPhoneNG.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/038d13d7-a5bd-7e4d-8cc2-8494b560c0c2.jpeg)
ただチケットでではない別物を表示した場合、スマホ画面などで「白地と枠の組み合わせ」で「PASS」されるケースがありました。受付スタッフが対応するので2重チェックは可能ですが、精度アップの調整の検討が必要です
![PASS以外.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/0cf41e1b-5701-51bf-dc54-e4997a231ed8.png)
![PASS以外２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/27771ef9-8e44-323f-f794-a5cc779d37d1.png)

## あとがき
ここに記載ありませんが、その他の想定を試みた際、数字の判定についてTeachable Machineは苦手なようで、１と１１などは「１」と判定されがちでした。

![数値検証サンプル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/3e2dc879-f18e-791b-437e-34d478fbb842.png)



今回作成した画像系の判断の方が向いていそうです。最後までお読みいただき感謝いたします。