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
370
総額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
47
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
150
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
170
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
290
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
14
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
140
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
42
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
100
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
220
Other Decks in Technology
See All in Technology
20251027_findyさん_音声エージェントLT
almondo_event
2
530
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
7
1.7k
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.6k
DSPy入門
tomehirata
6
850
設計に疎いエンジニアでも始めやすいアーキテクチャドキュメント
phaya72
24
16k
激動の時代を爆速リチーミングで乗り越えろ
sansantech
PRO
1
240
AIを使ってテストを楽にする
kworkdev
PRO
0
400
AIとの協業で実現!レガシーコードをKotlinらしく生まれ変わらせる実践ガイド
zozotech
PRO
2
260
東京大学「Agile-X」のFPGA AIデザインハッカソンを制したソニーのAI最適化
sony
0
180
CloudComposerによる大規模ETL 「制御と実行の分離」の実践
leveragestech
0
110
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
4
2.6k
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
180
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
54
7.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
950
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Balancing Empowerment & Direction
lara
5
710
Product Roadmaps are Hard
iamctodd
PRO
55
11k
A designer walks into a library…
pauljervisheath
209
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
RailsConf 2023
tenderlove
30
1.3k
Gamification - CAS2011
davidbonilla
81
5.5k
Being A Developer After 40
akosma
91
590k
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の記事に
身のまわりのアイテムには 面白い使い方がいろいろ!
終わり!