2014年1月17日金曜日

Negiccoを支える技術

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

昨年9月の話

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

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

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

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

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

スクリーンショット 2014-01-17 0.19.00

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

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

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

0 件のコメント:

コメントを投稿