小売業会社員の奮闘録　LineBotにで画像判定させる

**みなさんこんにちは、こんばんは、はたまたおはようございます。**

前回の記事ではまずはLineBotを使って電話帳を作ってみました。

https://qiita.com/Gujin0109/items/fa8cd47b162b8eb8e8d6


働いていると紙媒体によるチェック用紙等も多いので、
何か一つでも紙媒体からデジタルに変更できなをいのかな？と思いたった次第です…。
今回はTeachableMachineを使って ~~鍵のチェック~~ 鍵が全種類揃っているか判定させてみました。
（鍵のチェックリスト）
ざっくりですが、こんな感じです。
![表.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/315cead8-a3c5-32d3-5304-bf196c7ee3c6.png)

そして、node-redでノードを使いLINEで画像を送って判定の返事を返すものを作ってみました。
本当はここからスプレッドシートに返してチェックできる！！！
まで作れれば良かったのですが、自分の知識ではここが限界でした…。
もっと知識があれば作れるのかも！？と夢を見ながら…（遠い目


ということで・・・中身の感じはこんな感じです！！
**どんっ！！**
![no-dered all.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/0030114c-eb95-3a0b-8101-3627928d26c4.png)

一つ一つ解説していきます。（左から）

## webhook ##
![no-doredwebhook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/6291b4a3-7d84-9e4e-4754-fd83fa62529e.png)
ここはPathに/webhookと入力して、Nameにはwebhookと入力しました。

## 左のtemplate ##
![tenpure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/0afca5a5-0226-013c-713a-c60bb1e9a108.png)
ここでは、LINEの中のeventからmessageをとってくるので
{{line.event.message.id}}と入力してみました。

## 次はhttp request ##
![http.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/d2935bba-ac8d-81c1-d41d-c07070fb5849.png)
URLの部分は下記を入力しました
`https://api-data.line.me/v2/bot/message/{{{line.event.message.id}}}/content`
{{{}}}の中には先ほどのtemplateの中身をコピペ！

:::note alert
ここでよくしくじってたのは手入力でするとスペルミス等をしてしまうので、コピペおススメです。
:::

![http2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/69d6e594-3bc8-4896-f001-d7fe8672c7e1.png)

**※１**
ここの認証にチェック！！
この認証をチェックしていないと種別、トークンの入力ができないので忘れずに。
**※２**
Bearer認証を選択しトークンにはLINEのアクセストークンをコピペで入力です。
**※３**
出力形式バイナリバッファを選択します。
（最初見た時何かの呪文かと思ったのは心の声としておきますｗ）

## TeachableMachine ##
中身はこんな感じで鍵のチェックの判定です。
（鍵が写っているので黒線で消してあります。）
![teacblenakami.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/fca7831e-9e91-6361-0f2e-9b7a99212da9.png)

node-redのTeachableMachineの中身はこんな感じです。
![teachble.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/38814295-c891-68e1-ed3b-ffd74aa2d1ee.png)

先ほどのTeachableMachinenのエクスポートしたURLをここにコピペ！！

## 右のtemplate ##
![payload.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/fbe131d1-aeb4-8bff-0158-ae57d30996ef.png)

:::note alert
ここで注意はpayload.0.classのスペルと
一旦全消しをしてスペース等入ってないかの確認です。
スペースとスペルミスで何が違うの！？って沼ってしまいました・・・。
スペルの思い込み、そして目には見えないスペースこいつやっかいです。
:::

## LINE ReplyMessage ##
![linereply.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3539432/ac090b20-f596-779e-bba1-f1f9707ea8c9.png)

最後のノードです。
Nameはなんでもいいです。
今回はLINEに返すと入力しましたが特に意味はないです。
Secretの部分はLINEのチャネルシークレットをコピペ！！
AccessTokenは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://twitter.com/hashtag/%E3%81%B6%E3%81%A3%E3%81%8D%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#ぶっきー</a> <a href="https://twitter.com/hashtag/%E5%88%A4%E5%AE%9A?src=hash&amp;ref_src=twsrc%5Etfw">#判定</a> <a href="https://t.co/FIwlUecfcE">pic.twitter.com/FIwlUecfcE</a></p>&mdash; ぐーじん (@Gujin_75qq5q) <a href="https://twitter.com/Gujin_75qq5q/status/1710349448608677892?ref_src=twsrc%5Etfw">October 6, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらも鍵が写っているのでモザイク処理で申し訳ありません。
一応どんな鍵があるかとか鍵の形が出てはあまりよくないなと思いましたので・・・。

## 最後に・・・ ##
まずここまで読んでくださりありがとうございました！
まだまだ色々な知識を取得途中ですが、最終的には個人的に作りたいものを作れればなと思います。
ここまでくるのに、サーバーから切断され、サーバーからまた切断され・・・
サーバーから切断されまくりました・・・。
やっとつながった！！とその時に動画は撮りました。
まだまだこんなのでは仕事で改善できるような何か作れませんが、
これから精進したいと思います！！

今回作るのに参考にした記事はこちらです
[参考記事](https://qiita.com/h21550/items/3674caeb7531183021be)