Teachable MachineとLINEで球団顔判定！あなたはどの球団顔？

[LINEDC Advent Calendar 2024](https://qiita.com/advent-calendar/2024/linedc) 25日目です！

この記事は[初心者・初登壇Welcome！LINEを使ったLT大会 #10](https://linedevelopercommunity.connpass.com/event/333879/)でLTさせていただいた内容の記事です。


<iframe width="560" height="315" src="https://www.youtube.com/embed/cfcrdIRKNeA?si=FHJmTBeoz8EgaD45" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

発表内容を切り出ししてくださっているので、よかったらご覧ください。

## 球団顔とは？
そもそも、「球団顔」とかいう正式な言葉はありません！
完全に造語ですが、これから流行るかもしれないので今のうちに商標登録したいと思います！

野球界隈では、ドラフト会議やFAなど、どの選手がどの球団に行くのかワイワイしてます。
戦力的にや、その選手を分析してと、とてもとても深く考える人もいますが、「この人は○○顔やから○○じゃない？」とか、「うちの（自分がファンの球団）顔ちゃうからなあ」とか好き勝手話したりします。

せっかくなので球団顔判定Botを作ろうと思いした！
自分の顔もどの球団顔か調べられるようにもできちゃいます。

## 学習させる写真のダウンロード
12球団の選手と監督たちの顔写真をダウンロードするところからはじめなくてはいけません。
ひとりひとりの写真を右クリックして保存していると日が暮れるというか、右手が逝ってしまう。

Google Chromeの拡張機能で画像を一括ダウンロードすることが可能です。
[Image downloader](https://chromewebstore.google.com/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja)はページ内の画像をまとめて取得したい時に便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/d058b8a3-66b3-2564-6fb5-8c560ad08d37.png)

「Chromeに追加」をクリックしてインストールします。
画像をダウンロードしたいWEBページを開いて、拡張機能のアイコンをクリックするとページ内の画像をすべて拾ってくれるので、必要な写真をチェツクして保存します。
この時にフォルダを指定や新規作成できるのでとても便利です。

私は球団毎にダウンロードしてたので、フォルダ別に保存していました。


## Teachable Macineに12球団選手とコーチ・監督の顔を学習させる

### Teachable Machineとは
[Teachable Machine](https://teachablemachine.withgoogle.com/train)とはGoogleが提供している無料の機械学習サービスです。プログラミングや深い機械学習の知識がなくても、独自の機械学習モデルを作成し、画像、音声、ポーズなどを分類できます。
WEBだけで完結できること、プログラミングスキルもいらない非エンジニアの味方です！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/88a4392f-c265-fb13-cf0f-a88bbee098dc.png" width=60%>

今回は選手の顔を学習させるので、画像プロジェクトを使用します。

「標準の画像モデル」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/de91545c-946c-bcfb-dc73-8dc7dca25c6f.png" width=50%>

ドラッグ＆ドロップもしくは、Googleドライブから画像をインポートします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/b9e1fa1c-10d8-3a1a-3774-51bc9e8a9862.png" width=60%>

12球団の写真データをいれました。このあとトレーニングします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/5f0f46c1-9d08-cf4f-ade9-f0354e6b67e3.png" width=80%>

「モデルをトレーニング」をクリックすると、Teachable Machineでトレーニングがはじまります。
終わるまでは静かに見守ります。

カメラをオンにすると、写った人がどの球団顔か判定します。
私はちなヤクなのに、何度してもベイスターズにしかなりません・・・無念。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/616ba4a6-05aa-c263-81f1-f4226cc55dbc.png" width=60%>
球団顔判定の元は出来ました。

次は、Teachable MachineをLINEに表示する設定をします。


## Teachable MachineをLINEで動かす

### enebularを使う

[enebular(エネブラー)](https://www.enebular.com/ja/)は、IoT製品・サービスづくりを包括的に支援する開発・運用サービスです。何もインストールする必要がないので、とても便利なサービスです。

完成したものはコチラです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/e2bb5aa5-8e45-bace-5a05-4aafb9b7f1df.png" width=100%>

では作り方です。

### 1.パッケージをインストール

line-messaging-api-reply　と node-red-contrib-teachable-machine　パッケージをインストールします。

nodeを追加していきます。

#### ひとつめのノード：post/webhook

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/0d01bef3-8bf9-9f31-c3c9-11a7deae7203.png" width=50%>

#### ２つめのノード：function１
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/66695c0f-6cef-c260-23bc-2e6409ecde14.png" width="70%">

コードはコチラになります。
```ruby:コードはこちら
const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;
msg.messageID = messageID;
msg.replyToken = replyToken;
return msg;
```
#### ３つめのノード：http request
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/f022a87a-0ff5-3b13-96e5-62a34787ab44.png" width=50%>

URLは
```ruby:入力値
https://api-data.line.me/v2/bot/message/{{{messageID}}}/content
```
{{{messageID}}}　"{{{" は３つ必要のようです。

こちらも参考にしました。
https://developers.line.biz/ja/reference/messaging-api/#getting-content


トークンには、LINE Developersのチャネルアクセストークンを設定します。
「Messaging API設定」→「チャネルアクセストークン」を入力（コピぺ）します。

#### ４つめのノード：teachable machine

学習させたTeachable Machineのurlを設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/8c9c85cc-a5d4-25b4-fbdf-a80d67d33958.png" width=50%>

#### ５つめのノード：function2
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/4ab7c312-7f5c-2a1b-7121-95f62c4b2c5e.png" width=70%>

```ruby:コード
const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
    {
        "type": "message",
        "replyToken": msg.replyToken,
        "message": {
            "type": "text",
            "text": `この方は「${className}」顔です`
        }
    }
];
return msg;
```
#### ５つめのノード：Reply

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/e12739e3-66dd-96e6-f940-dd3cfa3e4b5e.png" width=70%>

Nameは分かりやすい名前を設定します。

Secre：LINE Developersのチャネルシークレット（チャネル設定）
AccessToken：LINE Developersのチャネルアクセストークン（Messaging API設定）

を入力します。

## LINE設定
LINEの設定をします。

DevelopersのMessaging API設定の「Webhook設定」に入力します。
この値は、enebularのnode pathのURLを貼り付けます。
enebularのpathはインフォメーションアイコンをクリックすると表示されます。

※enebularはURLに4時間の制限があります。4時間後に別のURLとなりますので、続けて使用する場合は、4時間ごとにwebhookを変更してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/77e142b7-daae-58cc-469b-3a237ebc0df8.png" width=70%>


URLの後に/webhook　と入力てください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/4c0fa34a-70aa-655d-8f99-2b720c2acd98.png" width=70%>


## 完成

球団顔Bot完成しました！

https://x.com/n0rimaki_san/status/1871022171495297180

誰もこの通りではないので、顔で判定は適当だなぁと当たり前ながら思いますが、ネタ的にはおもしろいかもしれません。

自分の写真を撮影して遊ぶことも可能です。

ただ、今回enebularを使用しているので、みなさんに遊んでいただけるQRコードなどお渡しできないのですが、出来るようになれば公開したいと思います！