Webの技術とガジェットで子どもも大人も楽しめるワクワク体験を提供する / Qiita Tech Festa Day 2026

Transcript

1. Webの技術とガジェットで 子どもも大人も楽しめるワクワク体験を提供する 豊田陽介（@youtoy ） 2026年7月25日 (土) Qiita Tech Festa Day 2026 (テーマ： 今、あなたが語りたい技術の話)
2. 自己紹介 豊田陽介（ @youtoy ） プライベートでの活動 ▶ IT系コミュニティ主催、 イベント登壇や運営なども ▶ M5StackでIoT、AI・機械 学習の書籍を共著・単著で ▶ メーカーフェアやNT◦◦ （各地）等への出展も頻繁に 好きな技術など Qiita X ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript
3. インタラクティブな体験型のWebアプリをよく開発 HTMLファイル 1つで実装した Webアプリ（わりと最近） ⇒ MediaPipe（JS版）＋ WebGL のシェーダー
4. インタラクティブな体験型のWebアプリをよく開発 HTMLファイル 1つで実装した Webアプリ（わりと最近）
5. インタラクティブな体験型のWebアプリをよく開発 HTMLファイル 1つで実装した Webアプリ（4年前くらい） ⇒ MediaPipe（JS版）＋ p5.js（2D描画ライブラリ）
6. 展示イベントに出展したり SNS で動画で共有したりで 楽しんでもらっています
7. 展示イベントで体験いただいている時の様子 大人の方々 にも 子ども達 にも
8. オンラインでは言語の壁や 距離を超えて楽しんでもらえる
9. Xの投稿に日本語・英語以外の引用コメントも 動画をポストした時の事例
10. 内容わからないので機械翻訳で言語の識別と翻訳
11. ガジェットをWebの技術で 扱う体験型の作品も色々
12. 2020年のメーカーフェア（＠つくば／東京）で展示 HTMLファイル 1つで実装した Webアプリ（6年前くらい） ⇒ Teachable Machine ＋ Web Bluetooth API
13. SNSでの反応や作品を体験してもらっての反応 大人の方々による SNSでのコメント たくさんの子ども達がワイワイと
14. 100均のアイテムも入力デバイスにしてみたり HTMLファイル 1つで実装した Webアプリ ⇒ p5.js・p5.sound など ＋ Web Bluetooth API
15. 未就学児の子から大人まで 幅広い年代の方が 楽しめる体験を作る
16. 自分が作るインタラクティブな体験型展示の構成 人による何かの入力に反応して、何かの出力が返る 不思議な／綺麗な ビジュアル表現 人の動き デバイスや日用品 などの操作 何かの音・声 ブラウザで動く 様々な処理 動く 光る 音が鳴る さらに「何をすれば良いか」「何が起こるか」が 分かりやすいものにする
17. 面白そうな入力デバイスを 取り入れてはWeb技術とつなげる
18. イベントで自分が展示した作品の他の例 サオコン・太鼓の達人用コントローラー・100均の空気ポンプを 使った体験型展示（※ これもブラウザで動く Webアプリ）
19. 展示作品を楽しんでくれている時の様子（写真） 未就学の子から小学生の高学年くらいの子までと、幅広い 年齢層の子達に楽しんでもらえました
20. 展示作品を楽しんでくれている時の様子（写真）
21. 利用している主な技術（ブラウザのAPIなど） ・太鼓の達人用コントローラー、サオコン ・Gamepad API ・100均の空気ポンプ ・Web Audio API（のライブラリ） ・主に描画まわりの実装の部分 ・p5.js ・カスタムシェーダー （WebGL 2.0 での GLSL ES 3.0）
22. 日本各地のモノづくり系イベントに 出展して様々な方に体験してもらう
23. 今年3月から出展したイベントをマッピングしてみた 7/18： DIYデジタルガジェット で遊ぼ ４ in 那須 6/28： NT金沢 3/1： NT広島 5/4： NT函館 3/7： NT松戸 6/12： Interop Tokyo 2026 5/10： つくろがや！4
24. 余談：広島で展示をした時の様子が新聞社のWeb記事に ▶ 今年3月の「NT広島（モノづくり系イベント）」での体験型作品展示 取材中の様子
25. 子どもがワクワク楽しめて 学びの体験ができる企画の 依頼をもらうことも
26. 埼玉の保育園さんから毎年依頼をもらっている案件 メインは「科学実験ショー ＋ 科学実験体験」の依頼 担当の方と企画を検討し、 それに加えて、ガジェット や各種技術を使ったショー ＋ 不思議体験の時間 （＋ マジック・バルーン アートショーも加えて 盛りだくさんに）
27. これからも技術とガジェットを 活用して、子どもも大人も楽しめる ワクワク体験を作っていきます！
28. 終わり！