Fusic Developers Weblog

こんにちわ、Fusic新卒のカワサキです。
だいぶ投稿が遅れてしまいましたが、先日の忘年会2013のお話!

10周年記念パーティーのときもそうでしたが、弊社ではなぜか行事ごとに力をいれていて、IT会社らしくITを使って何かやるというのが「仕来り」になってきています笑

ということで今回も
・みんなが知っているゲーム
・ルールが単純
・チーム対抗で楽しめる
を前提に幹事チームで考えた結果、アタッ○25「っぽい」ゲームをやってみましたw

使用した技術

Pusher(pusher.com): 早押しボタンなどのリアルタイム通信のため
Sinatra: Pusherのサーバ側、Publishや認証のため
MongoDB: パネルの状態保持のため
Grunt: CoffeescriptとかLessのコンパイル自動化のため

今回はPusherにリアルタイム通信周りを「おまかせ」したおかげで、ほとんどサーバサイドが必要なく、Html・CSS・Javascriptのクライアントサイドアプリになったかなという感じ。
なのでRubyは最低限必要部分だけで、メインはSinatraのpublicディレクトリにGruntでクライアントサイド開発をしやすい環境整えて、開発していきました。

実際Pusherのおかげでリアルタイム通信部分はほんとに少ないコードで書けて
・Sinatra側でPublish用のメソッドを用意
・JS側でチャンネル・イベントのバインドとAjaxでのデータPOST
だけで、簡単にリアルタイム通信を行うことができました！

例えば、早押しボタンを例にすると

Sinatra側のPublishメソッド

1
2
3
4
5
6

# server.rb
post '/pusher/publish' do
  Pusher.trigger('channel-name', params[:event],
    params[:contents]
  )
end

Ajaxで早押ししたチーム色のPOST

1
2
3
4
5
6
7
8
9
10
11

# buzzer.coffee
$('#buzzer').on 'click', 'a', ()->
  $(@).attr('href', "##{color}")
 
  $.ajax
    type: 'POST'
    url: '/pusher/publish'
    data:
      event: 'attack:buzzer'
      contents:
        color: color

早押ししたチーム色の音をならす・一番早かったチーム以外受け付けない排他制御・回答者を点滅

1
2
3
4
5
6
7
8

# panel.coffee
channel.bind 'attack:buzzer', (data)->
  return if fastest
  fastest = data.color
 
  playPlay('panel-' + fastest) #早押ししたチーム色の音をplay
 
  flashOn(fastest) # 回答者点滅

のような感じで、簡単にリアルタイム通信を行えます。

また幹事チームの役割分担もけっこううまくできて

上司W: 当日の進行・景品の準備・音源の獲得。
上司O: パネル画面の実装・映像問題作成。
僕: サーバ側・早押しボタン・ポイント画面の実装。

といった感じで役割分担し、全体の構成や問題についてはみんなで話し合って進めていきました。

あと今回最後の映像問題の答えが「黒田官兵衛」だったので、昼休みにわざわざ福岡城に撮影しにいったり、先輩たちに「無理やり」筑紫もち早食いさせられたりと、良い?思い出があったりしますw

当日もよりリアルな雰囲気を再現するため、幹事はコスプレしたのですが、なぜか白髪のおじさんじゃなくて「バーコードハゲ」だったり、アナウンサーではなく「女子高生」だったり、なぜかなぜか「お地蔵さん」がいたりとなかなか面白かったです笑

感想やまとめ

・当日は思った以上にみんなが真剣にクイズとか考えてくれたし、盛り上がってよかった。
・無駄にアタッ○25に詳しくなった。例えばパネルがめくれる際の音は赤・白・青・緑、全ての色で違うとかw
・幹事チームのメンバーは普段案件とかであまり関わりがなかったので、短い期間ですががっつり絡めてよかった。
・普段業務で使ったことがなかった技術、今回でいえばPusherやGruntなど使えて勉強になった。

以上、次回の行事ごとにも期待です！