#kosenvj を支える技術(フロント編) - dev.jgs.me

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

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

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

大まかな流れとしては

URLを投稿する

Redisにつっこむ

Websocketでスクリーンに通知おくる

キューを更新する

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

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

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

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

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

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

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

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

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

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

#20141201 #1201

これも5年前かあ... #20190220