顧問が書けって言ってるので書く。
GIF-Jockey部でGJ(bu)。安直なネーミングである。 大まかな流れとしては
2. バックエンドでGIFかどうかを確認する
というフローでGIFが追加されるのでスクリーン側ではそれをランダムに差し替えることでVJっぽいことをしている。このあたりはあまりつっこんだことをしていなくて、どちらかというと @sorah がキャッシュとかいろいろがんばってくれてるのでその辺のことは任せたい。今度は箱にネットワーク構築してGIF配信するみたいなこと言ってたので期待。 フロント側でがんばっているところ
エフェクト
フロント側でたぶん一番いいところはGIFのエフェクトをCSSでかけてるとこだとおもう。CSS3のフィルタを適当に調べて、使えそうなやつをピックアップしてランダムに効果をかけることでエフェクトを反映している。 こんな感じ。(すげー雑)
最初はGIFのバイナリを書き換えようとしてたんだけどめんどくさすぎて断念した。CSSフィルタ最高！！切り替えは opacity を切り替えるので対応してるだけなので、もうちょいアニメーションな感じにしたいとおもっていたりいなかったり。 GIFの表示
GIFの加工や速度調整は最初につっかかった関門で、更新が腐ってたりとかNodeでしか使えなかったりするやつが多くていろいろ試行錯誤した結果x-gifに落ち着いた。ただこれでも結構かゆいところに手が届かないことがままあるのでなんとかしたいとはおもっている。 UI
シンプルイズベストな感じでモバイルを念頭につくった。README のGIF等を参照のこと。
GIFの選定
当日はひたすらGIFを探してつっこむのが仕事になる。アニメ方面はこれはまた @sorah に任せているので自分はHardcoreがかかったときにParty Hard投げたり、VJっぽいループ素材を投げたりしている。だいたいGiphyかTumblrあたりで素材探しは事足りている。Chromeでポイポイ投げられる拡張つくろうかとおもったけど、普通にコピペするだけでいいので特になんの工夫もしていない。 ハッシュタグ付きのツイートを流す
おわりに
お手軽にVJっぽいものをするという面ではGIF-Jockey部とても便利。まだまだ開発途上なのでこれからもイベントドリブンで(jsだけに)開発を続けていきます。