ホロンクリエイトで企画・開発したマイコンキット「HOTMOCK」は、デザインする人が使い勝手を検証する目的で開発されたシミュレーションツールです。（制作事例はこちらでも見ることができます）

MakerFaireへの出展を目的とした結成だったので、「なにを出展するか」を決めて行きます。まずは各自が今までに見たネット記事や動画、実際に見た展示物などから「おもしろいと思った部分」を共有しつつブレスト。ここでアイデアを膨らませていきます。

そして各メンバーから出てきたざっくりとしたアイデアはというと、この２つの方向性がありました。

ひとつは「なにかしらのアクションに対して、遠くに置いてあるものが念力みたいに倒れたらビックリするよね」という案。もうひとつは「リアルのもの（ぬいぐるみ？）を触ることで、WEBが更新されたら今までにない体験ができるのでは？」という案。全然交わってないように思えるこの2案ですが、「ヴァーチャルな操作でリアルなものが反応する」⇔「リアルな操作でバーチャルのものが反応する」 という対比として展示し、操作性の面白さを体験してもらおう！ というのを共通のテーマとします。

「念力案」はゲーム性を持たせ、「手元の入力操作で遠くのマトを打ち落とすという射的」へと。「WEBと繋げる案」は、「手元のクマのあみぐるみを触ることで、画面上のクマを好きなようにカスタマイズできる」という新しいインターフェースの提案へと。それぞれ2014年秋・2015年夏の2度に渡り、少しずつ改変・改良を重ねつつ、展示できるかたちへとブラッシュアップしていきました。

この写真は、2014年秋の展示の様子です。

まずは、「なにかしらのアクションに対して、遠くに置いてあるものが念力みたいに倒れたらビックリするよね」という案。

「手元で入力した情報で、離れた的にぶつけられたら念力っぽくて面白そう！」 というアイデアから、「（キーボードを）打つ」と「（射的の）撃つ」を掛けた「射的」を作ってみようという流れになり、そこでまず、キーボードに的の名前を入力すると、的が倒れるものが出来あがりました。

「kame」と入力すると、カメが倒れます。

また、サブ機能としてマウス操作ではじき落とすバージョンも作ったところ、

「画面の上のほうを叩く」⇒「台の上に置いてあるものが落ちる！」 という意外性は子供にも分かりやすかったようで、あっという間に子供に人気のブースとなりました。

このバージョンを作ったのは、「子供に遊んでもらうとなったとしても、子供ってローマ字打てないじゃん！」と気付いたからです。打てば必ず倒れる（ハズレがない）からゲーム性はないけど、感覚自体が面白いからもうそれだけでいいかな！？ と。

この「ゲーム性のなさ」、「操作性の簡易さ」のお陰か、マウスにやっと背が届くぐらいの小さな子も遊んでいってくれました。子供のお客さんも多かったですが、反応を見ると大人のほうがよっぽど驚いてくれて、真面目そうなおじさんが、最初真面目な顔して触ってるのに子供の顔に戻って「ええええーっ」となる瞬間が何度もあって、そういうのを見るとこっちも嬉しくなりました。

技術的なところをざっと説明すると、

マウスの操作で「どこに電流を流すか」を選ぶ
↓
指定された鉄芯が電磁力で飛び出る
↓
上に置いてあるものが落ちる

……という流れになってます。

もうちょっと細かく説明すると、

画面に表示されているflashアプリ上で設定されているエリアにマウスカーソルが入ったら、そこからソケット通信でHOTMOCKに出力し、最終的には『ソレノイド』という通電すると鉄芯が飛び出る部品が動くようになっています。カーソルを置くエリアによってどのソレノイドを飛び出させるかを指示し、それに向かって電流を流します。

実際には、裏側はこうなっています。落ちた的（ヒヨコや魚）を拾うだけでも重労働だったので、次やるならもっと楽をしたい……とひそかに心に誓いました。

