Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表...
Search
you(@youtoy)
PRO
June 04, 2025
Technology
0
68
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you(@youtoy)
PRO
June 04, 2025
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
1.6k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
130
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.1k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
150
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
210
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
120
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
110
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
57
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
63
Other Decks in Technology
See All in Technology
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
240
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
470
o11yツールを乗り換えた話
tak0x00
1
280
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
190
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
120
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
6
240
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
690
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
580
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
310
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Typedesign – Prime Four
hannesfritz
42
2.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Thoughts on Productivity
jonyablonski
69
4.8k
Six Lessons from altMBA
skipperchong
28
3.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
2025年6月4日 (水) エンジニアの自由研究発表会vol.10 @オンライン 豊田陽介( ) @youtoy 総額200円の入力インターフェースで 年齢問わず楽しめる体験型展示
自己紹介 豊田陽介( ) @youtoy ▶ IT系イベント主催、 登壇や運営なども ▶ 機械学習・IoT関連
の書籍を出版 ▶ 子ども向けのIT関連活動 (ITが関係しない活動も) プライベートでの活動 ▶ ガジェット ▶ 描画系/IoT/AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など
今回の話 総額200円の 入力インターフェース
200円分のアイテム(※ ダイソーで購入) 仕組み:マイクに向けて空気を吹き出させて音で検知
年齢問わず楽しめる体験型展示に ポンプを押すと反応するロボットの動きやアニメーション (ブラウザ上でのJavaScriptを用いたWebアプリ)
対象年齢を問わない体験型展示の構成 体験者による何らかの動作 (年齢問わずできる動作・内容) ↓ 動作に反応する分かりやすい フィードバック (動く、光る、音が鳴る、など) さらに「意外性」 の要素を加えると より良い感じに
過去の作品例: ・楽器の音色で ロボットを動かす ・SFみたいな見た目 のフィードバック
余談:セットでよく使う入力インターフェース 200円ではないけれど(太鼓の達人用コントローラー)
200円の入力 インターフェース 狙った3つのポイント
1・2)「金額の安さ」・「耐久性」 1)故障時の懐へのダメージが少ない「金額の安さ」 2)乱暴に扱われてもそこそこ大丈夫な「耐久性」 空気入れという通常 用途を考慮すると、 耐久性を期待できる (少なくとも 自作するよりは)
3)使い方の説明不要な「分かりやすさ」 何をするか(=押して使うこと)は一目瞭然 または別の人が体験している 様子を見れば、すぐ分かる (「こうやって押してね」と シンプルにも伝えられる ワンアクション)
想定外の利点「接続時の容易さ・頑丈さ」など 空気が出る部分と マイク部分 直差しで 固定 マイクがホース内にあるので周囲のノイズとなる音が入りにくい
当初の試作時のマイクではできなかった接続方法 約600円のマイクのコストダウンを狙ったら思わぬメリットが
この後は 時間があれば紹介
Scratchで「弱押し・強押し」を試した事例 マイク音量がとれれば押し込み検知可能 + 時間変化で強弱区別
体験型展示の作品(Webアプリ)で使った技術 ・マイク関連:Web Audio API ・描画まわり:Canvas API ・ロボット制御:Web Bluetooth API ・太鼓の達人用コントローラー:
Gamepad API ブラウザのAPIをフル活用 (一部はラッパーライブラリで)
複数個での入力も可能(要USBアダプタ) マイク入力をUSBに変換するアダプを併用 ⇒
空気ポンプ+マイクにたどり着くまでの流れなど 詳細はQiitaの記事に
身のまわりのアイテムには 面白い使い方がいろいろ!
終わり!