皆さんこんにちは！現在会社のシステム部門で働いている会社員です。
突然ですが、端子の形状って多すぎだと思いませんか？USB端子もType-AとかCとか、2.0とか3.0があるし、ディスプレイに繋ぐケーブルもHDMI、DisplayPort、VGA等々、、、多いだけならまだしも、システム部門で働いているとこれらに関する問い合わせも来るのです。「このケーブルが何に使うかわからない」「このケーブルが欲しいんですけど」、と普段使っていない人からするとケーブルの名称なんかいちいち覚えてませんし、電話で形を説明されてもポカーンとなってしまいます。そこで、今回は機械学習を使って、端子の形状をカメラで写すと名称を教えてくれる仕組みを作ってみました。

こんな感じで作成することができました。それでは作成した方法をご紹介していきます。

使用ツール紹介

・Google Teachable Machine（https://teachablemachine.withgoogle.com/ ）
Google Teachable MachineはGoogleが公開している機械学習ツールです。ウェブベースでサイトにアクセスすれば誰でも利用可能です。ノーコードで画像・音声・ポーズを学習させ、それらを判別するモデルを作成することができます。

・CodePen（https://codepen.io ）
CodePenはWebブラウザ上でHTML/CSS/JavaScriptなどを記述し、開発を行うことができるサービスです。

その1-Google Teachable Machineで機械学習モデルを作成する-

①Google Teachable Machine（https://teachablemachine.withgoogle.com/ ）にアクセスする

サイトにアクセスするとこのようなページが表示されます。「使ってみる」をクリックしましょう。

②プロジェクトを選択する

Google Teachable Machineでは「画像プロジェクト」「音声プロジェクト」「ポーズプロジェクト」から選べるようになっています。
今回は「画像プロジェクト」を選択し進めます。

上記の選択肢が表示されるので、ここでは標準の画像モデルを選択します。

③Classの設定とモデルの作成

次にClassの設定を行います。Class1つに対して1つの学習させたい対象を認識させます。

このようにWebカメラを使用し対象を撮影していきます。

④機械学習モデルの作成

各端子の画像を撮影しました。撮影後、「モデルをトレーニングする」をクリックすると撮影した画像をもとに学習したモデルが作成されます。

実際にUSB（Type-B）端子を映してみるとUSB-Bの欄が90%と表示されており正しく認識されていることが分かります。

その2-CodePenで機械学習モデルを連携する-

①機械学習モデルのエクスポート

次に「モデルをエクスポート」をクリックします。

モデルをアップロードを選択します。

共有可能なリンクにURLが表示されたら完了です。

②CodePenでWebアプリを作成する

「p5.js」を選択し、コピーしておきます。

CodePenにアクセスし、HTML欄にコピーしたコードを貼り付けます。

「SAVE」で保存し、「Change View」からFullPageViwを選択すると実行画面が見やすくなります。
このページのURLを利用すればスマホからでも使用することができるようになります。

最後に

今回初めてGoogle Teachable Machineを用いた機械学習を使用しましたが非常に簡単に機械学習モデルを作成することができました。今回作成したWebアプリを社内のポータルサイトに掲載するようにすれば誰でも自分で確認できるようになります。さらに、今回の手順を発展させ、より高度なWebアプリを作成できれば、画像認識から在庫の確認、出庫申請や発注手続きなど色々なことに繋げていけそうです。ぜひ皆さんもトライしてみてください！ご覧いただきありがとうございました！