mocopi のセンサーデータを「VRChat（OSC）」の送信フォーマットで PC に送ってサクッとモニタリング（Protokol アプリを利用）

以下の記事で、mocopi のセンサーデータを「VRChat（OSC）」という送信フォーマットで PC に送れそうだと知って、まずは取り急ぎモニタリングを試してみたという内容です。

●mocopiを使ってQuest単体版のVRChatでフルトラをする方法 - Qiita
　https://qiita.com/Kazu_Sack/items/cd382f91cde24c6d9752

mocopiアプリは iPhone にインストールしたものを使い、そこから送られるデータを Mac で受信する構成です。

## 余談： 過去に OSC を扱った話
OSC に関しては、以前 JavaScript（Node.js・ブラウザ上の両方）で扱うために、いろいろ調べたり試したりしたことがありました。

その際には、以下のような記事などを書いていました（他にもあるのですが、一部抜粋して掲載）。

- [【IoTLT 2021】 ZIG SIM から送られるデータを p5.js Web Editor上で活用してみる - Qiita](https://qiita.com/youtoy/items/caca41a68ab3bff6ffa6)
- [p5.js Web Editor のプログラムから osc.js を使った OSC通信（OSC over WebSocket を利用） - Qiita](https://qiita.com/youtoy/items/45bebdfb948b3f918c05)
- [osc.js でブラウザから OSC Data Monitor に OSC over WebSocket でデータを送る（とりあえず片方向） - Qiita](https://qiita.com/youtoy/items/0f170f4f86f6d7bf52ad)
- [Node.js で発生させた乱数で自動で音を鳴らす（Sonic Pi に OSC通信でデータを送信して音を出す） - Qiita](https://qiita.com/youtoy/items/25c923e9747b21ed6283)
- [Sonic Pi による音の出力を Node.js のプログラム（osc.js を利用）から制御： OSC over UDP による通信 - Qiita](https://qiita.com/youtoy/items/a158b847b142f0a134a6)

過去に試した内容の通信部分についてざっくりと補足すると、UDP を直接扱えないブラウザ上の JavaScript の処理では「OSC over WebSocket」を使った処理を行って、Node.js のほうはシンプルな構成で通信を扱える「OSC over UDP」のほうを使ったり、という感じにしてお試しをしていました。

## OSC のモニタリングができるアプリ： Protokol
今回、サクッとデータのモニタリングをするために、データを受信する Mac側はモニタリングが行えるアプリを使いました。

具体的には、以下の「Protokol というアプリの Mac版」です。
　●Protokol | hexler.net
　　https://hexler.net/protokol

Protokol の利用手順の概要は、アプリのダウンロード＆インストール後に、OSC のタブを選び、「Enabled にチェックを入れる」・「ポート番号を mocopiアプリ側で使われる番号に変更」という感じです。
![Protokol の利用](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cd2fb453-16a1-8996-4c9b-44e2ced3dffd.png)

これであとは、mocopi のスマホアプリ側で「Mac の　IPアドレスを指定（Mac も iPhone も同じアクセスポイントに接続している状況）」・「送信フォーマットを VRChat（OSC） に設定」という対応をします。

## モニタリングを行った結果
上記の手順で、無事に Mac側でセンサーデータを取得できました。

https://twitter.com/youtoy/status/1617820167521841156

上記は動画ですが、画像でキャプチャしたものを以下に掲載します。
![モニタリングを行った結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6eb1a80f-9e60-7a5c-4a44-4e037d933355.png)

見た感じ、センサーごとに「position」・「rotation」のセットが送られてきていて、「position」と「rotation」のそれぞれで float型の 3つの値がとれている、という感じのようです。

## おわりに
まずは Protokol を用いることで、サクッとモニタリングを行えました。

ここまでくれば、あとは[過去に行ったお試し](https://qiita.com/youtoy/items/0f170f4f86f6d7bf52ad)で使ったプログラムを使い、JavaScript でデータを取得したり、通信で特定のクライアント端末・ブラウザに送ったり、というのも簡単に行えそうです！
　
### 【追記】 Node.js でデータを取得
その後、「Node.js ＋ osc.js の組み合わせで、センサーデータのログ出力」というのと、さらに「Node.js 経由でブラウザにデータを送信し、ブラウザ上の p5.js Web　Editor上でログ出力する」というのにも成功！

https://twitter.com/youtoy/status/1617841883497246721

そして、p5.js のキャンバス上の描画に反映させるテストにも成功しました。

https://twitter.com/youtoy/status/1617848318809477122

### 【追記2】 数値などのデータの意味
数値データなどの意味するところは、この VRChat のページを見れば良さそう？

●OSC Trackers
　https://docs.vrchat.com/docs/osc-trackers

### 【追記3】 mocopi（UDP）で送られるデータ
OSC より UDP でデータをとったほうが、多くの点の情報をとれるようです。

●Sony Corporation - mocopi | 技術仕様
　https://www.sony.net/Products/mocopi-dev/jp/documents/Home/TechSpec.html

https://twitter.com/mogamogamachine/status/1617843253835071489

- [mocopiの通信内容を解析してみた Vol.02](https://zenn.dev/toyoshimorioka/articles/761fe45ebe4802)
- [mocopiの通信内容を解析してみた Vol.01](https://zenn.dev/toyoshimorioka/articles/96dbe00b87601f)

### 【追記4】 公式での「OSC Tab」に関する説明ページ
Protokol の公式ページで、OSC Tab に関するページがあったのでメモ。

●Interface · OSC Tab · Protokol | hexler.net
　https://hexler.net/protokol/manual/interface-osc-tab