LoginSignup
4
1
@tezukar9inプロトアウトスタジオ

【Teachable Machine】使用できる商品券かどうかをLINE Botで回答できるようにしてみた

Last updated at Posted at 2024-08-27

みなさん、お久しぶりです！
IT未経験のデジタル成長記録Vol.4です:fist_tone1:
今回はML（機械学習）のTeachable Machineで、使用できる商品券を教えてくれるLINE Bot作りに挑戦してみました！

この問い合わせ回答、無駄じゃない？

私は商業施設で主にテナント管理を行っています。
日常業務でテナント従業員さんからかなりの頻度いただく問い合わせ1位が

『この商品券初めて見たんですが、うちで使えますか？』 です…:sob:

電話で問い合わせをいただいて、その商品券の特徴を聞いて…
お客さまが目の前で待っている中でこのやり取りをするのってかなり無駄だなというのが率直な意見…。

今までは無駄だなと思っていても自分でどうにかできる範囲ではないとあきらめていましたが、先日Teachable Machineなるものを知り！

これはこの課題を解決するのにちょうどいいのでは！？となり、今回のLINE Bot作成にいたりました:point_up_tone1:

Teachable Machineってなに？

みなさん、Machine Learning（機械学習）という単語を聞いたことはあるでしょうか？

Machine Learning（機械学習）とは？

データを分析する方法の１つで、データから、「機械」（コンピューター）が自動で「学習」し、データの背景にあるルールやパターンを発見する方法。 近年では、学習した成果に基づいて「予測・判断」することが重視されるようになった。

Teachable Machineはまさに、ML（機械学習）の無料サービスなのです！
現在のTeachable Machineでは、画像・音声・ポーズの3プロジェクトが選択でき、それぞれモデルをアップロード＋ラベルを付けるだけで機械学習モデルを作成することができます！

image.png

今回の使用ツール

1⃣ Teachable Machineでプロジェクトを作る！

  1. Teachable Machineへアクセスし、Get Started　をクリック

  2. 今回は、Image Projectを選択します
    image.png

  3. 続いてStandard image modelを選択します
    image.png

  4. Class1…となっている箇所は登録する写真のグループ名を入力します。
    今回は商品券を使用可能・一部店舗で使用可能・使用可能（釣り有）・使用不可の4グループに分けて登録していきます
    ※グループの追加をしたい場合はAdd a classを選択してください
    image.png

  5. 続いて写真の登録ですが、今回はデバイスに追加されている写真をアップロードしたいので、Uploadを選択します
    ※その場で写真を撮る場合はWebcamを選択してください
    image.png

  6. 写真の登録がすべて完了したら、Train modelをクリックします
    すると、Previewのところに判定結果が出てくるようになります！
    問題なければExport modelをクリックします
    image.png

  7. Upload my modelを選択し、その後出力されるYour sharable linkをあとで使用するので、コピーしておきます
    image.png

ここまででひとまずTeachable Machineの設定は終了です！
続いてLINE Botの土台づくりをしていきましょう:point_right_tone1:

2⃣ LINE Botの土台をつくる！

LINE BotはLINE Developersから簡単に作成できます！

  1. サイトへアクセスし、右上の コンソールにログインをクリックし、自分のLINEアカウントでログインしてください
  2. プロバイダーの作成をクリックし、お好みのプロバイダー名を入力します
  3. 今回はBotを作成するのでMessaging APIを選択します
    image.png
  4. その後の画面でチャネル名や業種などの必要事項を入力したあと、各種利用規約のチェックボックスにチェックを入れ、作成を選択します

これでBotの土台は完成です！
あとで使用しますので、チャネルシークレットとチャネルアクセストークンを取得してコピーしておきましょう！

チャネルシークレットとチャネルアクセストークンの取得方法はコチラから

この2つのコードを取得するにはチャネル基本設定とMasseging API設定を見ます
image.png

★チャネルシークレットはチャネル基本設定を下までスクロールするとあります！
image.png

★チャネルアクセストークンはMasseging API設定で下までスクロールするとあります！
　最初は発行されていない状態かと思いますので、発行を選択してコードを発行しましょう
image.png

