配信画面デザインサービスAilve Studioや、その基盤となっているOBS StudioをMIDIコントローラから操作できるデスクトップアプリを作りました。本記事では、アプリを紹介するとともに、Alive Studioから始める「配信ハック」について述べたいと思います。
Alive Studio MIDI Controllerの概要
今回開発したアプリAlive Studio MIDI Controllerは、GitHubで公開しています。
Alive Studio MIDI Controllerは、任意のMIDIコントローラーで、Alive StudioとOBS Studioを操作できるメニューバーアプリです。お手元のMIDIデバイスから、配信・収録中に必要となる各種操作を、パソコンに触れることなく操作できます。
配信・収録中は資料を表示するためのブラウザやゲーム画面、視聴者とのやり取りのためのアプリなど、ディスプレイにはOBS以外のウィンドウをたくさん表示することになります。一方で、配信・収録の開始・停止はもちろん、画面内に表示するオブジェクトを出し入れしたり、BGMや効果音を鳴らしたり、シーンを切り替えたりなど、やるべきことがたくさんあります。
OBSが常に最前面にあるわけではない状況であれこれのウィンドウを見ながら操作を行うには、パソコンとは独立したデバイスからAlive StudioやOBSを操作できると便利です。
個人的な利用法として、「情報科学のまわり道」というポッドキャストの収録に使っています。MIDIコントローラのパッドから、以下のように操作しています。
- 収録開始
- 通常の音量でBGMの開始
- 話し始める前に音量を下げる
- 話し終えた後に音量を元に戻す
- BGM音量をフェードアウトする
- 収録停止
これらの操作を、MacBookから独立したデバイスで操作したかったので作ったのでした。このアプリは、後述の通り他にも色々な使い方ができます。
アプリの使い方
アプリはElectronで作成しており、Mac版は起動するとメニューバーに常駐し、以下のようにメニューから各種操作ができるようになっています（Windows版も一応配布していますが、まだちゃんと検証できていません。ぜひ使ってみてください）。
メニューから設定画面を開くと、以下のような画面が表示されます。
まず、タブから画面を切り替えて、MIDIデバイスの設定、OBSとはWebSocketで通信するので、通信設定などをしてください。あらかじめ、OBSで「ツール」→「WebSocketサーバー設定」から、WebSocketサーバを有効にしておく必要があります（下図のようになってるとOKです）。
その後、Alive Studio MIDI Controllerアプリの設定画面で、MIDIコントローラから送信するノート番号と操作を紐付けます。対象は、OBS本体で行う各種操作と、Alive Studioの各種素材に対する操作です。
OBSについては、以下の通り様々な操作に対応しています。
Alive Studioについては、背景画像、小物素材、エフェクト、BGM、効果音など、なんでも操作できます。Alive Studioには、実はStream Deckプラグインがあり（「Stream DeckにAlive Studioを設定するには？」）、このアプリでもその機能を利用しています。
各素材には設定用に以下のようなパラメタが付与されており、それらを用いることで素材の切り替えなどができるようになっています。
このパラメタを、以下の通り貼り付けて設定します。
設定が終わると、後述の通りMIDIコントローラを通じて、ノート番号に紐づいた操作を実行できます。
MIDIコントローラの設定
MIDIコントローラはなんでもいいのですが、今回は手元にあるNovation Launchkey MK4 MINI 25を用いています。
（画像は「Novationが新しいLaunchkey MK4シリーズを発表 - DTMを超簡単に楽しめる、最強のMIDIキーボードより）
設定した音名に対応する鍵盤を叩いてもいいのですが、Launchkeyにはパッドがついているので、そちらを使う方が操作性がよいです。LaunchkeyはNovation ComponentsというWebアプリから接続したキーボードをカスタム設定できるので、以下のように上記した操作がポン出しできるように設定しました（左上の5つのパッドに設定しています）。
MIDIコントローラの入力は、MIDIデバイス設定画面から確認できるので、意図通りのノート番号が出力されているかどうかはそちらで確かめるようにすると便利です。
準備が終わったら、鍵盤やパッドから設定したノート番号を送信してみましょう。Alive StudioやOBSに対してMIDIコントローラから設定した通りの操作を行えるようになるはずです。快適なAlive Studio生活をお楽しみください！
「配信ハック」のすすめ
先述の通り、このアプリはAlive StudioのStream Deckプラグイン（「Stream DeckにAlive Studioを設定するには？」）のために用意した仕組みをハックして実現しています。実は、Alive Studioは、このようにWebSocket経由で様々な操作が可能になっており、アイディア次第で面白いサードパーティアプリを作れるようになっています。
また、pepabo/alive-project-obs-pluginsでは、配信をもっとおもしろくできるフィルターを多数公開しています。Alive StudioのSNS担当ディレクターがたくさん作っていたりします（「職種の壁を超える! Alive ProjectのAI活用事例を紹介 - Pepabo Tech Portal」をご参照ください）。
昨今「バイブコーディング」と呼ばれるように、コーディングAIエージェントによって様々なアプリケーションを、アイディア次第でかなり複雑なものまで作れるようになってきました。本記事で紹介したアプリも、そうして作られたものです。ぜひ皆さんも、Alive Studioを便利に使うことを通じて、ほしい物を自分で作る「配信ハック」に取り組んでみてはいかがでしょうか。おもしろいですよ。
バイブコーディングには、コンピュータをただ使うだけでなく、操作可能なものとして思いのままに扱えるようになるという良い面があると思います。私のポッドキャストのエピソード「自分のための道具を自分で作るということ」で、そのあたりのことも話してみたので、よかったら聴いてみてください。
Discussion