主なメンバー
@ina_ani
- バックエンド、フロントのJS
- 大雑把コンセプト
@Yeshi
- デザイン監督？
- HTML、CSS
@yunko0128
- ビジュアルデザイン
- クリエイティブ
やっぱデザインできる人が居ると幅が広がってよかったです。
製作経緯
今回は「せっかく七夕なので何か作ろう」ということで、Twitterのハッシュタグがいい感じに統一されているのを@yunko0128から教えてもらい( http://blog.jp.twitter.com/2012/06/twitter_28.html )それでなにかできないかと考えました。
（作業開始が14時くらいだっけ？）
僕はnode ninjaのアカウントを持ってて、それを使った何かを作りたいと思っていたので、なにかできないかと思案。
「毎時新聞」のバックエンドを作った経験があるので、あんな感じのものなら形になるだろうという事で、何かしらTwitをだらだらpushする仕掛けを提案した。
@Yeshiと@yunko0128が素敵な画面デザイン（笹がにょきにょき伸びるあれ）を考えてくれたので、JavaScriptでどうやったらできるのかを考えつつ、@YeshiとHTMLの構造について打ち合わせ。
並行して@yunko0128にはクリエイティブ（ループ可能な笹背景や画面のデザインなど）をお願いしました。
node ninjaのセットアップとTwitterAPIの部分を作っている間に@Yeshiは画面の大まかな構成をHTMLで作ってくれました。
で、僕がそれを受け取りロジックを入れる。
なんか動くものができたら、みんなに見せてテンション向上！ みたいなのを繰り返す。
とかやってると@Yeshiが追加でCSSを送ってくれたので、それを適用。 デザインは偉大だね。いい感じのCSSを当てるだけで急にそれっぽくなる。
で、@yunko0128がつくった画像を組み合わせて、大体大まかな形にはなったかなと。
でその後細かい部分をブラッシュアップしてなんとか七夕の夜までに完成しました（18時くらいだっけ？）
技術的な話
node.jsでtwitterのストリーミングAPIを叩いたやつを直接ブラウザにWebSocketで送信しています。
(express, ntwitter, socket.ioを利用)
裏側でやってるのはそれだけ。
フロントではそれを受け止めて、3つまでためた後に、笹をにょきっと伸ばして3つの短冊を表示。 の繰り返し。
アニメーションはjQueryの組み込みのもので何とかなりました。
socket.ioはWebSocketが使えない環境でも頑張って動作してくれるので、後で確認してみた所AndroidやiPhone、iPadでもちゃんと動作していました。
複数人作業
@Yeshiとは「毎時新聞」のスタイルを手伝ってもらったりしてたので、なんとなくお互いのスキルセットが把握できてたのが今回はいい感じに働いた。わりと以心伝心な感じで開発ができたのが良かった。
@yunko0128はまずこのメンバーを集めてくれたことに感謝ｗ。絵が描けるって点でもすごく助かりました。何気ない笹の絵と言ってもそうそう描けるものではなく（@Yeshiは描けたのかもだけど他にして欲しいことあったし…）やっぱ絵心とか大切だなーと思いました。
とはいえ、作成データをdropbox経由して渡すなどまだまだ改善できるところもあるので、今度はそういうところもう少しちゃんとした方法でやって行きたいと思う（たぶんそっちのほうが早い）
一発ネタを複数人でやるのは案外アリかなーと思いました。わいわい作業するのは楽しかったし、クォリティも一人で作るものよりも段違いに良い物ができたし。
またやりたいです！
サーバ側ソースコード
こちらに貼っときます
