ガキ使の「〇〇、アウト！」の声を聞けなきゃ年は越せない
2020年もあっという間に2/3が過ぎ、残り4ヶ月ですね。たぶん、あっという間に年末になります。
で、年末と言えば、やっぱり恒例の「ガキ使の笑ってはいけない」ですね。「〇〇、アウト」の声がないと、年は越せません。
でも、あれ、実は自分もやってみたいなー、なんてことはないですかね？
自分のテレビ越しで参加できたら。。
という願いを叶えるために、テレビを見ながら「1人笑ってはいけない」が体感できるアプリを作ってみました。
作ったもの
ひとまずご覧ください。
１人で「笑ってはいけない」ゲームができるウェブアプリを作りました。ゲーム中は、自分の顔がカメラ内に入るようにしておくと、笑ったときにおなじみの音が流れます！笑#protoout #笑ってはいけない pic.twitter.com/pXOgrk8JI3
— 柳瀬浩之@人材開発×UX専門家 (@btap_hiro) September 2, 2020
このアプリを起動して、自分の顔がカメラ内に収まってる状態にしておくと、笑ってしまった時に、例の音が流れます。「・・・アウト！」まで実装できると尚よかったですが、一旦はよしとします。
１点注意点としては、部屋が暗めのところでやると、うまく反応しません。部屋が明るいところでご使用ください。
アプリはこちら
笑顔を機械学習で読み込ませる方法
googleのteachableMachineを使いました。私でも使えるので、とっても便利です。
ネットで「笑顔の写真」と「真面目な顔の写真」を約30-40枚集めました。で、これだけだと枚数が少ないかなと思ったので、自分の笑顔の写真、笑ってない写真も20枚ずつ程度入れて読み込ませました。
そうすると、まだ反応が弱いところがありますが、なんとか作ることができました。
コードシェア
コードはこちらをご覧ください。
難しかったところ
①笑顔が検出されると、音楽を鳴らす
同じスクール同期の@twtjudy1128 さんのこちらを参考にさせていただきました。
ありがとうございます。
②笑顔が検出されると、文字で「アウト！」と表示する
これをVue.jsで実装しようと思ったのですが、うまくいきませんでした。
エラーコードは以下
<div id="app">
{{ message }}
</div>
classifier.classify(onDetect);
function onDetect(err, results) {
if (results[0]) {
console.log(results[0].label);
}
classifier.classify(onDetect);
if (results[0].label === 'ニコニコ') {
const app = new Vue({
el: '#app',
data: {
message: 'アウト！',
},
});
}
}
ひとまずこれだと表示されないのはわかりました。が、なぜダメなのかはいまいちわかりません。
（更新）
単純に、Vue.jsを読み込む時に必要な以下のコードが抜けていました。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
これを追記したら、笑顔が認識された時に、アウトと表示させることができました。gistのコードの方も修正いたしました。
しかし、スクールの先生に伺ったところ、通常こういう書き方はしないとのこと。
if (results[0].label === 'ニコニコ') {
const app = new Vue({
el: '#app',
data: {
message: 'アウト！',
},
});
}
また修正方法を考えます。
このアプリをつくった意図
今回、スクールで、ml5.jsとteachableMachineを学びました。最終的には、オンライン会議やオンライン研修の動画から、音声、表情、動きなど、様々な情報を取得して、瞬時に会議や研修の分析ができるようなものを作ることを目指しています。
その一環として、まず表情を読み取って反応するものを作ってみようと思って、ひとまず笑顔の画像分析ができるものをつくってみました。その後に、「笑顔という情報が取得できる」ところから何ができるか？と考えた時に、年末の「笑ってはいけない」を思い出して、それを作ってみようと思いました。