Negiccoを支える技術

perfumeが好きだという編集部の後輩に、『Perfumeを支える技術』という企画を作るように命じてみた。どんな本ができるんだろう（ｗ。

— SoftwareDesign (@gihyosd) 2014, 1月 16

これをみて"書かねば"と思い立ったので。NegiccoさんのライブステージでリアルタイムのWebアプリを使った演出がありました。

昨年9月の話

渋谷の2.5DへNegiSUMMIT Vol.6を観にいったときのこと。ライブステージも終わったイベント終盤、観客がスマートフォンのブラウザを操作することによって、ステージ背面に設置されているスクリーンに動作が反映されるというもの。

仕掛け1.「UST画面下のボタン」 仕掛け2. 「スマホシェイク」 方法は後ほどご説明いたします！ #Negicco ( #2_5_d live at http://t.co/yL1pjvheG4 ) ( #2_5_d live at…

— 2.5D (@2_5_d) 2013, 9月 23

現場のみなさんは入場時にURLの書かれた小さな紙を渡されており、あらかじめページを開いて待っててねとのお約束。仕掛け2のスマホシェイクのページに移動します。そのページにはNegiccoのロゴとネギイラストのみ。

こちらのサイトをスマホに表示しながら振ると、2.5Dスタジオ壁に1振り1ネギが現れます！http://t.co/amLYMMlBdy　#Negicco ( #2_5_d live at http://t.co/AowQ2kEz10)

— 2.5D (@2_5_d) 2013, 9月 23

スマートフォンを振ると、振ったぶんだけスクリーンにネギが出現するという演出。ネギは一定時間で消えるので、ちょいとした弾幕のような雰囲気に。2.5Dのライブストリーミングはアーカイブしないようなので、テキストでしか説明できないもどかしさ。

見える部分から仕組みを想像する

スマホシェイクのページはWebアプリなので、ここから裏側の仕組みを探っていきます。jQueryプラグインのgShakeを使って振動を検出し、Socket.IO経由でサーバにシェイクが起きたことを通知しています。サーバはSocket.IO→Node.jsのつかえるPaaSのひとつ、AppFogに設置。

この先は予想になります。AppFogのサーバはリレーとして使って、スクリーンに映している端末へメッセージを送る。端末側(Macだった)でアニメーションの演出をするとなると、真っ先に出てくるのはQuartz Composer。githubにQuartz Composer用のWebSocketプラグインがあったので、これを使えばサーバからメッセージを受信できそうです。ここまでできれば、メッセージをトリガーにアニメーションを描画することであのステージの演出を再現できそうです。

楽曲派のやってることと似ている

ステージ演出の仕組みを読み解いてみると、楽曲派が曲や歌詞から元ネタを探っていくのに似て楽しいということに気付きました。背景を探って奥にあるものを見つけ出してはニヤニヤするだけなんですけど、これがなぜか楽しい。なじみのある技術が、見慣れた場所以外で活用されている様子に出会うとちょっとうれしいものですね。