![見出し画像](https://assets.st-note.com/production/uploads/images/111206780/rectangle_large_type_2_8b6cf39f972f2602d2c61e7950828803.jpeg?width=1200)
Teachable Machineを使用したスマホ入場判定ツール
こんにちは。DXチーム所属間もない会社員です。何かの役に立つものをつくりたいとの思いでAIツールににチャレンジしてみました。Teachable Machineを使用して簡易ですが入場チケットの判定ツールを作成しました。
#protoout #teachablemachine #codepen
— opa11111 (@s_opa11111) July 19, 2023
Teachable Machine とCODEPENでスマホによるチケットチェックツールを作成してみました。
後ほど作成レポートもアップします。 pic.twitter.com/NiEXqp79WV
制作の背景
私の所属する会社はショッピングセンターの運営管理会社です。
店舗では消費者さまやお取引先さまを対象に、イベントを年に数回実施しています。入場チェック時に相互に客観的チェックツールがあれば便利かと考えました。入場チェックもフリー参加のものからチケットをもぎるものまで形式は様々です。今回は、展示会や、招待生販売会など若干規制を緩めて対応可能なイベントを想定し
1)招待券持参
2)もぎり無しの入場時チケットチェック
の条件想定で対応可能なものを作成してみました。
シンプルにチケットの表面がチェック面とし、「PASS」で入場可、
![](https://assets.st-note.com/img/1689770566348-vBjdSIdLG3.png)
裏面はNG面とし、再提示し「PASS」して入場いただくという設定にします。それ以外のものを提示しても当然「NG」です
![](https://assets.st-note.com/img/1689770582637-JfOamZgmkE.jpg)
使用ツール
Teachable Machine
CODEPEN
チケット設定(classの登録)
PASS面
![](https://assets.st-note.com/img/1689770637826-Yo1Ir9QmwS.png?width=1200)
NG面
![](https://assets.st-note.com/img/1689770649840-naTKS1ri5J.png?width=1200)
設定・トレーニングについて
Teachable Machineの画像メニューで、PASS面NG面を上下左右全方向登録しました。
PASS面
![](https://assets.st-note.com/img/1689770670581-ZcrcbA8nGt.png)
![](https://assets.st-note.com/img/1689770712441-O6fFgHOE5F.png)
![](https://assets.st-note.com/img/1689770721513-dls9kBzWob.png)
![](https://assets.st-note.com/img/1689770728531-ea1f2rOZ4R.png)
NG面
![](https://assets.st-note.com/img/1689770744391-cwcLuiWPbe.png)
![](https://assets.st-note.com/img/1689770753202-i4gCfCB1xl.png)
![](https://assets.st-note.com/img/1689770758987-oZEQ3WUjcx.png)
![](https://assets.st-note.com/img/1689770768352-PJXJQ0ciVu.png)
次にコードをアップロードしてCODEPEN用のコードスニペットををコピーします。今回はp5.js の形式を選択しました。
![](https://assets.st-note.com/img/1689770786283-IKfmdYXdsS.png)
コードペンを起動
HTML欄に先ほどコピーしたコードスニペットペーストします。
画面をフルサイズ版指定します。
![](https://assets.st-note.com/img/1689770801816-aSh3PBJjYK.png)
フルサイズ版が開いたらURLをコピーします。
スマホでCODEPEN起動
PASS面は問題無く反応します。
![](https://assets.st-note.com/img/1689770848863-oOV4yyUOdB.jpg)
NGもチケット裏面については問題ありません。
![](https://assets.st-note.com/img/1689770864642-kV7OE90fvM.jpg)
ただチケットでではない別物を表示した場合、スマホ画面などで「白地と枠の組み合わせ」で「PASS」されるケースがありました。受付スタッフが対応するので2重チェックは可能ですが、精度アップの調整の検討が必要です。
![](https://assets.st-note.com/img/1689770888871-EltxKjYVyy.png)
![](https://assets.st-note.com/img/1689770898115-KMPJnci4uV.png)
終わりに
ここに記載ありませんが、その他の想定を試みた際、数字の判定についてTeachable Machineは苦手なようで、1と11などは「1」と判定されがちでした。
今回作成した画像系の判断の方が向いていそうです。最後までお読みいただき感謝いたします。