Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
50
0

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）
ローカルLLMとLINE Botの組み合わせ その3 / LINE DC Generative AI Meetup #8
Avatar for you（@youtoy） you
PRO
0
140
クラウドファンディング版StackChan 3体（4体）をインタラクティブな体験型作品にして展示もした話 / ｽﾀｯｸﾁｬﾝお誕生日会2026
Avatar for you（@youtoy） you
PRO
0
290
イベントで大活躍する電子ペーパー名札 〜その３〜 / ビジュアルプログラミングIoTLT vol.23
Avatar for you（@youtoy） you
PRO
0
260
AI時代だけど、わりと力業で追いかけている技術情報収集の話 / 20260518
Avatar for you（@youtoy） you
PRO
0
23
最近の技術系の話題で気になったもの色々（IoT系以外も） / IoTLT 花見予定会（たぶんBBQ） @都立潮風公園バーベキュー広場
Avatar for you（@youtoy） you
PRO
1
390
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
Avatar for you（@youtoy） you
PRO
0
500
イベントで大活躍する電子ペーパー名札を作る（その２） 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
Avatar for you（@youtoy） you
PRO
0
330
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
Avatar for you（@youtoy） you
PRO
0
370
M5Stack Chain DualKey を UIFlow 2.0 ＋ USB接続で試す / ビジュアルプログラミングIoTLT vol.22
Avatar for you（@youtoy） you
PRO
2
240

Other Decks in Technology

See All in Technology
なぜ、あなたのAPIは使われないのか？ AX時代の設計原則、ガードレール、運用体制
Avatar for Yoichi Kawasaki yokawasa
1
210
AICoEでAIネイティブ組織への進化
Avatar for YukiOgawa yukiogawa
0
210
アップデートで何が変わった？デモで学んで使いこなすIBM Bob2.0
Avatar for mu (Mizuho Uehara) muehara
0
220
10年目を迎えた「ABEMA」がどのように AI 活用を推進して、AI 駆動開発にシフトしているのか / How ABEMA, entering its 10th year, is promoting the use of AI and shifting toward AI-driven development
Avatar for Yusei Yamanaka miyukki
0
360
“それは自分の仕事じゃない"を 越えて行け
Avatar for yuukiyo yuukiyo
1
520
AI時代におけるエンジニアの新たな役割──FDEとクオリアの探求/登壇資料（戸井田 裕貴）
Avatar for Hacobu hacobu
PRO
0
310
AI時代のYAGNI：「爆速で無駄になった機能」からの学び / 20260720 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
520
GoでCコンパイラを作った話
Avatar for repunit11 repunit
0
150
探索・可視化・自動化を一本化 Amazon Quickでデータ活用スピードを上げる方法
Avatar for こーへい koheiyoshikawa
0
170
Webアプリ認証の全体像 / The Big Picture of Web App Authentication
Avatar for Kitano Yuichi kitano_yuichi
1
410
副作用のある Lambda でも Lambda Power Tuning は使えるのか / lambda-power-tuning-side-effects
Avatar for koukihosaka koukihosaka
1
140
SoccerMaster: A Vision Foundation Model for Soccer Understanding
Avatar for Kazuyuki Miyazawa kzykmyzw
0
160

Featured

See All Featured
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
190
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
13k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
500
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
420
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
470
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.9k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
460
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
550
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
290

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