スマホで使用する簡易なチケット判定ツールを作成してみました。
#protoout #teachablemachine #codepen
— opa11111 (@s_opa11111) July 19, 2023
Teachable Machine とCODEPENでスマホによるチケットチェックツールを作成してみました。
後ほど作成レポートもアップします。 pic.twitter.com/NiEXqp79WV
制作の背景
私の所属する会社はショッピングセンターの運営管理会社です。
店舗では消費者さまやお取引先さまを対象に、イベントを年に数回実施しています。
入場チェック時に相互に客観的チェックツールがあれば便利かと考えました。
入場チェックもフリー参加のものからチケットをもぎるものまで形式は様々です。
今回は、展示会や、招待生販売会など若干規制を緩めて対応可能なイベントを想定し
- 招待券持参
- もぎり無しの入場時チケットチェック
の条件想定で対応可能なものを作成してみました。
シンプルにチケットの表面がチェック面とし、「PASS」で入場可、
裏面はNG面とし、再提示し「PASS」して入場いただくという設定にします。
それ以外のものを提示しても当然「NG」です。
使用ツール
- Teachable Machine
- CodePen
チケット設定（classの登録）
PASS面
NG面
設定・トレーニングについて
Teachable Machineの画像メニューで、PASS面NG面を上下左右全方向登録しました。
PASS面
NG面
次にコードをアップロードしてCodePen用のコードスニペットををコピーします。
今回はp5.js の形式を選択しました。
CodePenを起動
HTML欄に先ほどコピーしたコードスニペットペーストします。
画面をフルサイズ版指定します。
スマホでCodePen起動
PASS面は問題無く反応します。
NGも裏面については問題ありません。
ただチケットでではない別物を表示した場合、スマホ画面などで「白地と枠の組み合わせ」で「PASS」されるケースがありました。受付スタッフが対応するので2重チェックは可能ですが、精度アップの調整の検討が必要です
あとがき
ここに記載ありませんが、その他の想定を試みた際、数字の判定についてTeachable Machineは苦手なようで、１と１１などは「１」と判定されがちでした。
今回作成した画像系の判断の方が向いていそうです。最後までお読みいただき感謝いたします。