VRChat OSCを使ってMIDI機器でVRCHATを操作する

# 目的
Windowsに接続されたMIDI鍵盤からのデータをVRCHAT OSCの入力として扱いたい

# オープンベータへの参加
Steamを開き，VR Chatのプロパティを開く.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/a58342e4-c3e7-09ad-d0c0-abf5e8480c81.png)

`open-beta - Open Beta`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/49feeb86-3d44-e3e9-468a-e7de2ac2035d.png)
画面を閉じる.
更新が走るはず.

# VRCHATのOSCが有効になっている確認
デスクトップモードでVRCHAT起動する.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/e547cbd1-4cce-f3d2-1513-785d78e0a32f.png)

`R`長押しでOptionsを押す.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/40041b15-1b56-f2b9-0384-221cd159f7ec.png)
OSCメニューが出ていることを確認する.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/0d824320-483a-0399-6aab-e1838c2bbb7d.png)
OSC Debugを確認する.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/3690cf52-d0a3-7d02-1044-fd5571213ba0.png)
このメッセージが出ればOKです.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/20e756a9-9aea-a1a9-d4a0-b084675de833.png)

`OSC was turned off in your settings ~~~`が一番最初の行に書いてあるときは..
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/0578533e-b609-c8f8-9003-1c071fc58b38.png)
もう一度OSCの画面を開いて, Enabledが有効になっていることを確認して下さい.(写真は無効の状態)
クリックすれば有効になります.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/e58d448c-00e1-ebd5-3a8f-8fe51e15a83e.png)

これでVRCHAT側の設定は一旦終わりです．
VRチャットは消さずに，デバッグの画面を出しておいてください.!



# TouchOSCをインストールする
https://hexler.net/touchosc#_
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/24131d4f-c923-1f75-711e-bfae0d94cd8c.png)
`GET TOUCHOSC`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/3b9d1efe-0ca1-9db8-8542-e6f9e3d53f7d.png)
`Windows`をクリックしてダウンロード

##起動してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/d7844776-ad62-8458-6024-91ffc95bea32.png)

お金に余裕のある人はライセンスを購入することで，開発者を援助できます.

## VRCHATへの接続を設定する
TouchOSCの`Edit`→`Connections`を選択.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/2412a4a3-9143-fe2a-94a5-e16fe148b8ed.png)

下記の画像のように設定します.(なおHostはlocalhostでは動作しないので127.0.0.1としましょう)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/8ec8891b-7689-7500-80f6-7e5fa422eeb1.png)
Doneして基本画面に戻る.

## コントロールを新規追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/09394155-97b7-82f6-8e4a-01948f438876.png)

ここでは試しにボタンを追加します.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/be771630-f469-2a3a-5132-3ade7baed558.png)

ボタンができます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/b56247fc-631f-1d18-ead5-e0ea729e6bcf.png)

## ここでTouchOSCからVRCHATへボタンのクリックイベントが送信されているかテスト
こんな感じで横につなげて確認するとわかりやすいかもしれないです．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/26bc3e1d-ac7e-8d4e-c045-182da6691b10.png)

TouchOSCの実行ボタン(▶)を押してボタンをクリックしてみます.
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/73aea8c6-b5a1-5784-4ad2-ea0c473715b1.gif)
VRCHATにボタンのイベントを送れていることがわかります．

TouchOSCの実行モードの終了は右上に小さい点があるのでそれをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/b9a3a60b-6f70-b6b5-9b09-341db7bedd87.png)


# [本題]MIDI信号をトリガーとしてOSCイベントを発火
## TouchOSCにMIDIの入力を設定する
TouchOSCの `Edit`→`Connections`→`MIDI`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/0a2cbf63-9709-fe33-9d7a-cb264b410017.png)
Browseを押して出力(Send Port)と受信(Receive) MIDI機器を設定します.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/a51bacad-1432-3865-c5b9-3174c4359c0c.png)
終わったらDoneで完了!


## MIDI監視ツールをインストールする
Protokolをインストールする.
https://hexler.net/protokol
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/d1b537e2-5ce3-e090-7e26-15aa67e975dd.png)

## MIDIノートを監視
ノート(鍵盤の白鍵，黒鍵)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/0fd37678-e359-9580-863b-e618e018e71f.png)
MIDIペダルの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/7326477e-93f9-2e07-230b-0dbe4b0cbc50.png)

