Ableton and Max Community Japan #070 Sound in Web Ecosystem 出演：Yuichi Yogo

Web技術で拡張する音の世界

昨今、ブラウザの進化とともにWeb技術を用いたオーディオ表現は急速に発展しています。 これまでC++での開発が一般的で、GUI実装に多くの工数を要していたVSTプラグインの世界の常識を塗り替えようとしています。

「Web技術でVSTのGUIを描画する」「Webブラウザ上で本格的なオーディオ処理を行う」

これらのアプローチは、オーディオエンジニアにとってはGUI開発の効率化を、Webエンジニアにとってはオーディオプラグイン開発への参入障壁を劇的に下げる可能性を秘めています。

今回のAMCJは、「SOUND in Web Ecosystem」と題し、Web技術と音の交差点を探求します。

Web技術のオーディオ利用を全網羅

・Web技術の全体像を紹介 Web Audio APIから最新のWasm活用まで、音を扱うためのWeb技術スタックを整理します。
・ライブコーディング：Web技術でVST開発 JUCEとWebviewを用いて、実際にWeb技術（HTML/CSS/JS）でGUIを持つVSTプラグインを作り上げる過程を実演します。
・本音で語るアフタートーク 「結局、Webじゃレイテンシーが厳しいんでしょ？」「ネイティブに勝てるの？」といった疑問や懸念をぶつけ合う、技術者同士のディープなトークセッションです。

これらのセッションを通じ、Webとオーディオの融合がもたらす新しいエコシステムを体感してください。 エンジニアのバックグラウンドを問わず、音と技術に興味がある方の参加をお待ちしています。

⚠️ハンズオン（一緒に手を動かす）形式での参加を希望される方は、事前の環境構築が必要です（下記「参加に必要な持ち物」参照）。聴講のみの参加も大歓迎です。

https://www.youtube.com/watch?v=dmuGdcnmobM

＜開催概要＞

日程：2026年1月31日(土)　open 13:45 / start 14:00 （3時間程度を予定）
＊アーカイブ配信期限：2026年2月11日(水)23時まで
出演：Yuichi Yogo
会場：御茶ノ水RITTOR BASE ( Google Maps )、配信あり
主催：Ableton and Max Community Japan / リットーミュージック
協賛：Cycling’74
フライヤーデザイン：Hina Nakamura (https://www.instagram.com/hina.nmmm/)

This seminar will be conducted in Japanese. Please note that there will be no English subtitles.

＜タイムテーブル＞
14:00 – レクチャー 『Webの技術を全部紹介します！』
15:15 – ライブコーディング 『Webの技術でVSTをつくってみよう』
16:00 – アフタートーク 『”結局〇〇はWebでは出来ないんじゃないの！？” をぶつける会』
以降、オフ会を予定しています。（会場参加者のみ、予算3,000円ほど）

＜こんな人におすすめ＞
・Webで音を鳴らしてみたい人
・VSTを作ってみたいWebエンジニア
・VSTのGUIをより楽に、柔軟に描けるようになりたい人

＜参加に必要な持ち物＞
これらのソフトウェアがインストールされたパソコンの持参をおすすめします。
・JUCE
・node.js

＜参加者へのメッセージ＞
Webは好きですか？
C++で音を作ってきた人ほど、UI・マルチプラットフォーム・ビルド・テストまわりで「毎回つらい」と感じたことがあるはずです。
一方で「Webやフロントエンドは苦手」「DAWの世界にWeb？」という違和感も、すごく自然だと思います。
このセッションでは、CSS/SVG/Canvasや宣言的UI（React/Vue）がオーディオ開発の文脈でなぜ効くのか、Web Audio APIやWebAssembly(WASM)とどう繋がるのかを、なるべく手触りのある例で翻訳していきます。
後半にはライブコーディングの時間を設けて、実際にVSTをWebベースの技術でリアルタイムで爆速でつくっていく様子を見せながら、設計の勘所やハマりどころも含めてカジュアルに共有します。
また、会の後半には、エキサイティングでスペシャルなサプライズをひとつ用意していますので、お楽しみに！
ちなみに、私はコーディングや制作にAIを使うことを、積極的に応援します。
ライブコーディングセクションでは、2026年現在において、AIを使ったコーディングが向いている/向いていない分野についても触れつつ、実際にどのように開発に落とし込むとよいか、私なりのワークフローをカジュアルに共有します。