フィジカルWebアプリ「ち〜ん」をすべて公開 (WIP)

作りたい人が居るとは思えないのですが、そろそろ手放したいので諸々公開します。
好きに料理してくださいw

どのようなものか?

「ち〜ん」は下記で紹介しています。

• ち〜んの概要
• YouTube
• MakersHub

このように、Webサイトとデバイスが連携するWebアプリなので、フィジカルWebアプリと呼ぶことにしました。

原型は、こちらで、もともとはPixi.jsの練習で作ったものです。というか、ほとんど変わってないw

Webサイト

Webサイトのコードですが、下記にライブデモが置いてありますので、コードは好きにみてください。アホみたいな書き方してますので、あまり参考にはならないと思いますが。。。

「ち〜ん」

WebRTCの通信には、Skywayを使っていますので、コピーして動かしてみたい！という方が（居るとは思えませんがw）もし居たら、main.js:163の'APIKEY'の部分だけSkywayから取得したものに差し替えてください。

デバイス（オリジナルバージョン）

ここでは、Youtubeなどに映っているオリジナルバージョンのデバイスの作り方を紹介します。
ただ、マイコンを使って1から組み立てるやり方なので、あまり電子回路を組んだことの無い方にはちょっと面倒で難しいと思いますので、別途、ブレッドボードとArduino等を組み合わせて最低限でやれるやり方も書こうと思います。

概要とファームウエア、回路図

ち〜んのデバイスは、MIDIデバイスです。

Arduinoを利用して、ATTiny45というAVRマイコンにファームウエアを書き込むことで、USB-MIDIデバイスにしています。

回路図は下記の通りです。

「ち〜ん」の回路図

※図中のソレノイドには、5V動作するプッシュソレノイドを使います。

こちらは、V-USBをベースに、Arduino開発環境から様々なMIDI機器を作れるようにカスタマイズしたライブラリのリポジトリです。

こちらのライブラリの中のサンプルとして、「ち〜ん」デバイスも登録しています。

• 「ち〜ん」のファームウエア

ライブラリの使い方は、UsbMidiAttiny45in3のreadmeをみてください。

作り方 (T.B.D.)

そのうち書きます。。。

材料

材料は秋葉原とダイソーでそろえることができます。
というか、円安で高くなってる！！！びっくり。。。
私が作ったときは1000円以下で作れたけど、1500円くらいになっちゃいました。

材料	価格(おおよそ)	入手先
呼び鈴	108円	ダイソー
ユニバーサル基板(5×7cm)(※0)	100円	マルツ
プッシュソレノイド(5V)	650円	千石
ATTiny45(※1)	250円	マルツ
MOSFET(IRLU3410PBF(※2))	60円	秋月
ICソケット(8PIN DIP)	10円	秋月
LED×2	20円	秋月
1/4W 抵抗(300-500Ωくらい×2) LED用	10円	千石
1/4W 抵抗(1KΩ×2)FET用	10円	千石
1/4W 抵抗(100Ω×2)USBライン用	10円	千石
1/4W 抵抗(1.5KΩ×1)USBライン用	5円	千石
1/4W 抵抗(10KΩ×1)スイッチ用	5円	千石
3.3Vツェナーダイオード×2	30円(※4)	aitendo
ショットキーダイオード(1S3)	20円	秋月
整流用ダイオード(1N4007)	10円	秋月
コンデンサ 0.1uF ×2	100円(※5)	秋月
コンデンサ 100uF ×1	10円	秋月
USB-Bコネクタ	50円	秋月
ピンヘッダ	40円(※6)	秋月
タクトスイッチ×1	10円(※7)	秋月
合計	1440円

あ、あと、ATTiny45にファームを書き込むために、Arduinoが必要です。

その他、配線材（すずメッキ線、絶縁被覆付き導線　それぞれ少々）や、はんだ、はんだゴテ、ドリル、ヤスリなど。

2015.02.10 追記
その他、下記のようなコマモノも必要です。

• セロテープ 少々（スイッチ組み立てる時に使う）
• ボルト+ナット (3mmくらいの太さで、1cmくらいの高さのナベ皿のやつ。100均でも売ってたりします) 2セット
• （上記リストの基板とは別に）ユニバーサル基板の切れ端（2cm×1cmくらいで良い。こちらは紙フェノールの柔らかいのでOK）
• 固めのポリ版（オススメは、100均で売ってるペラペラのまな板を使うと楽）の切れ端 2cm×1cmくらい
• 工具いろいろ。ドリル、ニッパ、ドライバ、ラジオペンチ、はんだごて、はんだ、はんだ台。。。などなど

(※0)4.7cm×7cmのサイズの方が多く売ってますが、この少し大きめのヤツの方がスペース的に作りやすいです。同じサイズで紙フェノールのやつもありますが、このガラスタイプの方が強度的には良いです。穴あけの際粉が出るので吸い込まないように注意。

(※1)手短に秋葉原で買う想定でATTiny45を書いたけど、海外で10個以上とか買うなら、今ならATTiny85の方が安いという意味わかんない状況なので、届くまで1ヶ月くらいかかって良いなら、そっち買った方が良いと思います。（参考：(2015/02/06時点)ATTiny85-20PU × 10個 送料込み $11.99 ※aliexpressなので届くの1ヶ月近くかかることがある）

(※2)MOSFETは、ほかのでも良いです。というか、微妙にコレ、耐圧高すぎる気がする。5Vしかかけないのにw