叩いたときに的となってるものがカチカチと叩かれたような感触があり、マウスに振動がくるようになってるのかと何度か聞かれました。そんな高度なことをしている訳ではなく、リアルにぶつかる音から感じる錯覚です。

今後、この「錯覚」や「振動」についても追及していければと思っています。

2015年夏展示用のバージョンではこのような形となりました。改変の結果、「射的」というより「念力ゲーム」と言った方がよさそうです。作品の見た目の印象はそんなに変えず、子供がパッと見て分かりやすいように、「リアルとバーチャルのあいだ」というテーマはそのままにしました。前バージョンでは存在しなかった「ハズレ」も出現するようになってます。

初回（2014年秋）のバージョンは、インプットはマウスとキーボードだけ……という既製品のみ。「遊んでもらう」という体験や「射的」というコンセプトのみで乗りきった感がありました。そこで、第2回目（2015年夏）は、HOTMOCKの良さである「インプットのプロトタイピング」という部分を強化してみます。UI（3種類）×ハード（3種類）の組み合わせで、全部で9通りの体験が出来るようになりました。

このようにバリエーションを増やし、その場で作り変えることができるようにして持って行きました。加速度センサーはHOTMOCKのきっとにはないので、自作したのがリモコンのような棒状のプロトの先端に付いています。

的についても、前回のもの（ヒヨコや魚）からペーパークラフトの箱（ブロック）に変更しました。叩くと中からコインが出ます。今回は「落ちないものを的にしたい（もう回収作業による筋肉痛で苦しみたくない！）」というのがまずあって、「リアルに存在しているものへの反応」というところは以前と変えたくなかったため、こんな形となりました。

3種類のUIは、ボタンで切り替えることができます。更にボタンでアイテム（きのこや毒キノコなど）を降らせることもでき、それを取るとキャラが巨大化します。そうなると的に当たりやすくなります。

UIのほうは切り替えるように出来てますが、ハード側は同時操作が可能です。そのため、同時に使った兄弟のケンカの原因になっていたりもしました。

ありがたいことにこの展示は、いろんなサイトで記事にしてもらいました。

GIZMODE：「ディスプレイの中の世界からゲームが飛び出してくる感覚って、なんだか楽しい」と言ってもらっています。
火炎放射ロボットからIoTまで…「Maker Faire Tokyo 2015」で出会ったMakeな人、もの ：： ギズモード・ジャパン

デイリーポータルZ：「射的を電子化してみた」

アスキーさんのサイトの記事、一般の方のブログにも写真が掲載されていました。

旅行より充実！Maker Faire Tokyo 2015を親子で楽しんできた ：： ASCII.jp

Maker Faire Tokyo 2015フォトレビュー – Hacking My Way ～ itogのhack日記

つぎに、2度に渡って射的と並べて展示していた「WEBと繋げる案」。「手元のクマのあみぐるみを触ることで、画面上のクマを好きなようにカスタマイズできる」という新しいインターフェースの提案です。

WEB上で、あみぐるみを自分の好きなようにカスタマイズできるツールがあったら便利なんじゃないか。自分で作ったような気分を味わえるかも！？　もしかしたら、あみぐるみ注文ツールのような使い道もあるかもしれない。

そんな思いから、まずはHOTMOCKをからだの中に取りつけられるクマを手編みで作ります。胴体は下半身はべつべつに。

身体の中にホットモックがピッタリ収まるようになっています。中はコードでグチャグチャですね。

各パーツに対して、スイッチやセンサー類を仕込めるようにしてあります。

このようにクマに仕込んだコードをパソコンに繋げ、

クマを触る（HOTMOCKを操作する）
↓
flashアプリに通信する（ソケット通信）
↓
画面上のクマの色や形が変わる

この流れを実現することで、「リアルのぬいぐるみを触りつつ」「バーチャルのクマをカスタマイズする」体験ができるツールにしてみました。操作によって表情・色・形が変化するので、ただ触るだけでもたのしめます。

アプリ側のデザインは、クマを注文できそうな買い物サイトっぽいデザインにしてみました。

さて、実物のクマを触ることで画面上のクマがどうなるかというと、こうなります。

