拡張機能研究所

おすすめのブラウザ拡張機能をマンガ形式で紹介!

2025/08/05 18:00

ちょっと未来っぽい?Tony Stark風のAIアシスタントを自作してみた話

MediapipeやThree.jsを使って、自分だけのJarvisっぽいコンピュータビジョン技術に挑戦した体験をゆるっと紹介します。 簡単そうで意外と奥が深い感じ、わかるかも? 🌸

なんとなく「アイアンマンのあのAI、Jarvisってすごいなあ」って思ったこと、あるよね?💭わたしもそんなふうに自分のパソコンが反応してくれたら便利だな~ってずっとぼんやり考えてて…ついにちょっとだけチャレンジしてみたんだ✨

今回は「コンピュータビジョン」っていう技術を使って、手の動きでパソコンとコミュニケーションする仕組みを作ってみたよ。あのTony Starkが使ってる感じ、ちょっとだけ真似できたかも?って気がして嬉しい🥺


Mediapipeって何?Three.jsって何?って感じだよね👀

正直、わたしも最初は「なんじゃそれ?」だった。

  • Mediapipeは、Googleが作った手や顔の動きを検出するライブラリ。
  • Three.jsは、ウェブ上で3Dのグラフィックを表示するためのツール。

これを組み合わせることで、Webカメラの映像を使って「手の形や動き」をリアルタイムで認識して、それに合わせて画面の3Dオブジェクトが動くっていう仕組みになるんだ✨

たとえば、手をグーにすると画面のボタンが光るとか、指を差すとメニューが開くとかね🫶


やってみて気づいたこと3つ👩‍💻

  1. 思ったより反応がリアルタイムで感動した!
    手の動きをカメラがちゃんと認識してくれると、まるで映画の中にいる気分だった😆

  2. でも動きが複雑になるとエラーも増える…
    ジャスチャーが少しでもずれると認識がうまくいかなくて、そこはまだまだ人間の手の動きって繊細なんだなって感じた💭

  3. プログラムを書くのは難しいけど楽しい!
    最初はコードの意味がわからなくて戸惑ったけど、ひとつずつ試すのがゲームみたいでハマっちゃった🎀


作ってよかったなって思うこと💡

こういう技術って専門的で難しそうだけど、身近なツールで体験できるのがいいところだなって思った。
自分の手の動きが画面に反映されるだけでも、なんだか新しい世界に入ったみたいでワクワクする✨

思わず「もっとこうしたら便利かも!」ってアイデアがどんどん浮かんでくるのも楽しいポイントだったよ🥳


まとめると…

  • MediapipeとThree.jsで簡単に「Tony Stark風」手の動き認識ができる
  • 反応は思ったよりリアルだけど、まだまだ完璧じゃない部分もある
  • プログラミング初心者でもトライできる楽しさがある

もし興味あったら、ちょっとだけコードを触ってみるのもありかも?自分だけのJarvisを作る一歩になるかもしれないよ🧠✨


興味がわいたら、ぜひリンクのGIFも見てみて!実際の動きがわかるとイメージしやすいからおすすめだよ👀💗
https://i.redd.it/z7utza8ldlgf1.gif


コメント

アバター

エイダン

毎週土曜、新作を見るのが楽しみです。

アバター

キンバリー

これはmediapipeとthreejsで作った最近のコンピュータビジョンの作品集です。 全部ブラウザでリアルタイムに無料体験できて、Chromeデスクトップだと特に快適です。 コードと解説は10ドルで永遠にアクセス可能です。 質問あればどうぞ!

アバター

ロバート

すごく良いですね! 使ってる機材は何ですか? ノートパソコンのカメラだけ?


関連記事