`RECEIVE    | ENDPOINT(A-Series Keyboard) TYPE(CONTROLCHANGE) CHANNEL(1) DATA1(64) DATA2(79)`
は
`受信 | MIDIデバイス名 TYPE(タイプ名) CHANNEL(1) DATA1(コントローラー番号:64) DATA2(ベロシティ:0-127)で取得できます

ここで取得した数字は後でMIDI入力をマッピングする際に使います.

## MIDIの入力をOSCのイベントにする
全体GIF
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/3620e7d8-3124-4004-dae7-f80957d3299e.gif)

- ボタンをクリックして選択する.
- 右の詳細ビューから`Messages`→`MIDI`のタブを展開する.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/fd36cc7a-ebeb-860b-f165-c3dadf34ca0e.png)
Enable:有効化どうか →チェックを付ける
Send:送信トリガー   →チェックを外す
Receive:受信トリガー→チェックを付ける
Feedback: わからないけど→とりまチェックつけとく
Connections: 1でOK　MIDIの入力番号
Trigger : デフォルトでOK(写真の通り)
Type: 鍵盤なら`NOTE_ON`, ペダルとかなら`CONTROL CHANGE`で
Channel: CONSTANTを選択して, 上で確認したチャンネル (ここでは1)にする  
Note: CONSTANTを選択して, 上で確認したノート (ここでは鍵盤のC1である64)にする
Velocity: デフォでOK(x : VALUE)
Scale:これで入力のベロシティの範囲を指定する(そのままでよければ0-127)

## VRCHATのOSC DEBUGが反応するか確認
TouchOSCの実行ボタン(▶)を押します．
以下のアニメーションは右下にMIDIの反応を見るためにProtokolを,裏で動いてるのはVRCHATのORC DEBUG画面, 左下が実行中のOSC DEBUGです.
試しにC1(ド)の鍵盤を押してみたときの動きです！
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/686b23ca-95c7-476b-18ac-372022b052c6.gif)



## VRCHATのモーションに割り当てる
VRCHATに無事データを飛ばせたので，VRCHATの機能を割り当てます.
`C:\Users\{$USERNAME}\AppData\LocalLow\VRChat\VRChat\OSC\{hogehoge}\Avatars`
にアバターごとのjsonがあります.

このJSONにはinputというパラメータがあり，このアドレスに指定された型(今回はInt)を入れてリクエストを送ることで，該当の機能を使えるようになります．
`address`に記載されているアドレスをTouchOSCのボタンイベントの送信先に設定することで，OSCからアバターの機能を使用する事ができます． 

```avatername.json
    {
      "name": "VRCEmote",
      "input": {
        "address": "/avatar/parameters/VRCEmote",
        "type": "Int"
      },
      "output": {
        "address": "/avatar/parameters/VRCEmote",
        "type": "Int"
      }
    },
```
今回はVRCのデフォルトのEmote機能(`avatar/parameters/VRCEmote`)を使うことにします.(WaveとかDieとかあるあれです.)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/9b7da96a-8e0f-69ec-f63e-dad3358ace1d.png)

TouchOSCのボタンをクリックして詳細ビュー,`Control`→`Name`の値をデフォルトのbutton1から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/0c029d61-82c5-9a33-8749-b37585340d8f.png)
→最初の`/`は抜く`→avatar/parameters/VRCEmote`に変更します．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/067b10d2-acaf-aba0-9ecb-f6f6ac1286ef.png)

変更したら再度TouchOSCを実行して(▶)C1(ド)の鍵盤を押します．
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/78835bee-64cf-7b7d-75f5-692cf7607e3a.gif)



１つのパラメータに複数の機能が割り当てられていることがあります．例えば`avatar/parameters/VRCEmote`では与えるInt値によって他のClapやDieなどの機能も使えるようになります．
与えるInt値を変えるにはTouchOSCの`ボタンをクリック`→`右側の詳細ビュー`→`Messages`→`OSC`→`Scale`の範囲を変更します.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/37fe20fe-6707-aeba-8806-a985ca89ccf5.png)
これを2にすると....
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/22b2a5a0-4180-36c7-942b-b420d95f02ac.png)

![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171398/db2d61a9-88a4-4ff2-3c70-1ace77108333.gif)


# 終わりに
VRCHATを初めて2週間ほどですが，たくさんの方に優しくしていただけたコミュニティに感謝しつつ，この記事がVRCHATをさらに楽しもうとしている皆さんの助けになれば幸いです.


## 参考文献
https://note.com/bd_/n/n4279a0c08b28

https://hexler.net/touchosc/manual/editor-messages-midi#connections


## Special Thanks
@dokkozo VRCHATのモーションに割り当てる　セクションの情報提供をしてくれました.
あとアバターが非常に可愛いのでモチベーションになりました.