売場のパン情報をスマホで簡単に見れるように！ #linebot

こんにちは、
地方のスーパーで製造部門の教育や指導をしているkuwaharaです。

前回のGWの報告はなんとか終わり落ち着いたのでまた記事を書きました！

現状の課題

私は週3回から4回、店舗を回り、パンの出来栄えの指導や売場レイアウト、計画の確認などをしています。
最近デジタルを少しずつ学びつつ思うことが...この仕事って資料作り以外、紙やパソコン持ち歩かなくてもスマートフォンやタブレットでどうにかなるのでは！？
というのもパソコンが軽ければ全然良いですが、私の持ち歩いているパソコンは前任の方から引き継いだものでとっっても重いです。

そこで試しにスマートフォンで売場にあるパンを撮って、情報やレシピなど確認出来れば？と思い作成してみました。

参考資料

使用ツール

今回は以下を使用します。
Node-RED

Node-REDは、ビジュアルなフロープログラミングツールで、IoTや自動化などのアプリケーションを開発するためのオープンソースのプロジェクトです。ノードと呼ばれる構成要素をつなぎ合わせてフローを作成し、データの処理や統合、制御を行います。Webブラウザ上でGUIで操作でき、JavaScriptやJSON、REST APIなどの技術と組み合わせて柔軟な機能拡張が可能です。

Teachable Machine

Teachable Machineは、Googleが提供するウェブベースの機械学習ツールで、ユーザーに機械学習の基礎を教えることを目的としています。ユーザーは、Webカメラやマイクを使って画像や音声を入力し、それらをカテゴリに分類するモデルをトレーニングできます。その後、トレーニングされたモデルを使って、リアルタイムで画像や音声を分類することが可能です。このツールは、教育やデモンストレーションのために広く利用されており、機械学習の概念を身近に感じさせることで、多くの人々が興味を持つきっかけとなっています。また、非常に使いやすいインターフェースを提供し、プログラミングの知識がなくても手軽に利用できます。

LINE bot　以前の記事で少し使用しました。

LINE Botは、LINEメッセージングプラットフォーム上で動作する自動チャットボットです。ユーザーとの対話を通じて、情報の提供、サービスの提供、タスクの自動化などを行います。開発者は、JavaScriptやPythonなどのプログラミング言語を使用してボットを開発し、LINE Messaging APIを介してLINEプラットフォームと連携させます。LINE Botは多くの用途に適用可能で、顧客サポート、情報提供、予約管理、ゲーム、エンターテイメントなど、さまざまな領域で活用されています。

作成してみます！！

①Teachable Machineを開き、画像プロジェクト、標準の画像を選択。
クラスは商品名を入力、ウェブカメラまたは100枚以上写真をアップロードします。
写真では指や背景などが映っていますが、前や後など沢山写真があれば良いと思います。

②アップロードが終了したら、トレーニングさせモデルをエクスポートします。
この画面は後ほど使用するので、残しておきます。

③NODEREDを開きます。お持ちの環境によって開き方が変わりますが、私はcodespaceで開いています。

全ての設置と方法を付けると長くなるのでポイントを書きます。
1　http in　ノード　URLは/を忘れないように
2　function ノード　以下のコードを記入

const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;
msg.messageID = messageID;
msg.replyToken = replyToken;
return msg;

3　http request　ノード　
URLには　https://api-data.line.me/v2/bot/message/{{{messageID}}}/content
トークンはLINE Developersでログインし自分のチャンネルトークンを入力。

4　Teachable Machine　ノード
URLにはTeachable MachineでエクスポートしたURLを入力。

5　function ノード
こちらにはTeachable Machineで選択されたものを表示させるコードを、選ばれた項目の栄養成分とアレルゲンを表示するコードを書き加えました。
分かりにくい所はchatGPTに聞くと良いと思います。こうしたいからコードお願い！って言えばちゃんと返してくれます。

// Teachable Machineからの出力
const className = msg.payload[0].class;

// アレルゲンと添加物の情報を手動で定義
let additives, allergens;

switch(className) {
    case "ツインクル":
        additives = ["熱量467kCal" ];
        allergens = ["小麦", "卵", "乳成分", "大豆"];
        break;
    case "カレーパン":
        additives = ["熱量275kCal"];
        allergens = ["卵", "乳成分", "小麦", "牛肉", "大豆", "豚肉", "ゼラチン"];
        break;
    case "メロンクロワッサン":
        additives = ["熱量341kCal"];
        allergens = ["小麦", "卵", "乳成分", "大豆"];
        break;
    default:
        additives = ["情報なし"];
        allergens = ["情報なし"];
        break;
}

msg.payload = {};
msg.payload.events = [
    {
        "type": "message",
        "replyToken": msg.replyToken,
        "message": {
            "type": "text",
            "text": `この商品は「${className}」\r\nになります。\r\n\n添加物: ${additives.join(', ')}\r\nアレルゲン: ${allergens.join(', ')}`
        }
    }
];
return msg;

6　reply　ノード　LINE Developersにログインし、シークレットキーとアクセストークンをコピーして貼ってください。

出来たもの！！

LINE botに写真を送り、画像を認識し商品名と熱量、アレルゲンを表示することが出来ました！急いでパパッと出来たものにしては上出来？かなと思います。

●やりたいこと

別枠でリッチメニューからJAN検索や実績確認、レシピも確認出来ると良いなと思いました！
最近、リッチメニューの作り方を教えてもらったので、メニューだけ作成！

自分たちが使うことの出来る万能なLINEbotが作成出来ると良いですね。

※もちろん、情報の取り扱いには十分しなければなりませんが。

今回は以上になります。
ご覧いただきありがとうございました。