3⃣ Node-REDの設定をする！

今回は enebularというサイトから、Node-REDというツールを使用して連携していきます。

フローの完成図はこんな感じです！
image.png

  1. enebularにアクセスし、サインインします
    会員登録が済んでいない方は会員登録を済ませてから次に進みましょう！
    1.右上のプロジェクトの作成を選択し、プロジェクト名を設定します
    image.png
  2. 設定が完了すると先ほどの画面にプロジェクトが追加されているかと思いますので、追加したプロジェクトを選択してください
  3. 選択すると英語のフローが並んでいるかと思いますが無視して、右下の＋ボタンをクリックします
  4. アセットの作成というタブが開くのでそのまま作成へ進み、アセットが追加された先ほどの画面に戻りますので、作成したアセットをクリックし右上の編集を選択します
    image.png
  5. ノードを追加、繋げていきます
追加したいノードがない！？そんなときはコチラ🌟
  1. 右上のメニューバーを開き、パレットの管理をクリック
    image.png
    2.ノードを追加を選択し、検索バーで欲しいノードを検索して追加します
    image.png

🌟今回使うノード🌟　
　・Teachable Machine : node-red-contrib-teachable-machine
　・LINE : node-red-contrib-line-messaging-api

　

① http in
・メソッド：POST
・ファイルのアップロードにチェック
・URL：/好きな文字列　（今回はwebhookにしています）
image.png

② http response
・ステータスコード：200を入力
image.png

③ function

image.png

下記コードをコピペします

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
・メソッド：GET
・URL：https://api-data.line.me/v2/bot/message/{{{messageID}}}/content
・ペイロード：無視
・認証を使用にチェック
・種別：Bearer認証
・トークン：2⃣ の工程でコピーしておいたチャネルアクセストークンを入力
・出力形式：バイナリバッファ

image.png

⑤ teachable machine
・Mode：Online
・URI：1⃣ でコピーしておいたTeachable MachineのYour sharable linkを入力
・Output：Best prediction
・Imageにチェック
image.png

⑥ function

image.png

下記コードをコピペします


const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
     {
 "type": "message",
 "replyToken": msg.replyToken,
 "message": {
     "type": "text",
     "text": `この画像は「${className}」\r\nになります`
    }
  }
];
return msg;

⑦ Reply ※配置するとReply Messageに変わります
・Secret：２⃣ でコピーしておいたチャネルシークレットを入力
・Access Token：２⃣ でコピーしておいたチャネルアクセストークンを入力

image.png

⑧ すべての入力が完了したら右上のデプロイをクリックし、その横のインフォメーションボタンからリンクをコピーしておきます
image.png

ノードの詳細を編集するには？

編集したいノードをダブルクリックすると右側に表示されます！

4⃣ LINEと繋げる！

LINE DevelopersのMessaging API設定からWebhook設定を開き、3⃣ の工程の最後にコピーしておいたリンクに３⃣-5-①で設定した/好きな文字列を付け足して貼り付けます！

注意

・Webhookの利用にチェックが入っているか確認！
・リンク貼り付け後検証をクリック、成功と出るか確認！
image.png

最後に

完成してから職場の先輩に使ってみてもらったところ大絶賛！
ただし、実際に現場へ導入できるかどうかは別問題…
とても便利な反面、間違った判定結果が出てしまった時のリスクが怖いとのフィードバックをいただきました:sob:
（でもごもっともなフィードバック、もっと精度を上げて実際に導入できるように頑張ります！:thumbsup_tone1:）

今回のLINE bot作りはこちらの記事を参考にさせていただきました!!

  • 2024.09.01改善内容_商品券名の表示がされるようにする

このBotを見てくださった方より、「商品券名が分かるとその判定が正しいか間違っているのか人の目でも確認できるので良いのでは？」とのご意見を頂き内容修正しました！

結論として変更する場所は、Teachable Machineのクラス名のみ！
クラス名に「○○商品券で使用可能」「○○商品券で使用不可」と記載しておけば、上記の設定方法のまま商品券名+使用可否が分かります(^_-)

ぜひご参考ください！

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
1