総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10

by you（@youtoy）

Slide 1

Slide 1 text

2025年6月4日 (水) エンジニアの自由研究発表会vol.10 @オンライン豊田陽介（） @youtoy 総額200円の入力インターフェースで年齢問わず楽しめる体験型展示

Slide 2

Slide 2 text

自己紹介豊田陽介（） @youtoy ▶ IT系イベント主催、　登壇や運営なども ▶ 機械学習・IoT関連　の書籍を出版 ▶ 子ども向けのIT関連活動　（ITが関係しない活動も）　　プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など

Slide 3

Slide 3 text

今回の話総額200円の入力インターフェース

Slide 4

Slide 4 text

200円分のアイテム（※ ダイソーで購入）仕組み：マイクに向けて空気を吹き出させて音で検知

Slide 5

Slide 5 text

年齢問わず楽しめる体験型展示にポンプを押すと反応するロボットの動きやアニメーション（ブラウザ上でのJavaScriptを用いたWebアプリ）

Slide 6

Slide 6 text

対象年齢を問わない体験型展示の構成体験者による何らかの動作（年齢問わずできる動作・内容） ↓ 動作に反応する分かりやすいフィードバック（動く、光る、音が鳴る、など）さらに「意外性」の要素を加えるとより良い感じに過去の作品例：・楽器の音色で　ロボットを動かす・SFみたいな見た目　のフィードバック

Slide 7

Slide 7 text

余談：セットでよく使う入力インターフェース 200円ではないけれど（太鼓の達人用コントローラー）

Slide 8

Slide 8 text

200円の入力インターフェース狙った3つのポイント

Slide 9

Slide 9 text

1・2）「金額の安さ」・「耐久性」 1）故障時の懐へのダメージが少ない「金額の安さ」 2）乱暴に扱われてもそこそこ大丈夫な「耐久性」空気入れという通常用途を考慮すると、耐久性を期待できる（少なくとも　自作するよりは）

Slide 10

Slide 10 text

3）使い方の説明不要な「分かりやすさ」何をするか（＝押して使うこと）は一目瞭然または別の人が体験している様子を見れば、すぐ分かる（「こうやって押してね」と　シンプルにも伝えられる　ワンアクション）

Slide 11

Slide 11 text

想定外の利点「接続時の容易さ・頑丈さ」など空気が出る部分とマイク部分直差しで固定マイクがホース内にあるので周囲のノイズとなる音が入りにくい

Slide 12

Slide 12 text

当初の試作時のマイクではできなかった接続方法約600円のマイクのコストダウンを狙ったら思わぬメリットが

Slide 13

Slide 13 text

この後は時間があれば紹介

Slide 14

Slide 14 text

Scratchで「弱押し・強押し」を試した事例マイク音量がとれれば押し込み検知可能＋時間変化で強弱区別

Slide 15

Slide 15 text

体験型展示の作品（Webアプリ）で使った技術・マイク関連：Web Audio API ・描画まわり：Canvas API ・ロボット制御：Web Bluetooth API ・太鼓の達人用コントローラー：　　Gamepad API ブラウザのAPIをフル活用（一部はラッパーライブラリで）

Slide 16

Slide 16 text

複数個での入力も可能（要USBアダプタ）マイク入力をUSBに変換するアダプを併用 ⇒

Slide 17

Slide 17 text

空気ポンプ＋マイクにたどり着くまでの流れなど詳細はQiitaの記事に