こんにちはhiro-isakaこと『ひろ』です🐶
いろいろありましてペンネーム改名しましたm(__)m
私は小売業のECショップの担当をしていますが担当業務は幅が大変広～くて商品発掘から商談、ショップシステムへの登録、受発注、お客様対応などなど∞
今回は、ECサイトの商品登録業務に大きく貢献してくれる『カラーバリエーション』の設定に役立つツールをTeachable Machineを使って作ってみました。
🌈私が他の業務改善について書いた記事です
カラーバリエーション設定とはなによ？
商品仕様の一部で、商品の代表カラーの設定のこと。
もちろん商品の画像もあるからそれで確認すれば済む話ですが、検索キーワードで引っかかりやすくなる嬉しいメリットがあるし、そもそも設定しないと商品登録が完了できないので必須項目になります。
バナナ🍌のような単色の商品なら当然「イエロー」って登録するけど、いろんなカラーが混在する商品だと困りますよね。
シマウマ🦓のぬいぐるみだったら「ブラック」「ホワイト」どっちなの？って。
Teachable Machineを使ってみよう🎉
Class登録やサンプル画像アップロード画面までの道のりはこちらを参考に!
まずはいろいろな準備をするよ
①Classの作成（今回は、赤系、緑系、茶系、黄色系、ベージュ系の５つ）
②サンプル画像をそれぞれのカラーのClassへアップロード
③アップロードした画像を覚えさせるためモデルをトレーニング
次に
④モデルをエクスポート
ここからがプログラマーっぽい💻
⑤Tensorflow.jsを選択
⑥Javascriptを『メモ帳』に貼り付けてhtmlで保存
※ローカルで使用したかったので『メモ帳』さんにご協力いただきました。
ここからが試行錯誤の繰り返し😑
最初はカメラを起動させて映した画像のカラー判定するだけのシンプルなものでしたが
アップロードした商品画像のカラーを判定させたかったのでコードの変更を毎日何度も
ChatGPTさんに聞きました。
その都度快く教えてはくれるのだけど、あまり聞きすぎると『今日はもう終わりよ！これ以上は答えられないわ🙅』と言われ、機嫌が直るまで数時間待つ始末🤣
やっとできあがったコードはやっぱり呪文にしか見えないけど絵文字を入れたり、表示される文字の大きさや色も変えようと苦手なhtmlとも向き合ってみました。
そして出来上がったのがこれ！
黄色いバナナなのになぜかベージュ系と出るの💦なんでかな―？
本当にやりたかった事
本当はアップロードした商品画像とカメラで映した商品のカラー判定の二刀流ツールを作りたかったのですが、ここは何度ChatGPTさんに聞いても上手くいきませんでした😢
両方のボタンは作れるけど片方しか動かない状況になってしまうのでめっちゃ残念だけど
ここは一旦諦めて、アップロードした商品画像の判定ツールとして作りました。
今回は理想の形にはならなかったけど諦めずに、二刀流ツールを完成させたいと思います✊🏻
最後まで読んで頂き、ありがとうございました💖