Teachable Machineでwebアプリ作成に挑戦
みなさま、こんにちは。
私は小売業の販売課長として、デジタルツールを活用した業務改善に取り組んでおり、前回はGlideでシフト管理アプリを作成しました。
最近ではTeachable Machineというツールを学びました。
Teachable Machineは、プログラミングの知識がなくても、画像認識、音声認識、ポーズ認識などの機械学習モデルを簡単に作成できる無料ツールです。今回はTeachable Machineを使って、画像認識アプリの作成に挑戦しました。
従業員教育ツールを作成したい
チェック柄は、一見同じに見えても実は様々な種類があり、それぞれに名前と特徴があります。タータンチェック、ギンガムチェック、グレンチェックなど、チェック柄には数千種類もあると言われています。私は、以前社内資格の取得を目指した際に、アパレル商品知識の奥深さと、いかに重要であるかを学びました。チェック柄には、それぞれに歴史や特徴があり、お客さまの好みや希望に合わせたスタイル提案をするためには、この知識が不可欠です。
（一例）
タータンチェック・・・フォーマルな印象を与える
ギンガムチェック・・・カジュアルな印象を与える
グレンチェック・・・上品でエレガンスな印象を与える
使用ツール
・Teachable Machine
・CodePen
制作開始
ステップ1:Teachable Machineの設定
Teachable Machineにアクセスし、ブラウザ上で独自モデルを作成します。
使ってみるをクリックします。
画像プロジェクトをクリックします。
標準の画像モデルをクリックします。
ステップ2:画像サンプルを追加
今回は、代表される７つのチェック柄のサンプルを作成します。
・タータンチェック
・ギンガムチェック
・ハウンドトゥース（千鳥格子）
・マドラスチェック
・グレンチェック
・ブロックチェック
・ウィンドウペン
Classにチェック柄の名称を入力、ウェブカメラを起動させます。
カメラの前で柄を映しながら長押しで録画を長押しします。１００枚前後の画像サンプルが準備できたら、モデルをトレーニングするをクリックし学習させます。
トレーニングが完了したらプレビューにて画像を映して試してみます。
まずは、サンプルと同じ画像を写すとギンガムチェック９８％と判定されました。
サンプル以外の画像を試してみます。色を変えてパープルのギンガムチェックを映してみると、ギンガムチェック７６％と判定されました。
それでは、モデルをエクスポートするをクリックします。
モデルをアップロードをクリックします。
アップロードが完了したら、共有可能なリンクURLをコピーします。
ステップ3: CodePenの設定
CodePenとはブラウザ上でコードを記述し、自分で開発ができるWebサービスです。今回はTeachable Machineをスマートフォンでも使用できるようにするため、CodePenを使用しました。次回は、Node-REDやMakeを使ってLINEとの連携にも挑戦したいです。では、CodePen／テンプレートを開き、名前を変更してSave（保存）しFork（複製）します。
HTMLの白字の部分をアプリ名に変更し、JSの緑字の部分に先程コピーしたモデルのURLを貼り付け、上書き保存をします。
完成品
完成したアプリのカメラに映すと「ギンガムチェック」と判定されました。
使いやすいように画面表示を切り替えます。画面右上にある四角いボタンからFull Page Viewをクリックします。そうするとコード入力の画面が非表示になり、カメラ起動と結果の表示になります。
まとめ
今回の簡易アプリでは、チェック柄の画像認識機能を実装しました。さらに、チェック柄の種類、歴史、特徴、コーディネート例などを分かりやすく解説することで、教育ツールとしての機能を強化することができます。このアプリは、ストライプやプリントなど、他の柄にも応用できる汎用性の高いツールです。アパレル販売には、柄、素材、ディテールなど、幅広い商品知識が必要とされ、その奥深さは計り知れません。さらに、ペールトーンやビビットカラーなど、色に関する知識の習得にも役立ちます。教材だけでなく、このようなアプリを教育ツールとして活用することで、チームメンバーは実際に売場にある商品を使って、楽しみながら学ぶことができると考えています。
参考資料