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

 

 

※この記事は、2025年6月に開催されたイベントでの発表内容をレポートしたものです。

登壇者はこの方

*

豊田陽介

ガジェットや面白そうな技術が好きで、それらを使った試作をよくプライベートで行ったり、作ったものをメーカーフェア等のモノづくり系の展示イベントに出展したりしています。また他の個人の活動として、IoTやビジュアルプログラミング等の技術コミュニティを単独・共同で主催したり、イベントでの登壇や技術記事の執筆などの活動も行っています。

 

 

 

speakerdeck.com

 

www.youtube.com

 

 

豊田:今回は、私が制作した「総額200円の入力インターフェース」についてご紹介します。
このインターフェースは、ダイソーで購入した「空気ポンプ」と「イヤホンマイク」の2つを組み合わせたものです。イヤホンマイクはマイク部分だけを使います。

使用する200円分のアイテム

仕組みとしては、空気ポンプから出る空気をマイクに向けて吹き付けると、マイクに息を吹きかけた時のような「ザザッ」というノイズが発生します。この音を検知することで、入力として認識させる仕組みです。

年齢問わず楽しめる体験型展示に

このインターフェースは、物作りのイベントや親子向けの展示で活用しています。

体験型展示の様子

子供が空気ポンプを上から叩くと、その入力に連動して「toio」というロボットが4台同時に動きます。また、パソコンの画面上では、描画によって色や形が変わるビジュアライゼーションを表示しています。このシステムは全て、ブラウザ上で動作するJavaScriptを用いたWebアプリケーションとして制御されています。

対象年齢を問わない体験型展示の構成

基本的には、体験者が何らかの動作をすると、それに即座に反応して分かりやすいフィードバックが返ってくる、というシンプルな構成を心掛けています。
「年齢を問わない」という点では、未就学児から大人まで誰でもできる動作を想定します。道具を使う場合は、その大きさやサイズ、扱いやすさを考慮し、非常に簡単に扱えるものを選びます。物理的なユーザーインターフェース(UI)を考えるような感覚です。


動作に対するフィードバックは、「動く・光る・音が鳴る」という、いわば鉄板の3要素を単独で、あるいは組み合わせて使用することが多いです。
さらに、「意外性」という要素を加えることで、より面白さが増します。例えば、楽器の音色を鳴らすと、事前に機械学習させておいた特定の音に反応してロボットが予期せぬ動きをしたり、ビジュアルエフェクトをSFのような見た目にしたりすることで、大人も子供も「え、なんだこれ?」と興味を持って楽しんでもらえる展示になります。

よく使う入力インタフェース例

少し余談になりますが、本日ご紹介した空気ポンプとセットでよく使う入力インターフェースとして、Nintendo Switch用の「太鼓の達人」専用コントローラーがあります。
動画のように、テーブルにやっと頭が出るくらいの小さな子供が「自分でやりたい」と楽しそうに太鼓を叩いてくれます。このように小さな子から、もう少し大きくなってくると、しっかりとリズムを取って叩くなど、様々な年代の方が楽しんでくれます。
価格は200円の30~40倍ほどになりますが、叩いた感触が非常に良く、またUSBで接続できるため、パソコンで手軽に扱えるという利点があります。

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

この200円の入力インターフェースは適当に選んだわけではなく、3つのポイントで考えた上で選択しています。

1 金額の安さ

 

1つ目のポイントは、故障した際の懐へのダメージが少ない「金額の安さ」です。先ほど申し上げたように、物作りイベントには大人向けもあれば、お子さんがメインの親子向けもあります。お子さんの場合、親御さんが「乱暴にしないでね」と注意しても、夢中になって思い切り扱ってしまうことは少なくありません。

 

そういった時に、交換可能なこの価格帯は、制作者側として非常に安心感があります。イヤホンマイクも同様で、パソコン内蔵のマイクに直接空気を吹き付けるのは仕様として想定されていないため、何かあった時のリスクを考え、外付けでケーブルの取り回しも良い100円のマイクにすることで、安価に交換できるという安心感を得ています。

2 耐久性

2つ目のポイントは「耐久性」で、特に空気ポンプがそれに当たります。このポンプは、本来、足で踏んで空気を入れるなど、力いっぱい何度も使うことを想定されています。100円ショップの製品なので、材料費などは抑えられているかもしれませんが、少なくとも私が自作するインターフェースよりは、丈夫さや、きちんと使えるという点での信頼性が高いです。このプロダクトとしての安心感を、自分の作品に取り入れることができるのです。

3  使い方の説明不要な「わかりやすさ」

そして3つ目のポイントは、「使い方の説明が不要な分かりやすさ」です。ポンプの見た目から、押して使うことは一目瞭然です。

想定外の利点「接続時の容易さ・頑丈さ」など

試行錯誤して気づいた点

