LINEDCAdvent Calendar 2024

プロトアウトスタジオ

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

Last updated at 2024-12-24Posted at 2024-12-24

LINEDC Advent Calendar 2024 25日目です！

この記事は初心者・初登壇Welcome！LINEを使ったLT大会 #10でLTさせていただいた内容の記事です。

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

球団顔とは？

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

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

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

学習させる写真のダウンロード

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

Google Chromeの拡張機能で画像を一括ダウンロードすることが可能です。
Image downloaderはページ内の画像をまとめて取得したい時に便利です。

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

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

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

Teachable Machineとは

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

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

「標準の画像モデル」を選択します。

ドラッグ＆ドロップもしくは、Googleドライブから画像をインポートします。

12球団の写真データをいれました。このあとトレーニングします。

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

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

球団顔判定の元は出来ました。

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

Teachable MachineをLINEで動かす

enebularを使う

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

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

では作り方です。

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

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

nodeを追加していきます。

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

２つめのノード：function１

コードはコチラになります。

コードはこちら

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

URLは

入力値

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を設定します。

５つめのノード：function2

コード

const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
    {
        "type": "message",
        "replyToken": msg.replyToken,
        "message": {
            "type": "text",
            "text": `この方は「${className}」顔です`
        }
    }
];
return msg;