ZIG SIM と Node.js のプログラム（osc.js を利用）との間で UDP による OSC通信を軽く試す（OSC Data Monitor の話も）

この記事は Node.js による OSC通信を試してみた時の話で、以下の記事を書いていた流れの続きです。

- [ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】 - Qiita](https://qiita.com/youtoy/items/efe9b07be57454dec5d5)
- [ブラウザ上の p5.js のプログラムで OSC を使う（サーバー・クライアントは osc-js で実装） - Qiita](https://qiita.com/youtoy/items/b537b5c9c5b4465d23b3)

送信側にはスマホ（iPhone）を使い、受信側にはノートPC（Mac）を使います。

## 今回利用するもの
### 構成
冒頭に書いた機器間で OSC （over UDP） による通信を試すのですが、その際に以下のアプリ・ライブラリを使います。

- スマホ（iPhone）
   - [ZIG SIM](https://zig-project.com/)
- ノートPC
   - [OSC Data Monitor](https://www.kasperkamperman.com/blog/processing-code/osc-datamonitor/)
   - Node.js のプログラム（[osc.js](https://github.com/colinbdclark/osc.js/) を利用）

### 個々のアプリ・ライブラリの補足
#### ZIG SIM
ZIG SIMは、以下の[公式サイト](https://zig-project.com/)の記載に書かれているとおり、プロトタイピングに便利なアプリです。
スマホのセンサーで取得された値を、簡単にネットワーク経由で送ったりすることができます。
![ZIG SIMの公式サイト](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/93ef9eb8-4b90-084a-40c8-aed7f99866ea.jpeg)

このアプリは App Store と Google Play の両方で、iOS・Android用にリリースされています。
両OS用の無償版が出ているのと、さらに iOS版については機能が足された有償の Pro版が提供されています。

今回は [iOS用の無償版](https://apps.apple.com/jp/app/zig-sim/id1112909974) を使います。

#### OSC Data Monitor
[OSC Data Monitor](https://www.kasperkamperman.com/blog/processing-code/osc-datamonitor/) は、OSC経由で受信したデータを表示してくれるアプリです。
![OSC Data Monitorのページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/02b83cf8-aa45-1366-fa89-b65cebab2eb0.jpeg)

Windows、Mac、Linux　のそれぞれの OS向けに提供されています。

今回、スマホの　ZIG SIM からノートPC へ正常にデータが届いているかどうかを確認するために、こちらを利用します。

#### osc.js を使った Node.js のプログラム
[osc.js](https://github.com/colinbdclark/osc.js/)　を使い、OSC over UDP で送られたデータを受信するシンプルなプログラムを作ります。

[osc.js の「UDP in Node.js」と書かれた部分](https://github.com/colinbdclark/osc.js/#udp-in-nodejs)に利用できそうな情報が書かれているため、こちらを利用していきます。
![osc.js の「UDP in Node.js」](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/02052b4d-845b-9a78-a85f-4632c0812863.jpeg)

## OSC を用いた通信を試す
### ZIG SIM と OSC Data Monitor との間での通信
まずは、ZIG SIM から OSC Data Monitor へデータを送ってみます。

ノートPC側で OSC Data Monitor を起動すると、画面左上に IPアドレスが表示されます。
また、その下の「NOW LISTENING TO OSC PORTS:」と書かれた部分にポート番号が表示された状態になっていると、アプリで既に待ち受けをしている状態になります。

![OSC_Data_Monitorを起動](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/eda7159f-8bb0-d2f7-b0c5-64647d0e6f15.jpeg)

この状態で ZIG SIM側の設定を行ってみます。

「Sensorタブ」を選び、その中の適当なセンサーを選びます。
以下はジャイロを選んだ例です。
![Sensorタブ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2ffad31b-04d3-3dd2-e819-c11ad4020704.jpeg)

「Settingsタブ」を開き、OSC over UDP を使うように設定します。
また、先ほどの OSC Data Monitor の画面上に表示されていた、IPアドレスとポート番号を指定してください。それと、DEVICE UUID はデフォルトでも良いですが、書きかえてしまっても問題ありません。
![Settingsタブ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c241f61f-bc38-777c-9262-72a7555dec04.jpeg)

そして「Startタブ」を押すと、通信が始まります。
画面上には、送信しているデータの内容が表示されます。
![Startタブ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2aa773f1-f11a-06bb-e2ce-d8fe521a7a68.jpeg)

そして、OSC Data Monitor側の表示を見てみると、以下のように ZIG SIM から送られたデータが表示されています。
受信したデータには、ZIM SIM の設定画面で指定した DEVICE UUID を含むジャイロの値が書かれているのが分かります。
![OSC_Data_Monitorのデータ受信時の画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/36f15b08-aa53-0387-6a97-f7d849e43503.jpeg)


### osc.js を使った Node.js のプログラムでデータを受信する
今度は、osc.js を使った Node.js のプログラムでデータを受信してみます。

プログラムを書いていく前に、npmコマンドで osc.js をローカルインストールしておきます。

```bash
$ npm install osc
```

プログラムに関しては、公式ページの「UDP in Node.js ＞ Sample Code」の部分に書かれたコードを見て実装してみます。
![サンプルコード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/79b5e8f1-60fb-5a60-68f5-b15614a1a96b.jpeg)

上記のプログラムの送信処理を削ったり、少し変更をしてみました。
以下が変更後のプログラムです。

```javascript
const osc = require("osc");

var udpPort = new osc.UDPPort({
    localAddress: "0.0.0.0",
    localPort: 8000,
    metadata: true
});

udpPort.on("message", function (oscMsg, timeTag, info) {
    console.log("An OSC message just arrived!", oscMsg);
    console.log("Remote info is: ", info);
});

udpPort.on("ready", function () {
    console.log("ready");
});

udpPort.open();
```

上記のプログラムを実行し、OSC Data Monitor を使った時と同じように、ZIG SIM から送られたデータを受信してみます。
以下のように、無事にデータを受信することができました。
![Node.jsのプログラムで受信.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1faf9d47-b53d-2f80-d9fa-f0e32a57ae99.jpeg)

## まとめ
今回、スマホ用の ZIG SIMアプリと、PC用の OSC Data Monitor・Node.js のプログラム（osc.js を利用）との間での OSC を用いた通信を試しました。

今後は、他のパターンも試すために、以下下のサンプルなどを見ていこうと思っています。

●colinbdclark/osc.js-examples: Sample code illustrating how to use osc.js in a variety of scenarios.
　https://github.com/colinbdclark/osc.js-examples

### 余談
今回、当初は osc.js　ではなく、前回の記事で使った osc-js を使おうとしました。
でも、UDP を用いた通信がうまくいかず、自分の実装・使い方がまずいだけかもしれないですが、osc.js　を使ってやってみることにしました。