テクノ手芸その1：NYAN
2014.12.25
さる10月の某イベントのLT用にこれ作りました。
このぬいぐるみをふにふにすると、ネットワークを経由してWebページ上で反応してくれるテクノ手芸的なものです。
構成
ハードウェア・ソフトウェア含めて、この構成で挑みました。
ちなみに材料一覧はこちらです。
・Spark Core - https://www.spark.io/
・圧力センサ
・抵抗 10kΩ
・バニラシールド、配線もろもろ
・フェルト（黒 ☓ 2枚）
・刺繍糸
・わた
・USBバッテリー
作り方 ＜ソフトウェア編＞
1. Webページをつくる
Web側はちょっとした動きがあればいいかなと思い、ごく簡単なアニメーションをするものを用意しました。
3パターンくらいの動きを用意して、ランダムに実行させる前提です。アニメーションはCSSクラスの付け外しで、ちょこちょこ動く感じに。
2. サーバー側をつくる
この後で準備するハードウェア側からのリクエスト受け取りでAPIと、Web側との連動にはWebSocketを使うことにしました。WebSocketということもあり、サーバー側はExpressでささっと作ります。このあたりは、もう単純なもので特筆するところもないので、割愛。（とても見せれるコードじゃないし）
3. ドメインほか準備する
今回、サーバー側を入れ込む箱にはHerokuを使いました。触るの初めてだったのですけど、簡単なものあげるのにこりゃ便利だなと。そして、サブドメインも用意してーで準備完了です。動作確認には、APIを直リクエストして確かめたところでOK。
そのうち撤収しますが、できたWebページはこちら。
分かりやすいように、クリックすると動くように変更してあります。
作り方 ＜ハードウェア編＞
1. 回路をつくる
今回のハードウェアの要件として、
- さわると反応する
- 結果をAPIで送信する
- それなりの小型化
が挙げられるため、それぞれを満たす構成を検討しました。
まず、コアとなるマイコンには、SparkCoreを使うことにしました。Arduinoライクなデバイスですが、1cm☓2cm程度とはるかに小型で、しかもwi-fiを標準搭載しています。ネットワークを用いて何かに組み込みたい場合とか、この手軽さは便利。もう最近だったら、千石電商とかの店頭でも買えますし。
これに対して触ると反応するには、圧力センサを用います。こちらも1cm程度の薄いもので、圧力を加えると抵抗が下がるという仕組みで、その情報をSpark側に送り込んでいきます。
ちなみにこの辺りは、最初ブレッドボード上でピンを抜き差ししながら検討し、固まった段階で最終形をイメージしながらユニバーサル基板にハンダ付けしていっています。回路=Spark自体は、USBバッテリーの電源で動くため、それさえ確保できればそれなりの持ち運びもできます。
2. センサ取得内容をAPIで送り込む
圧力センサから受け取った内容はアナログ値なので、ちょうど良さそうな力加減での値を検証して、しきい値を決めていきます。このしきい値以上になったらOKということで、Spark内からhttp通信をかけて、予め用意したAPIへリクエストを投げます。特にレスポンスは使わないので、サーバー側でリクエストが受け取れればよし、ということで。
Sparkに使ったコードはこちら。Arduinoでも多分そのまま使えるはずです。
https://gist.github.com/ktknest/8fe3afd0f88b92620001
3. 縫う
あとは飾り立て。
モチーフにした猫になるべく近づけるべく、型紙をおこして、フェルトをちまちま縫って綿をつめていきます。ある程度つめたら、さっき作った基板を埋め込み、綿をまた詰め〜、という作業の繰り返しです。最後にそのへんの材料で顔を作って、外に出しておいたUSBケーブルにバッテリをつけてお終いです。
おわり
以上、ざっとした説明でした。
リアルとWebが連動するものは前から作ってみたいと思って実現できていなかったので、やってて楽しかったです、はい。
ここ数年は、色々とツールも出揃ってきたので、やるのも手軽でいいですね。
以上、Arduino Advent Calendar 2014 25日目の記事でした。Arduinoじゃないけど、まぁ気にしない。
クレジット
イラストは @tomo_eさんより拝借させていただきました。ありがとうございますm(__)m
参考
