HTMLとJavascriptでつくる
声を掛けたら それらしいのを返してくれるヤツ
下記課題解決のプロトアウト
お弁当や総菜など商品作ってラベル貼るときな
ラベル貼機にその商品の品番入力背なあかんねんけど
品番は紙の表になっとって見にくい探しにくいねん
品番多いねん 紛らわしいのもあんねん 表から探すのめんどいやん！
何ページもある表から探してって、その時間が無駄や！
しかも見間違いが多発すんねん！
と あつく かたる いしかわてんちょう
作りたい商品の名前を話したら 検索して表示してくれるのでけへんか？！
音声からそれらしい商品の候補を出しゃ、探しやすいやん
探す時間めっちゃ少なくなるやん！
間違え減るやん！楽できるやん！
と あつく かたる いしかわてんちょう
HTMLとJavascriptで書いてみたぞ
下記にcodepenのプロトタイプ置いておきます
ご査証ください
★ブラウザ GoogleChrome推奨 マイクへの許可しましょう
上手く動作しない時はEDIT ON CODEPEN の所クリックしてcodepenのサイトに移動してつかってみて下しい
See the Pen Untitled by さわやまこうじ (@hvaxtmgw-the-solid) on CodePen.
商品名修正追加
修正、追加はココっす 同じ感じで追加っ
使った感じ
ひとますプロトタイプ完成や 店長どや？
今日はここまで！
とりま chatGPTありがと おつかれ！！
作り方 chatGPTに 質問
俺はスーパーの総菜売り場で働いてるんだけど、商品名言ったら 品番返してくれるの作って
と質問すると
APIとかバックエンドとか言ってくるので
今のスマホってさ だいたい音声入力対応してるじゃん
と思って
codepenつかって簡単に作りたい
検索窓に音声入力されたテキストから商品台帳にある商品を
返すのをつくりたいんだよ
テキスト入力の所 音声入力ボタンをじっそうしたい
とごねると
CodePenで簡単な商品検索デモを作る場合、全てのロジックをフロントエンドで処理する形になります。バックエンドのAPIを模擬するために、静的な商品データをJavaScript内に持たせ、検索クエリに基づいてこれをフィルタリングする方法を取ります。
ここでは、商品名を入力すると、その名前に基づいて商品を検索し、結果を表示する簡単なデモの作成方法を説明します。
と分かり合えた