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

#kosenvj を支える技術という記事がそろそろ出てきて良いと思う @neo6120 @sora_h #kosendj
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だけに)開発を続けていきます。

original: http://dev.jgs.me/2014/12/01/the-technology-behind-vj
#20141201 #1201

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

関連ページとランダムに選ばれたページ

筆者について

jigsaw(ジグソウ、1991年6月12日-)は日本のプログラマ、会社代表。本名は小林貴也(こばやし たかや)。主にウェブ、フロントエンド領域で活動している。カミング・スーン合同会社の代表社員。
さらに詳しく

寄附について

面白かったらBTCETHでの寄附をお待ちしております。
寄附のきろく