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
380
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you(@youtoy)
PRO
June 04, 2025
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary
you
PRO
0
60
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
160
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
180
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
350
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
15
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
140
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
46
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
110
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
220
Other Decks in Technology
See All in Technology
How We Built a Secure Sandbox Platform for AI
flatt_security
1
100
改竄して学ぶコンテナサプライチェーンセキュリティ ~コンテナイメージの完全性を目指して~/tampering-container-supplychain-security
mochizuki875
1
360
組織の“見えない壁”を越えよ!エンタープライズシフトに必須な3つのPMの「在り方」変革 #pmconf2025
masakazu178
1
580
はじめての OSS コントリビューション 〜小さな PR が世界を変える〜
chiroito
4
350
その意思決定、まだ続けるんですか? ~痛みを超えて未来を作る、AI時代の撤退とピボットの技術~
applism118
21
12k
巨大モノリスのリプレイス──機能整理とハイブリッドアーキテクチャで挑んだ再構築戦略
zozotech
PRO
0
210
グローバルなコンパウンド戦略を支えるモジュラーモノリスとドメイン駆動設計
kawauso
3
5.6k
Redux → Recoil → Zustand → useSyncExternalStore: 状態管理の10年とReact本来の姿
zozotech
PRO
21
8.9k
Rubyist入門: The Way to The Timeless Way of Programming
snoozer05
PRO
7
540
技術広報のOKRで生み出す 開発組織への価値 〜 カンファレンス協賛を通して育む学びの文化 〜 / Creating Value for Development Organisations Through Technical Communications OKRs — Nurturing a Culture of Learning Through Conference Sponsorship —
pauli
5
490
なぜThrottleではなくDebounceだったのか? 700並列リクエストと戦うサーバーサイド実装のすべて
yoshiori
13
4.9k
SRE視点で振り返るメルカリのアーキテクチャ変遷と普遍的な考え
foostan
2
410
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Statistics for Hackers
jakevdp
799
230k
Embracing the Ebb and Flow
colly
88
4.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Designing Experiences People Love
moore
142
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Documentation Writing (for coders)
carmenintech
76
5.1k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
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の記事に
身のまわりのアイテムには 面白い使い方がいろいろ!
終わり!