ScrapboxでVJするためのChrome拡張を作った - hitode909の日記

1月のKyoto.JSの休憩時間にMIDIコントローラとWeb MIDI APIでVJできるとよさそうって話になったので買ってみて、ちょっとずつ触ってみた。過去に作ったツールをMIDI対応する、とか、MIDIの入力に応じて絵を出す、という使いみちに加えて、既存のページにコードを差し込んでエフェクトをかけるのを作ってみた。 Scrapboxにエフェクトをかける Scrapboxのプロジェクトのトップページには四角いカードが並んでいるので、これをパーティクルとみなして毎フレーム見た目を書き換えると愉快なビジュアルを出せると考えた。 MIDIコントローラで操作するために、動きのパターンを座標、大きさ、色、背景、ページ全体の変形、などチャンネルがいくつかに整理して、縦フェーダーでエフェクトの種類がかわり、各チャンネルに対応するつまみでエフェクトの掛かり具合が変わるようにした。 こういう構造があって

[june29]

2020 年代にもなると人間が div に合わせてジャンプする。いい時代になった。

[amagitakayosi]

部署定例のScrapbox振り返りコーナーで使いたい

[decobisu]

めっちゃ良い

[tk_musik]

かっけぇ。パクりたい

[tukaelu]

かっこよすぎる

[namelaw]

最高

[yarumato]

“Chrome拡張は以前遊びで作っていた当時ととくに変わりなかった。manifest.jsonで必要な権限とか起動する対象のページを決めて、contentScriptを使うとページのコンテキストでコードを実行できたり”

[mizdra]

良すぎる

[kamawada]

“当日、Scrapboxをぽんと開いたときは、聴衆の反応は、え、ここからどうするの、みたいな反応だったけど、音に合わせてdivをジャンプさせると、みなジャンプするdivにあわせてジャンプしたりと大喜びだった”

[Pasta-K]

あれは最高だった

[utgwkk]

驚き最大でめちゃくちゃよかった！！