物の名前がわからなくても教えてくれる映像判断ツール

「これって何？」って思うことがありませんか？

下の画像の物の名前はわかりますか？

正解は「バッグクロージャー」と言います。
私はバッグクロージャーと言われても何のことか最初わかりませんでした。
でも画像を見れば何をするための物なのかわからない人は少ないと思います。
このように世の中には画像で見れば知っていても、名前を知らない物ってありますよね。

仕事で使う物も「これって何？」が多い

お店の中には沢山の機器が置いてあります。
しかし、それらの機器の名前を丁寧に教えてもらったことはないと思います。
似たような機械でも人によって呼び方が違ったりしていて、何の事を言っているのかわからない。
それに加えて「どこが管理しているのか？」「問い合わせ先はどこなのか？」完璧に理解している人は少ないのではないでしょうか。
一応問い合わせ先は機器にシールで貼り付けたり、一覧表はあったりしますが、文字が擦れていて読めなかったり、一覧表もどれに該当するのかわからないと調べようもありません。
滅多に触らない機器の場合、本部の担当者も引き継ぎができておらず、誰も知らない機器なんて物もよくあります。
困るのが正しい名称で会話しないとメーカーに「それはうちの機器ではないかもしれないので、本部に確認してくれ」と言われてしまう事もあります。

名前はわかなくても大丈夫！問い合わせ先確認ツール

名前を教えてくれることに加えて、業務でも使えるよう問い合わせ先を教えてくれるツールを作りました。
電話番号を聞くボタンを押すと、写した物の名前と問い合わせ先を教えてくれます。
CodePenのリンク先

利用したツール
Teachable Machine
CodePen
Node-RED

Teachable Machineで対象の機器を設定

まずはTeachable Machineで機器の画像を覚えさせます。

CodePenで画面とNode-Redに情報を送るJavaScriptを書きます。

コードの詳細はリンク先を参照してください。

Node-REDで取得した機器情報から問い合わせ先を参照します

問い合わせ先はGoogleのスプレッドシートに記述してあります。

②の解説
Teachable Machineから取得した物の名前がスプレッドシートの配列と同じ文字があった場合、電話番号が入っている次の配列の値を取得します。

for (  var i = 0;  i < 10;  i++  ) {
 if (msg.item == msg.payload[i]){
     msg.payload = msg.payload[i + 1]
     break;
 }
}    
return msg;

当該ツールを振り返ってみて

今回はスプレッドシートから情報を取得するやり方を使ってみました。
この仕組みならTeachable Machineとスプレッドシート側を変えればユーザーにはまったく入力をさせることもないため実用的だと感じました。
同僚にも使ってもらったところ、以下の回答をもらいました。
・全くPCの知識がなくても使えて便利。
・今ある一覧表をデータとして使えばよいので導入も簡単
・画像をどれだけ覚えさせる事ができるかにもよる
・膨大なデータを覚えこませても処理速度早いのか？
・問い合わせ先以外にも機器の説明を出したら教育にも使える

足りないところ

導入にあたり処理速度と画像データをどれだけ覚えさせられるのかは課題だと思います。
なかなか表示されないと人に聞いた方が早いと思われると作った意味がなくなってしまいます。
CSS部分を工夫してみたかったのですが、ユーザーにとっつきやすい画面をどのようにすればよいのかアイデアが思いつきませんでした。
別パターンも見せましたが、もっとシンプルでいいんじゃないと言われてしまい、今の形に落ち着きました。
デザイン部分は苦手なので、プログラムより苦戦しそうです・・・