このタブレット、何て名前？そんな時にはコレ！

# タブレットって種類がたくさん
スマホ、タブレットって種類がたくさん。普段何気なく使ってはいるが、身の回りで使用している機種以外は意外と名前を知らない...。

皆さんもそんなことはないでしょうか。


私は小売企業で、各店舗で使う機器の選定や手配の管理をしています。

店舗には、多くの機器があり、特にスマホやタブレットは様々な種類が使用されています。(用途に応じ使い分け)

当然、店舗は、全ての機種名なんて覚えていません。

そこで困るのが、機器の不具合、故障があった場合の問合せの時。
店舗はヘルプデスク窓口へ問合せをするが、機種名が言えない・・・・。
(マニュアルで調べて、再度問合せなんてことも:confounded:)
※テプラでは管理されていますが、タブレットは業務上1日中使用するため、テプラそれ自体がはがれていることがほとんどです。)

こんな声もあり、「**画像を取るだけですぐ機種名がわかればいいのに・・**」と思い、Teachable Machineを使用してデジタルツールを作ってみました！


# 完成品
タブレット本体をカメラで撮影すると、
機種名を判別し、LINEにメッセージを送信してくれます。　
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">業務用タブレットの種類を教えてくれる<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/TmsiyhUnrf">pic.twitter.com/TmsiyhUnrf</a></p>&mdash; Ka4128 (@Ka4128_1) <a href="https://twitter.com/Ka4128_1/status/1727246202159452335?ref_src=twsrc%5Etfw">November 22, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# LINE送信までの流れ
①**Node-RED**でタブレット画像を撮影
②**Teachable Machine**で学習したモデルを識別
③**MAKE**よりLINEに結果を送信

# 作成方法
①**Teachable Machine**を使用
機械学習を手軽に扱うことができるGoogle提供のサービスです。
今回は複数のタブレット画像を学習させ、撮った画像より機種を判断させました。


手順:point_up:
・判別したいタブレットごとに、WEBカメラで画像を撮る。
・[トレーニング]を押し、[Teachable Machine](https://teachablemachine.withgoogle.com/)に機械学習をしてもらう。
・作成したモデルをエクスポートしておく。![スクリーンショット1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/457d248b-f5b4-adaa-200e-88892d85716b.png) 

判別精度はこんな感じです。ほぼ100%の認識率！
![AI比較.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/4691028d-0b93-c9ff-6e5a-c0b14413e8ed.png)


はじめは、タブレットの‟表裏”、‟カバーありなし”のパターンもTeachable Machineに読み込ませ、機会学習を試みました。

しかし、どうしても判別の精度が低く、このパターンは断念しました。(撮影角度を変え、何度も試みましたが、ダメでした:no_good:)

**パターン材料の見た目が似すぎていると、判別はまだまだ難しい**ようです。
今後このツールを使用する上でも１つ学びになりました。

検証段階での失敗画像(検証のため、2機種のみでテスト)
![スクリーンショット (67).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/8429b282-fbfa-66a6-2713-b7736a3e0780.png)
表向きのカバー付きタブレットを撮影していますが、カバーなしで分類されています。

:::note info
上記はWEBアプリケーションで表示しています。
[CodePen](https://codepen.io/accounts/signup)というツールを使用し、Teachable MachineからエクスポートしたJavascriptを読み込ませることで、WEB表示しています。
:::
![スクリーンショット (69).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/7c14c382-94b0-967e-6ebb-d2aab33476fc.png)









②**Node-RED**を使用
プログラミング知識がなくても、ノーコーディングでプログラムが作れるツールです。 
　
手順:point_up:
・画像のように各種[ノード]を[ワークスペース]に配置し、[ワイヤー]をつなげます。
    　　![スクリーンショット (61).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/b04a6002-4f72-3580-2bf1-4a31c9f635fe.png)
・各種ノードに設定を追加していきます。
→①でエクスポートしたモデルのURLをTeachable Machineのノードに設定
→http requestのノードに③で後ほど作成するURLを設定
・最後に[デプロイ]を押し、スタンバイ完了です。

今回は叶いませんでしたが、今後は実際の店舗の実情に即し、WEBカメラから画像連携するなどのインプット方法も試してみたいと思います。
(まず、テスト用のWEBカメラを手に入れないと・・・)


③**MAKE**を使用

手順:point_up:
・Node-REDから結果を連携するよう[Webhooks モジュール]を使用します。
・送られてきた結果をLINEに送信するよう[LINE モジュール]を使用します。![スクリーンショット (42).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/255cdc7a-1502-a656-af47-0db8be8d80b1.png)

以上で設定完了です。
あとはNode-REDのcamera ノードで対象の画像を撮影し、MAKEに結果が連携されると[完成品]で載せたように、LINEに判別結果が通知されます。
      

# 作ってみての感想
タブレット本体の写真を撮るだけで、機種名がわかるなんて・・！

Teachable Machineを知るまでは、画像分析ツールが自分で作成できるとは、夢にも思っていませんでした。感動:sob:

Node-REDも初めて使用しましたが、ノードの種類も豊富で使いやすく、今後、他ノードの利用もチャレンジしていきたいと思います！