これは画面上で試しにカスタマイズしてみた2種類のクマです。耳の形や身体の色、表情が違いますね。というか右のはウサギですね。各パーツを好きなように組み合わせてカスタマイズできます。

カスタマイズ可能なパーツはこの5種類です。

• 目
• 耳（色が変わる、うさぎのように伸びる、大きくなる）
• パンツの色
• 身体の色
• 眉の形

このように、実物のクマの手を握ったり、耳を握ったり、鼻を触ったりすることで、画面上のクマの色が変わったり、形が変わったりします。それでは、どのような操作だと分かりやすくカスタマイズしやすいでしょうか？

この画像だけだと、コントローラーが右のクマ、出力内容が左のクマ……というのがちょっと分かりにくいかもしれませんが、左のクマに仕込んだスイッチやセンサーを使い、右のクマをカスタマイズしていきます。

「目を触ると目が変わる」「耳を触ると耳が変わる」というような直観的な操作なら分かりやすいですが、スイッチの種類とカスタム可能なパーツの対応づけがなかなか難しそうです。操作する側とされる側の対応づけが難しく、どうすればいいものか迷います。そこで、次のような手順で操作のやり方を決めていくことにしました。

まずはルールを決めていきます。カスタマイズ出来る要素が多いので、ある程度は操作のルールを決める必要がありそうです。以下の2段階を基本的な操作と決めて、進めます。

1. どのパーツをカスタマイズしていくか決める
2. 選んだパーツの状態（色や形）を変えていく

たとえば、「右目のスイッチでパーツを選ぶ」「鼻のダイヤルで色や形を決める」というように、状態を変えるときに触るパーツの種類を限定させておけば操作しやすくなります。

「つまんだら形が変わる」というような、私たちが暮らしの中で当たり前に体験しているような動作も取り入れてみます。

たとえば、右耳に圧力をくわえると耳が大きくなったり、左耳に圧力をくわえると耳がうさぎのようにのびたり。（先ほど紹介した動画で実際の操作の様子もご覧いただけます）
これについては、圧力センサーを使います。

ほかには「クマにある仕草をさせるとそれっぽい顔になる！」という仕草による反応も取り入れてみました。腕をガッツポーズさせるとキリッとした顔に、腕を無茶な方向にひねると嫌がるという操作にしましたが、他にもこのような仕草による表情の変化を取り入れてみても面白そうです。

あとは、お尻の部分に照度センサーを仕込んでおり、上半身と下半身を離すとものすごく怒ります。（先ほど紹介した動画で実際の操作の様子もご覧いただけます）

逆に置いても問題なく機能はします。

ここまでの話はクマ側の操作についてでしたが、次は画面側。「たとえばおもちゃ屋の店頭で、クマをカスタマイズして注文できたら面白いよね」という話から、注文できそうなデザインの画面をFlashで作成しました。今までの作成履歴も閲覧できるようになってます。

ちなみに実物のクマと握手をすると、画面上で作ったクマを確定（注文？）が決定！ ということにしました。「クマと合意した」という雰囲気が出ていいかな、と。ここではクマの手に極薄シールスイッチを入れています。

「店頭で作ったものをその場で注文」に関しては、手編みとなるとなかなか難しそうですが、量産のぬいぐるみならば実現可能かもしれないですね。

まずここまでは、初回の出展時に盛り込んだ機能です。

2回目の展示のときは、「見せびらかす」というバージョンアップをしました。画面上で作ったクマをTwitterに投稿することができます。操作は前バージョンでも「決定」の意味だった「握手」。この操作で、ホロンフィジカル研究部：@holon_physicalに画像やメッセージ（自動）が投稿されます。

@holon_physicalさんのツイート

注文画面の右上に名前やTwitterIDを入力すると、名前、ID入りの投稿がされます。（空欄でも大丈夫です）
ハッシュタグ#クマゾンでこれまでの投稿がご覧いただけます。HOTMOCKに関する情報は#hotmockをご覧ください。