Kaihatsu

#kosenvj を支える技術(フロント編)

https://twitter.com/asonas/status/538995926514167808

顧問が書けって言ってるので書く。

http://kosendj-bu.in/

高専DJ部という部活動で副部長をやっていて、勝手に自分がエモくなる話をして勝手に泣いたりGIFでVJをしたりしている。#1ではtumblrと連動させたシステムを構築したけれど、いまいち不評だったのとそのときにVJをしていた @mactkg が不在だったのでフルスクラッチした経緯のものです。

https://github.com/kosendj/gj

GIF-Jockey部でGJ(bu)。安直なネーミングである。

大まかな流れとしては

  1. 誰かがGIFのURLを投稿する
  2. バックエンドでGIFかどうかを確認する
  3. GIFだったらURLをRedisにつっこむ
  4. それをトリガーにWebsocketでスクリーンに通知おくる
  5. スクリーン側はキューを更新する

というフローでGIFが追加されるのでスクリーン側ではそれをランダムに差し替えることでVJっぽいことをしている。このあたりはあまりつっこんだことをしていなくて、どちらかというと @sorah がキャッシュとかいろいろがんばってくれてるのでその辺のことは任せたい。今度は箱にネットワーク構築してGIF配信するみたいなこと言ってたので期待。

フロント側でがんばっているところ

エフェクト

フロント側でたぶん一番いいところはGIFのエフェクトをCSSでかけてるとこだとおもう。CSS3のフィルタを適当に調べて、使えそうなやつをピックアップしてランダムに効果をかけることでエフェクトを反映している。

https://github.com/kosendj/gj/blob/master/public/js/screen.coffee#L2-L45

こんな感じ。(すげー雑)

最初はGIFのバイナリを書き換えようとしてたんだけどめんどくさすぎて断念した。CSSフィルタ最高!!切り替えは opacity を切り替えるので対応してるだけなので、もうちょいアニメーションな感じにしたいとおもっていたりいなかったり。

GIFの表示

GIFの加工や速度調整は最初につっかかった関門で、更新が腐ってたりとかNodeでしか使えなかったりするやつが多くていろいろ試行錯誤した結果x-gifに落ち着いた。ただこれでも結構かゆいところに手が届かないことがままあるのでなんとかしたいとはおもっている。

UI

シンプルイズベストな感じでモバイルを念頭につくった。README のGIF等を参照のこと。

ViewのフレームワークにVue.jsを使っているだけであとは特になにもいれてない。AjaxとCSSの値いじったりするのにjQueryを使っているくらい。

GIFの選定

当日はひたすらGIFを探してつっこむのが仕事になる。アニメ方面はこれはまた @sorah に任せているので自分はHardcoreがかかったときにParty Hard投げたり、VJっぽいループ素材を投げたりしている。だいたいGiphyかTumblrあたりで素材探しは事足りている。Chromeでポイポイ投げられる拡張つくろうかとおもったけど、普通にコピペするだけでいいので特になんの工夫もしていない。

ハッシュタグ付きのツイートを流す

部長の要請でスクリーンにハッシュタグ付きのツイートを流す機能をつけた。もともとコメント流すように作ったやつの流用である。ここもWebsocketを使ったりしている。

おわりに

お手軽にVJっぽいものをするという面ではGIF-Jockey部とても便利。まだまだ開発途上なのでこれからもイベントドリブンで(jsだけに)開発を続けていきます。