Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表...
Search
you(@youtoy)
PRO
June 04, 2025
Technology
0
400
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you(@youtoy)
PRO
June 04, 2025
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ローカルLLMをJavaScriptで(少しAIエージェントSDKなどの話も) / 冬のJavaScript祭り @Pleasanter Lounge
you
PRO
0
32
Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary
you
PRO
0
64
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
170
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
190
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
370
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
19
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
150
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
53
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
120
Other Decks in Technology
See All in Technology
5分で知るMicrosoft Ignite
taiponrock
PRO
0
230
直接メモリアクセス
koba789
0
290
AI活用によるPRレビュー改善の歩み ― 社内全体に広がる学びと実践
lycorptech_jp
PRO
1
190
ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPress Meetup Vol.81
torounit
0
520
AWS CLIの新しい認証情報設定方法aws loginコマンドの実態
wkm2
5
600
計算機科学をRubyと歩む 〜DFA型正規表現エンジンをつくる~
ydah
3
210
プロダクトマネージャーが押さえておくべき、ソフトウェア資産とAIエージェント投資効果 / pmconf2025
i35_267
2
590
MapKitとオープンデータで実現する地図情報の拡張と可視化
zozotech
PRO
1
120
[JAWS-UG 横浜支部 #91]DevOps Agent vs CloudWatch Investigations -比較と実践-
sh_fk2
1
240
生成AI時代の自動E2Eテスト運用とPlaywright実践知_引持力哉
legalontechnologies
PRO
0
210
今からでも間に合う!速習Devin入門とその活用方法
ismk
1
540
エンジニアリングマネージャー はじめての目標設定と評価
halkt
0
260
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.8k
Building an army of robots
kneath
306
46k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
A better future with KSS
kneath
240
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
Bash Introduction
62gerente
615
210k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Navigating Team Friction
lara
191
16k
Facilitating Awesome Meetings
lara
57
6.7k
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の記事に
身のまわりのアイテムには 面白い使い方がいろいろ!
終わり!