うめぇ~な!クリック

つやま新産業創出機構さんからの依頼でスーパーマーケット・トレードショーで用いるインタラクティブな装飾の開発

某SNSサービスの「いいね!」ボタンのようなもの

スーパーマーケット・トレードショーで紹介する各社の製品が「いいね」と思ったら実物のボタンを押すことでカウントアップされる装飾が設置できないかという依頼から始まります。

安価なハードウェア

私はハードウェアは得意分野ではないので,ハードウェア開発はplugicaの時もお世話になった後輩の@puhitaku君にお願いしています。実際に押されるボタンには100円均一の「タッチライト」と呼ばれる製品を使用。それらがモジュラーケーブルでマイコンにつながり,マイコンからLAN経由でサーバにHTTPリクエストを送ることでカウントアップを実現します。

1つのマイコンで最大4つのボタンを操作することができるようになっているのでマイコンの数も抑えて制作費は人件費込で10万円ほど。かなり安く抑えています。

(無駄に)クロスプラットフォームなカウンター表示

カウンターの表示は私が担当。最初は専用のアプリケーションを実装するつもりでしたが,カウント用のサーバを用意するのであればHTTP上で全てやったほうが早いということで,表示部分はHTMLとJavaScript(jQuery)でアニメーションを行っています。

ボタンを押されるとマイコンはサーバ上のCGIにHTTPリクエストを送信。CGIで押されたボタンの情報などを含むJSONを生成し,HTMLがそのJSONを3秒毎に読みに行くことでほぼリアルタイムにカウントアップが行える仕組みです。

一番苦労したのはカウントアップした時に流す音声をどう処理するか。非同期処理であるJavaScript動作や,HTML5の音に関するAPIの弱さを身にしみるほど感じました。

実際に動作させるプログラム

一応カウンター用のソースコードはGitHubにて公開中です(MIT License)。あまりいいコードとは思えませんが。