2011年12月16日金曜日

node.js + socket.io + Arduinoでイイネ!



eXtreme Hagoで使われていた、リアルタイムに「いいね」と出すあのシステムをパクりました。


node.js + CoffeeScript + express + node-arduino + MongoDBで出来てます。


デモ動画



動機


ITfrogsとLexuesAcademyの懇親会でくまさんがいいねと同じの200分で作った!と言ってたので僕も作りたくなった。


これが@さんがつくったやつ。


higumachan/iine ? GitHub


本家のイイネに加え、グラフ機能つき。


開始時間と終了時間にぽちっとボタン押すとグラフが表示され、どこで盛り上がったか一目瞭然。


こんなすごいの「200分で作った」なんて言われたら僕も作りたくなっちゃうでしょ!!


僕が何か1つ機能を付け加えるなら何がいいか?


「そうだ、リアルにボタン押す機能でも作るか」


出来ました。


f:id:h6n:20111216035307j:image:w360


ソースコード


hanachin/iine_duino ? GitHub


※何分で出来たかは秘密です


解説


僕はCoffeeScriptにハマっています。ちゃんと使ってみたい。


CoffeeScriptが書ければJavaScriptも書ける。


JavaScriptが書ければnode.jsが使える。


なので、CoffeeScript + node.jsで作成することに決めました。


ウェブサイトを表示する

ウェブ側はexpressを使って表示することにした。


理由:




  • 直接書くのは多分面倒

  • Sinatra-likeで学習コストが低そう

  • 持ってる本(パーフェクトJavaScript)に例がのってる


本のサンプルを動かしながら使い方を覚えさくっと開発環境を整える。


リアルタイムにイイネを出すために

Nodeが使えればsocket.ioが使える!!


ということでsocket.io使えば楽勝でした。


ただし実際にコード書くよりも使い方を調べる方が時間かかった。


socket.ioを使う理由:




  • リアルタイムに通信したいから

  • 自分でリアルタイムに通信出来るように一から書くより簡単、確実、便利、安心

  • 使ってみたかった


グラフを表示するために

くまさんはjqplotというライブラリを使っていたので僕もそれを使うことに。


グラフを表示するためには記録が必要、なのでMongoDBを使うことにしました。


理由:




  • RDBを設定するのが面倒だった

  • 既にmongooseというライブラリがある

  • 本に例が載ってる


イイネが押された時刻だけを記録するシンプルなデータベースです。


まず、開始時刻と終了時刻を含んだURLにアクセスすると、その間のイイネを集計してJSONで返すようなAPIを作った。


あとはグラフを表示する側からそれを叩いて、jqplotに渡すだけ。jqplot便利ですね。


リアルにボタンを押すために

ボタンをArduino経由でPCに接続しようと考えた。


押せればなんでもいいので100円ショップでプッシュライトボタンを買います。


Arduinoとnode.jsをつなぐにはnode-arduinoを使います。


普通にnpm install arduinoで入れると、digitalRead(入力)が使えなくてハマってました。


Forkされてるこちらのリポジトリを使いましょう。


hapticdata/node-arduino ? GitHub


後は、ボタンを分解してスイッチのところにつなぐだけ。簡単ですね。


Tips等



  • Guardを使うとCoffeeScriptを勝手にコンパイルしてくれる。coffee -wcでやるよりも便利。

  • node-devを使うとJavaScriptファイルが更新されると自動でサーバーを再起動してくれて楽。

  • プッシュライトはLEDが3つついてるんだけど、どうやって光らせるか誰か教えてください。(Arduinoじゃ電流足りないよね?)


反省点


3つあげると




  • コード書くのに時間をかけすぎた

  • ブログの解説がざっくりすぎる

  • ブログ書くのも旬なうちじゃないと書けない(なので早く製品を作ろう)


まとめ




  • CoffeeScriptでイイネシステムが書けた。

  • expressを使うと簡単にウェブアプリが書ける。

  • socket.io使えばリアルタイムに通信が出来る。


    • どうやって通信するか考えなくて済むのでリアルタイム性の高いものがすぐ作れる。



  • jqplotは見栄えのいいグラフをさっと作れる。

  • node-arduinoを使えばnode.jsとArduinoを連携出来る。


    • ソフトウェアだけでは出来ないことが出来るようになるかも。




オリジナル版と、くまさんの作った奴がなかったら作れなかった。ありがとうございます。


作ってる途中、失敗がいくつもあったけど最終的にボタン押して出来るようになると超楽しかった。


もっと電子工作、はんだづけやってみたい!


もっと聞きたい事、詳しく書いてほしい事があれば@までお願いします。





0 件のコメント:

コメントを投稿