オンライン研修だと笑顔や挨拶の指導が難しい…
みなさんこんにちは！今回も右も左もよくわからないプログラム初心者の採用担当が接客業の現場の問題をプログラミングで解決していきたいと思います。
私の通常業務は採用なのですが、毎年4月のこの時期だけは教育担当として新入社員オリエンテーションのお手伝いをさせていただいております。2020年からコロナのため、集合研修からオンライン研修へと変更になったのですが、そのせいで格段に難しくなったのが「笑顔」や「挨拶」の指導です。
あちこちにちらばる各拠点をZOOMでつないで研修をしているのですが、1か所に10名程度いるので、ビデオをチェックしても誰が誰なのかわからない状態です。だって、あの子もどの子もみんな同じようなスーツでみんな同じような髪型なんだもの…。こんな状況では、お辞儀の角度とか、背筋を伸ばしてねとか、笑顔を忘れないで！とか細かい指導ができません。「オンライン研修になってから、まともに挨拶できる新入社員が減ったわ…」という各店舗の教育担当のお姉さま方のお小言に「すみません、すみません…」と頭を下げるばかりでした。
毒舌マナー講師Bot作ってみた
そこで今回私が作ったのがこちらのLINE Botになります。
素敵な笑顔をLINEでパシャっと撮影して送ると、先生が「あなたはお陽さまみたいな素敵な笑顔をしているわね」と褒めてくれます。不機嫌な顔を送ると「あなたは死んだ魚の目をしているわね。」とけなしてくれます。
新入社員諸君には是非自宅にてこのLINE Botで笑顔の練習をしてきてほしいと思います。
毒舌マナー講師Botの作り方
1.用意するもの
LINE Deveropers
LINE Bot登録方法
https://zenn.dev/protoout/articles/16-line-bot-setup
Node-RED
Teachable Machine
ノリの良い同僚7～8名（多ければ多いほど良い）
2.参考にさせていただいたサイト
3.作成手順
3-1 Teachable Machineの設定
3-1-1 Teachable Machineでサンプルを取る。
まずは下記よりTeachable Machineのページに飛んでください。
https://teachablemachine.withgoogle.com/
get startedボタンを押して、image projectをクリックすると下記のような画面になります。
今回はclass1にお陽さまみたいな笑顔、class2に死んだ魚のような目と入力し、それぞれのデータを取っていきます。②ウェブカメラで撮影し、③トレーニングボタンを押しましょう。
一人のデータサンプルのみ取って、一人の笑顔にしか反応しないマシンを作ってもしょうがないので、今回7～８名のノリの良い同僚のみなさまにサンプルデータ取得にご協力いただきました。
たくさんの人に協力してもらう際は、いったんサンプルをダウンロードして、後から厳選写真をアップロードしたほうが判定精度が上がります。④の３つの・・・ボタンからサンプルのダウンロードができます。
連続して写真を撮影していると、笑っちゃいけないと思っているのに薄ら笑いを浮かべてしまう場合があります。ノイズを丁寧に取りのぞく地道な作業が必要です。
3-1-2 学習モデルをエクスポートして、URLをメモしておく。
トレーニングが終わったらエクスポートボタンを押すと学習モデルをエクスポートできます。
下記URLをしっかりメモしておきましょう。
3-2 LINE Botの設定
https://zenn.dev/protoout/articles/16-line-bot-setup を参考にしてご自身でLINE Botの作成をお願いいたします。
この後3-3でチャンネルシークレットとチャンネルアクセストークンの入力が必要か箇所がありますのでどこかに必ずメモをしておきましょう。
3-2-1 LINE BotのWebhookのURLを設定する。
LINE BotとNode-REDを接続します。
自分のNode-REDのURLをコピーして、末尾に/linebotと追記して下記のように張り付けします。
Node-REDのURLをコピーするときは.comまで。.comより後ろの英語やら数字やらは削除してください。末尾に/linebotとつけるのを忘れずに！
これでLINE側の設定は完了です。
3-3 Node-RED でフローを作成する
まずは全体のフロー図をお見せします。
3-3-1 teachable machine ノードとLINEのmessaging api ノードを追加する。
まず、右上のハンバーガーラインから「パレットの管理」をクリックします。
「ノードを追加」タブをクリックして、node-red-contrib-teachable-machineとnode-red-contrib-line-messaging-apiの二つを追加してください。
3-3-2 http in ノードを設定する。
まず最初にネットワークカテゴリにあるhttp inノードをドラッグ＆ドロップしてください。画像を見てオレンジ色の四角の箇所、2か所設定をします。
3-3-3 function ノードを設定する。
機能カテゴリにある function ノードをドラッグ&ドロップします。
こちらのノードの設定は下記の記事の3-4にコードが貼ってありますので、リンクから飛んでご参照ください。
3-3-4 http request ノードを設定する。
続いてネットワークカテゴリにある http request ノードをドラッグ&ドロップします。設定は下記の図の通りです。
URLコピー用 https://api-data.line.me/v2/bot/message/{{{messageID}}}/content
3-3-5 teachable machine ノードを設定する。
続いてteachable machine ノードをドラッグ＆ドロップして下記の通り設定ください。
3-3-6 function ノードの設定
機能カテゴリにあるファンクションノードをドロップ＆ドラッグしてください。
こちらのノードもコードの設定が必要となります。
下記リンクに飛んでいただき、3-9をご参照ください。
テキスト部分はご自身の好きな文言に変更しましょう。
3-3-7 LINEのreplay messageの設定
ここまで来たらあともう少しです…！LINEのreplay messageノードをドラッグ＆ドロップして下記の通り設定ください。
最後に順番にワイヤーでつなぎましょう。
フィードバックと最後に
これで毒舌マナー講師ロボットの完成です。ちゃんと動くか動作確認してみてください。
できあがってから何名かと一緒に作動を確認してみたのですが……
抜群の笑顔をしたつもりなのに、死んだ魚の目判定される
顔の角度で微妙なことになる
という残念なお声をいただきました。
調べてみたのですが、とあるサイトに撮影時の背景は「白い壁」推奨です。と書いてありました。今回会社の自席で何にも考えずにみんなとキャッキャしながら軽く撮影しただけだったので、このような結果となってしまったのでしょう。
多分実用化するならものすごい量のサンプルが本当は必要なんじゃない？
というお声もいただき、その通りだなと思いました。
毒舌マナー講師が独り立ちするのはまだまだ早そうです……。
最後に一番大事なことを言っておきます。
心の底からの「ありがとうございます！」が出たときの笑顔にかなうもの無し！
これ、真理!!