Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for you（@youtoy） you（@youtoy） PRO
July 25, 2026
Technology
380
1

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

Avatar for you（@youtoy）

you（@youtoy） PRO

July 25, 2026

More Decks by you（@youtoy）

See All by you（@youtoy）
つくって、体験してもらって、楽しんでもらう - 子どもも大人もワクワクするインタラクティブ体験を支える技術 -
Avatar for you（@youtoy） you
PRO
0
54
コーディングエージェントでM5Stack系の開発を少し試した時の話 / M5 Japan Tour 2026 Autumn 東京
Avatar for you（@youtoy） you
PRO
0
260
toio・myCobotでフィジカルAIっぽいことを行うための検討（とりあえず調査） / フィジカルAI LT（IoTLTによる開催）
Avatar for you（@youtoy） you
PRO
0
420
ローカルLLMとLINE Botの組み合わせ その3 / LINE DC Generative AI Meetup #8
Avatar for you（@youtoy） you
PRO
0
200
クラウドファンディング版StackChan 3体（4体）をインタラクティブな体験型作品にして展示もした話 / ｽﾀｯｸﾁｬﾝお誕生日会2026
Avatar for you（@youtoy） you
PRO
0
360
イベントで大活躍する電子ペーパー名札 〜その３〜 / ビジュアルプログラミングIoTLT vol.23
Avatar for you（@youtoy） you
PRO
0
400
AI時代だけど、わりと力業で追いかけている技術情報収集の話 / 20260518
Avatar for you（@youtoy） you
PRO
0
47
最近の技術系の話題で気になったもの色々（IoT系以外も） / IoTLT 花見予定会（たぶんBBQ） @都立潮風公園バーベキュー広場
Avatar for you（@youtoy） you
PRO
1
460
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
Avatar for you（@youtoy） you
PRO
0
600

Other Decks in Technology

See All in Technology
Jetson Orin Nanoとk3sとローカルLLMで音声文字起こしシステム作ってみた
Avatar for 世良泰明 y_sera15
0
100
二歩目のフロントエンド・ウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
2
310
宣言型部分更新は何を解決しどこへ向かうのか
Avatar for did0es shuta13
0
290
AI時代に必要な脅威モデリング― 変化の速度に負けない理解とリスク判断
Avatar for masakane55 masakane55
5
1.2k
LocalStack を使ったサーバーレスアプリケーション開発 / Serverless Development with LocalStack
Avatar for Yoshiaki Yoshida kakakakakku
1
370
自作バイナリを動かす「入口」8選
Avatar for Takumi Sueda puhitaku
2
1.2k
自主式軟體工廠
Avatar for philipz philipz
0
250
転んだ話が背中を預ける理由になる / A_story_about_falling_down_gives_you_a_reason_to_watch_each_other_s_backs.pdf
Avatar for Pauli pauli
3
350
DevelopersIO 2026 知識の地図を描く ─ オントロジーとは何か？
Avatar for Satoru Ishikawa ishikawa_satoru
1
1.3k
実践！Cloud Run ハンズオン！！ / Cloud Run handson
Avatar for y-ohgi y0hgi
0
150
Kiro Crewをはじめよう
Avatar for t.kizawa kizawa2020
1
120
ai_cording_with_k8s_knowledge.pdf
Avatar for mochizuki875 mochizuki875
1
330

Featured

See All Featured
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
600
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
54k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
360
It's Worth the Effort
Avatar for 3n 3n
188
29k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3.2k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
350
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
450
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
900

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. 終わり！