この仕組みは、空気が出る部分をマイクに吹き付けさせるようにセッティングするものですが、展示の現場で試行錯誤しているうちに、このダイソーのイヤホンマイクが空気ポンプの先に刺さりそうだと気づき、試してみました。

 

すると、右の写真のように、ケーブルを間に挟むことで、空気の通り道を確保しつつ、マイクをホースの先にしっかりと差し込むことができました。お子さんが乱暴に叩くとホースが引っ張られることもありますが、この方法なら、長時間の展示でも途中で外れてしまう心配がありません。
また、マイクがホースの内部に入るため、展示会のような多くの人がいて周りの音が大きい環境でも、ノイズを拾いにくくなるというメリットもありました。

実は当初、私がよく行くダイソーにはちょうど良いマイクがなかったため、インターネットで安価なマイクを購入して使っていました。そのマイクはマイク部分が大きかったので、ホースの前に設置して固定するという方法を取っていました。しかし、それをダイソーの製品に置き換えたことで、コストダウン以上の思わぬメリットが得られました。

Scratchで「弱押し・強押し」を試した事例

Scratchで試した内容

 

 このインターフェースは、基本的に音量が取れれば検知可能です。先ほどの展示作品では周波数変換(FFT)もかけていますが、シンプルな仕組みでも応用できます。

 

例えば、音量の時間変化を利用して、軽く押した時と強く押した時で反応を変えることもできます。このデモでは、軽く押すとキャラクターが小さくジャンプして赤色に、思い切り押すと大きくジャンプして青色に変わります。このように、マイクの音の大きさを取得できるプログラミング環境であれば、押し込みの検知が可能です。さらに、音が閾値を超えてから下回るまでの時間を計測することで、押し方の強弱を判別できます。やろうと思えば、もっと多くの種類の押し方を認識させることも可能かもしれません。

体験型展示の作品(Webアプリ)で使った技術

使用技術について

使用した技術について簡単にご紹介します。
基本的にはブラウザのAPIをフル活用しています。マイク関連の入力取得や音量、周波数解析には「Web Audio API」を、画面のビジュアライゼーションには「Canvas API」と、そのラッパーライブラリである「p5.js」などを使用しました。

 

また、4台のロボットが動いていた部分は、無線(Bluetooth)で接続しており、「Web Bluetooth API」を使って制御しています。

余談で紹介した太鼓の達人用コントローラーは、USBで接続するとゲームパッドとして認識されます。そのため、ブラウザの「Gamepad API」を利用することで、叩かれた4つの箇所をそれぞれ検知することができます。

複数個での入力も可能(要USBアダプタ)

入力インターフェースは複数個での入力にも対応可能です。

例えば、右のポンプを押すと全てのロボットが一斉に回り、左を押すとシンクロしたような動きをするといった制御ができます。ビジュアライズも、入力に応じて赤と青の円の大きさを変えたり、周波数の波形表示を変化させたりすることが可能です。
ただし、200円のインターフェースを複数に増やす場合、マイク入力をUSBに変換するためのアダプタが別途必要になり、総額は200円では収まらなくなります。

 

実は、この仕組みにたどり着くまでには、2020年のコロナ禍の頃から、丈夫で交換可能な足踏み入力装置を作れないかと考え始め、ゆっくりと時間をかけて構想を練ってきました。その過程で様々な方のアイデアを参考にしながら、現在の形に至りました。この経緯の詳細はQiitaの記事にまとめてあります。

 

このように、身の回りにあるアイテムでも、技術と組み合わせることで、子供から大人まで楽しめる面白い使い方が色々とできます。今後もこうした取り組みを続けていければと考えております。

 

 

 

 

▼▼ ぜひ他登壇者の発表レポートもご覧ください!

 

おやつは300円まで!の最適化を模索してみた

 小澤 陽介さんの発表内容については、以下の記事リンクからご覧ください。

www.tech-street.jp

 

 市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた

うーたんさんの発表内容については、以下の記事リンクからご覧ください。

www.tech-street.jp

 

スマートハウスの蓄電性能の効率化を実現してみた〜電気自動車編〜

 ななみんさんの発表内容については、以下の記事リンクからご覧ください。

www.tech-street.jp

 

総額200円の入力インターフェースで年齢問わず楽しめる体験型展示

豊田陽介さん の発表内容については、以下の記事リンクからご覧ください。

www.tech-street.jp

 

 

 

Community Members

さまざまなテーマで事例や知見を学ぶ
IT・テクノロジー人材のための勉強会コミュニティ

①上記ボタンをクリックするとTECH PLAY(外部サイト)へ遷移します。

②TECH PLAYへ遷移後、アカウントをお持ちでない方は、新規会員登録をお願いいたします。

③TECH PlAY会員登録後、TECH Streetページよりグループフォローをしてください。

今後のイベント参加・メンバー登録に関する重要なお知らせはこちら