Webブラウザで動く VJツールをつくる

2025/11/12(水) Studio株式会社で開催された「Web UI 実装勉強会 #2」 https://ui-devs.connpass.com/event/369228/ にて発表したLTスライドです。

Transcript

1. Webブラウザで動く VJツールをつくる Web UI 実装勉強会 @Studio inc. 福岡 陽 @AKIRAFUKUOKA #web_ui_devs 2025.11.12. Wed
2. 福岡 陽 @AKIRAFUKUOKA DESIGNER BRAND STRATEGIST KOEL DESIGN STUDIO RAW-Fi ZINES 02 デザイナー、ブランドストラテジスト。10年前はデザインだけでなく、フロントエンド、バックエンド含むさま ざまなコーディングを行なっていましたが、近年ではほとんど触れる機会がなく勝手に危機感を感じています。
3. RAW-Fi ZINES ゲームとデザインをテーマにした同人誌/ZINEレーベ ル。スプラトゥーンやエルデンリングなどストーリー テリングやゲームデザインの視点から解釈した同人誌を 定期的に発刊。そのほか、毎週木曜日に無料のニュース レターを配信中。 IG: @raw_fi_zines X: @raw_fi_zines ZINES.RAW-FI.COM
4. VJ活動 10年以上、秋葉原MOGRAで定期開催さ れているイベント『秋葉原重工』のレジ デントVJを担当しています。 今年10月には『Lost & Find』という静 岡・龍山秘密村で行われた屋外イベント にも参加しました。 そもそもVJとは？ Visual Jockey。音楽イベントなどで会 場を盛り上げるために映像を流す役割 を担う人のこと。 プリレンダされた映像ファイルを切り 替えるだけでなく、最近では TouchDesginerやUnityなどを用いて リアルタイムに映像を生成する「ジェ ネラティブVJ」が流行しています。 2022年から開催されているイベント draw(); は代表的なイベント。 04
5. 05 VJソフト、 HTMLで作れるんじゃね？ VJのためのツールはResolumeや が、私のプレイスタイルは「複数の映 VDMX、100円で使えるiOS/iPad OS 像を切り替えるだけ」「元の映像をな 向けアプリ100VJ、Sainaさん るべく見せるためにエフェクトはなる (@SainaKey)が個人で作られている べく使わない」ので高度なツールは必 SynapseRackなど既に十分に素晴らし 要ない…それくらいならHTMLで作れ いツールがたくさんあります。 るんじゃね？ Resolume VDMX SynapseRack 100VJ
6. 07 WebSocketで Window間通信 PC 早い話が動画ファイルの再生が切り替 video-1 video-2 映像を操作するコントローラーと、プ えられればいいので、videoタグの再生 ロジェクターなど外部映像機器に投影 をコントロールするインターフェースを するための2つのウィンドウが必要にな video-3 video-4 作成します。 /index ります。 複数の映像を再生しながら、アクティ 2つのウィンドウ間の通信は（もっとい ブな映像だけが出力されるような仕組 い方法があるのかもしれませんが） みを構築します。 Web Socketで行います。 WebSocket /viewer video-2 ⚫︎ ⚫︎ ⚫︎ DISPLAY ⚫︎ ⚫︎ ⚫︎ インターフェース、 動画再生まで React+Next.jsで構築 HDMI
7. hoo
8. Launchpadを イメージした 8トラック再生 MIDIコントローラー での操作に対応 複数の映像素材をプレビューしながら 8x8パッドを持つMIDIコントローラー 映像の切り替え、次の展開への準備を Launchpadに対応。ボタン操作で即時 行うために8個のトラックを同時再生す に素材選択・表示切り替えを行うほ るインターフェースを用意。8x8の素材 か、映像のシークや、再生速度変更な を交換することで素材の一覧性も確保 どもパッド上から行えるようにしまし しました。 た。 07
9. 08 (Play) 実演
10. 09 このままだと「作りました！」以上の話にならないので 考えていることを少し話します
11. 10 瞬時に判断が必要なUIに アニメーションは必要か？ アニメーションしているテキストやボタンは ユーザーの判断を遅らせる可能性がある（かも） VJはかかっている楽曲の一拍で次のア スマホアプリをはじめとした一般的な クションを判断していく。BPM 130と UIにそれほどの緊張感を持った状態で すれば一拍0.46秒。その時間の中で判 の操作が求められることは少ないで 断する上で、UIのアニメーションが意 す。基本的にマイクロインタラクション 思決定を妨げる可能性があるかも？ がユーザーの体験を向上させるケース が多いことも間違いないと思います。 BPM 130 : 1 beat = 0.46sec
12. 11 タッチスクリーンや キーボード/マウスではない インプットデバイスを使ってみる MIDIコントローラーは いろいろ面白い LaunchpadはWeb MIDI API経由でパ 入力デバイスとしての便利さでいえ ッドのMIDI入力が取得できるだけでな ば、ツマミやスライダーがあるタイプ く、LEDの発光パターンもMIDI出力で のMIDIコントローラーの方も有用。ポ 変更が可能。ウィンドウにフォーカス インティングデバイスやキーボード以 しなくてもイベントが発火するのも強 外のインターフェースを一度使う経験を み。 してみるのオススメです！WebHID Novation Launchpad Pro MK3 Novation LaunchControl XL 3 AKAI MPC mini MK2 Xbox Controller / Joy-Con APIとかもありますし。
13. 12 まとめ HTMLで作れる 映像ツールの可能性 汎用的なインターフェース を自作する良さ UI制作のしやすさと適度な表現力があ WebMIDI APIなど（セキュリティの観 特殊なスライダーなど、HTML標準のコ 今後ジェネラティブなVJツールを作る ることを考えるとHTMLもビジュアル 点で論じる余地があるとはいえ）拡張 ンポーネントでは対応が難しいものを 際にも転用したいと思います。 制作・補助のツールとして十分有用で 性も広く、できることがまだまだある 気軽につくることができました。 あると感じます。 という印象です。
14. 13 お知らせ 11.23(Sun) 秋葉原重工 40 あります 福岡の出番では本日発表したツールを 使いますので興味がある方は11月23日 に秋葉原MOGRAへぜひ！