【Teachable Machine】売場商品で学ぶ！チェック柄マスターアプリの作り方

# Teachable Machineでwebアプリ作成に挑戦
みなさま、こんにちは。
私は小売業の販売課長として、デジタルツールを活用した業務改善に取り組んでおり、前回はGlideでシフト管理アプリを作成しました。


https://qiita.com/nishia/items/2473ab4b027da8e8b4b0


最近ではTeachable Machineというツールを学びました。
Teachable Machineは、プログラミングの知識がなくても、画像認識、音声認識、ポーズ認識などの機械学習モデルを簡単に作成できる無料ツールです。今回はTeachable Machineを使って、画像認識アプリの作成に挑戦しました。


# 従業員教育ツールを作成したい
チェック柄は、一見同じに見えても実は様々な種類があり、それぞれに名前と特徴があります。タータンチェック、ギンガムチェック、グレンチェックなど、チェック柄には数千種類もあると言われています。私は、以前社内資格の取得を目指した際に、アパレル商品知識の奥深さと、いかに重要であるかを学びました。チェック柄には、それぞれに歴史や特徴があり、お客さまの好みや希望に合わせたスタイル提案をするためには、この知識が不可欠です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/eedab83a-a443-2fdf-276f-2eebfec78e06.png" width=50%>

>（一例）
タータンチェック・・・フォーマルな印象を与える
ギンガムチェック・・・カジュアルな印象を与える
グレンチェック・・・上品でエレガンスな印象を与える

# 使用ツール
・Teachable Machine
・CodePen



# 制作開始


## ステップ1:Teachable Machineの設定
[Teachable Machine](https://teachablemachine.withgoogle.com/)にアクセスし、ブラウザ上で独自モデルを作成します。
`使ってみる`をクリックします。
![スクリーンショット 2024-06-24 7.10.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/bf1fbaa2-3c2a-5a6b-daff-04a6a6add60e.png)

`画像プロジェクト`をクリックします。
![スクリーンショット 2024-06-24 7.08.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/3abd90b0-390e-6ca8-dad5-c2efdb23de4f.png)

`標準の画像モデル`をクリックします。
![スクリーンショット 2024-06-24 7.09.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/9e9489a8-a8a8-eb5a-cd88-16e14d61f98f.png)


## ステップ2:画像サンプルを追加
今回は、代表される７つのチェック柄のサンプルを作成します。
・タータンチェック
・ギンガムチェック
・ハウンドトゥース（千鳥格子）
・マドラスチェック
・グレンチェック
・ブロックチェック
・ウィンドウペン


`Class`にチェック柄の名称を入力、ウェブカメラを起動させます。
![スクリーンショット 2024-06-24 7.21.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/e68755ca-590e-0694-0019-9c6c036dd639.png)

カメラの前で柄を映しながら`長押しで録画`を長押しします。１００枚前後の画像サンプルが準備できたら、`モデルをトレーニングする`をクリックし学習させます。
![スクリーンショット 2024-06-24 7.55.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/23a49246-caa3-7c77-04ea-6631d8611231.png)

トレーニングが完了したらプレビューにて画像を映して試してみます。
まずは、サンプルと同じ画像を写すとギンガムチェック９８％と判定されました。
![スクリーンショット 2024-06-25 11.48.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/0b555f8e-b119-76ec-120c-53e1d62daa72.png)

サンプル以外の画像を試してみます。色を変えてパープルのギンガムチェックを映してみると、ギンガムチェック７６％と判定されました。
それでは、`モデルをエクスポートする`をクリックします。
![スクリーンショット 2024-06-24 7.56.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/a7567960-b9e4-f097-9f78-8d0743fd715d.png)

`モデルをアップロード`をクリックします。
![スクリーンショット 2024-06-24 8.05.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/919e8e83-e286-cd11-fc23-7f00149a78b7.png)

アップロードが完了したら、共有可能なリンク`URL`をコピーします。
![スクリーンショット 2024-06-24 8.07.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/9ae94f15-bf30-c21b-0adf-ee3df5d822b2.png)


## ステップ3: CodePenの設定
[CodePen](https://codepen.io/features/)とはブラウザ上でコードを記述し、自分で開発ができるWebサービスです。今回はTeachable Machineをスマートフォンでも使用できるようにするため、CodePenを使用しました。次回は、Node-REDやMakeを使ってLINEとの連携にも挑戦したいです。では、[CodePen／テンプレート](https://codepen.io/pen/?template=XWgNxmb)を開き、名前を変更して`Save（保存）`し`Fork（複製）`します。
![スクリーンショット 2024-06-24 9.43.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/c58db93c-dfb8-4278-f7dc-6c4c47e0435f.png)

`HTML`の白字の部分をアプリ名に変更し、`JS`の緑字の部分に先程コピーしたモデルのURLを貼り付け、上書き保存をします。
![スクリーンショット 2024-06-24 9.45.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/bae978c1-7a7c-2dfc-6383-b2fe86693126.png)



# 完成品
完成したアプリのカメラに映すと「ギンガムチェック」と判定されました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/d8c3c39f-8c2e-05e0-fbfe-ec4d720cd892.png" width=50%>


使いやすいように画面表示を切り替えます。画面右上にある四角いボタンから`Full Page View`をクリックします。そうするとコード入力の画面が非表示になり、カメラ起動と結果の表示になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/bf4c1a05-021d-14d2-1483-c278a7158b94.png" width=50%>



# まとめ
今回の簡易アプリでは、チェック柄の画像認識機能を実装しました。さらに、チェック柄の種類、歴史、特徴、コーディネート例などを分かりやすく解説することで、教育ツールとしての機能を強化することができます。このアプリは、ストライプやプリントなど、他の柄にも応用できる汎用性の高いツールです。アパレル販売には、柄、素材、ディテールなど、幅広い商品知識が必要とされ、その奥深さは計り知れません。さらに、ペールトーンやビビットカラーなど、色に関する知識の習得にも役立ちます。教材だけでなく、このようなアプリを教育ツールとして活用することで、チームメンバーは実際に売場にある商品を使って、楽しみながら学ぶことができると考えています。



# 参考資料
https://qiita.com/ataka2443/items/f5b7bfecba0eb2a33bbb

https://qiita.com/dx_kumagai/items/7fa7ca14c6af6c6a9d15

https://qiita.com/s053050g/items/2dd4bf32b63b342945a7

https://qiita.com/tbpgr/items/989c6badefff69377da7