(※3)抵抗は、そんなにシビアじゃないので（というか、私自身参考にした回路情報とかから手持ちのに適当に変えちゃってる部分あるので）近いのでいいと思います。面倒な方は、こんなセット1つあればコト足りるかと。USBのラインのだけは、結構シビアっぽいので、80〜100の間にした方が良いっぽいです。LEDの抵抗は、使うLEDが暗かったら変える、みたいな感じで。

(※4)20本分の値段ですが、安いので。3.6Vにせよとの情報も多いのですが、いつも3.3Vで作ってて今のところ問題ないです。どっちがいいんですかね。。。

(※5)25個分の値段ですが、、よく使うのでいいでしょw

(※6)これも、4本分しか使いませんので、かなり余りますが、よく使うものなので。

(※7)「ち〜ん」のスイッチに使います。タクトスイッチを使うのは、4号機バージョンの作り方で、ほかの方法よりは「比較的簡単」なので、今回はその方法を紹介しますが、それでもこのスイッチを作り、満足に調整するには、ほかの部分全部配線し終わるのと同じくらいの時間がかかります。

組み立て方

いよいよ組み立て方です。
↓この写真から、なんとなく察してくださいw

というのじゃ、あんまりなので、それなりに解説を試みます！

（週刊ディアゴスティーニかよ！というくらい、遅々と更新中w）

穴あけ

まずは、ベルをバラします。

基板とベルの土台部分を接続するための穴をあけます。
というわけで、最初は穴あけ。

黒いのが土台です。
別に、ボルトで止めなくても良さそうですが、結構振動があるので、ここはちゃんと止めとく方が良いです。

こうした工作得意な人はもっと良い方法あるのかもしれないんですけど、私は適当に基板を土台の上に乗っけて、間を両面テープで仮止めしたあと、マジックで穴あけるところにマークして、そのままドリルで基板と土台一緒に空けてしまいますw

マーク後、穴をあけるとこんな感じに！
（すいません。。夜中なのでドリルは回せず実際には空けられません。。既に空けた4号機で許してください）

穴あけだけですが、結構大変！（私だけ？）
少々ずれても、とりあえずネジ止めできればOKなので、あまり気にしないで！

とりあえず、穴が開いた基板ができたら、次は回路図を見ながら配線する作業です。

配線

私も電子工作１年目の素人なので、実体配線については勉強中の身です。もう、ぜんぜん１発で動いたことなんかなくて、自信はありません！w

というわけなので、「こう作れば動く！」というのが示せず申し訳ないのですが、回路図をある程度参考に、作りつつ、ノイズなどの影響を出来るだけ軽減させるようにコンデンサ入れたり、電流逆流防止用のダイオード入れたりといった感じで調整する必要があります。

これまで、いろんな失敗をもとに、気をつけてるのは下記になります。

1. ATTinyとMOSFET・ソレノイドは出来るだけ遠ざける。（近くにあるとなんかダメっぽい）
2. USBはホスト側と相性問題が結構あります。USBのVBUSの先に整流用ダイオードをかませると認識したりしますが、1N4148とかだと電流が足りずにソレノイドがちゃんと動かなくなりますので、1S3とかの方が良いと思います。
3. VBUSの先にダイオードを入れると電圧が下がりますので、MOSFETのGATEにかかる電圧も下がります。抵抗で調整してください。 うまく動かなくなったらR4を500Ωくらいにすると改善すると思います。
4. せっかく金物に繋ぐので、アースしましょう。
5. 人の静電気の影響がすごいです。（ベルを手で覆うだけでリセットしたりする）出来る限り絶縁しましょう。

今までで一番マシと思われる４号機の配置はこんな感じです。

ソレノイドや、USBジャックや、ATTinyの位置なんかは、参考になると思います。
抵抗とかは。。。。もうちょっとましな並べ方あるだろ！とは思います。。。改善の余地ありです。

スイッチの作り方（難関）

スイッチは、とても難しいです。
だいぶん改良しましたが、まだまだまだまだ改良の余地があります。

4号機のスイッチ（ハードタイプ）は3号機のスイッチ「やわらかいぼたん」と全く違う仕組みなのですが、こっちの方が作りやすいです。ただし巧く作れると「やわらかいぼたん」の方が気持ちよさがUpします。
4号機方式は、下の写真のように、タクトスイッチが仕込まれているので、「カチッ」と言います。あ、スイッチ押したな。と判る感じ。ここがちょっと微妙なんですよね。

作り方は、また後日書きます。[T.B.D.]

デバイス（Arduino UNO バージョン）

オリジナルバージョンは、形にこだわったので、かなり面倒なことをしています。
ちょっと試してみたい、という人の方が少しは居そうな気がするので、Arduino UNOバージョンも書いてみたいと思います。

2015.02.10 追記
簡単そうだったんですが。。。。
なぜか不具合に悩まされ。。。。
難航中です。。。。
密かにオリジナル版の方が工作面倒くさいの除けば回路やファームは単純で楽かも。。。

概要とファームウェア、回路図

Arduino UNOをそのまま使えば、USBと通信する部分の回路は作る必要がありません。
Arduino UNOをMIDI化するのは簡単です。

もあ（@morecat_lab）さん作のMidi Firmware for Arduino Uno (Moco)を使います。

Arduino UNOに、ソレノイドとタクトスイッチを繋げば、同じことができるでしょう。
と、いう回路をブレッドボードを使って作ってみたいと思います。

T.B.D.

材料

T.B.D.

もし、作り方がわからなかったら。

@tadfmacまでメンションください。