LoginSignup
8
4

子供のご飯タイムを快適にしよう!Teachable Machineを使って剣で斬られるWebアプリを実装!

Last updated at Posted at 2023-06-05

ご飯を集中して食べて欲しい

年長の娘はご飯中によく立ち歩きます。。
なにか理由をつけて席を立ち、おもちゃで遊んだりダンスを踊ってみたりと大忙しいです。ご飯を集中して食べて欲しいので注意したり、娘がどんなに面白いことをしても笑わないでいてみたりと色々とやっていますが、食べるのに時間がかかります・・・:expressionless:
そんな娘に座っていると剣で斬られるアプリ「スタンドカットちゃん」を試してみました:thumbsup_tone2:
ONE PIACEにハマっているため、効果音は剣で斬られる音に決定しました。一番ウケが良かったです!

使ってみると

本当は娘で紹介したかったのですが、使える動画が撮れず断念しました。
初めはカメラが気になって席に座りましたが、斬られる音が楽しくて立ったり座ったりと遊んでしまいました。ただ我が家では席を立つと剣で斬られるということは浸透したため、席を立つことを躊躇するようにはなりました。ちょっとは効果があったと思っています:joy:

実装環境

Code Pen
ml5.js
Teachable Machine
Netlify

実装の解説

こちらの記事を参考にしました。(子供と銃で撃たれて楽しみました:grin:

①Teachable Machineで機械学習

以下の記事に登録方法が丁寧に解説されています

今回は画像プロジェクトで「座る」「立つ」の2パターンを学習させました。
最低でも100枚以上は学習させた方がいいそうです。

スクリーンショット 2023-06-03 14.20.25.png

共有可能なリンクはこちらに貼ります。
スクリーンショット 2023-06-06 6.16.28.png

②効果音をダウンロードして設定

効果音は以下の効果音ラボからダウンロードしました。
https://soundeffect-lab.info/sound/battle/battle2.html

ダウンロードした音声ファイルは、Code PenでExpoetした後にdistの直下に設定します。
Code Penでは音が試せません。
Webで開くと動作を確認できます。
スクリーンショット 2023-06-06 6.07.56.png

音声は以下の部分に指定しています。
スクリーンショット 2023-06-06 6.05.26.png

Code Pen

See the Pen 座って食べよう! by yuko6891 (@YukoOnuma) on CodePen.

最後に

TeachableMachineは、初めて触った私でも簡単に登録することができました。
Qiitaに投稿されている方の記事をコピーして、①と②を変更するだけで簡単に実装できます。
Qiita素晴らしい!ぜひ試してみてください!

8
4
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
8
4