ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】

こちらの、非公式の toioユーザーコミュニティのもくもく会を開催してる中、試した内容を記事にしてみました。
「JavaScript を使って、かつブラウザ上でも動くもの」というのが自分のやりたい内容です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こちら、開催中！<br><br>●toioで作ってみた！友の会（非公式）第10回オンラインもくもく会 - connpass<br>　<a href="https://t.co/wUZJsZ8657">https://t.co/wUZJsZ8657</a><a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://twitter.com/hashtag/toiotomo?src=hash&amp;ref_src=twsrc%5Etfw">#toiotomo</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1439460214818807811?ref_src=twsrc%5Etfw">September 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">手を出してみるかな。<br><br>●osc - npm<br>　<a href="https://t.co/f7LEHnx8jl">https://t.co/f7LEHnx8jl</a><a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://twitter.com/hashtag/toiotomo?src=hash&amp;ref_src=twsrc%5Etfw">#toiotomo</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1439460749626073088?ref_src=twsrc%5Etfw">September 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## OSC　を扱える JavaScriptライブラリ
### ライブラリの調査1： osc.js
最初にやったことは、ライブラリの検索でした。
そして [npm search で「osc」をキーワードにした検索を実行](https://www.npmjs.com/search?q=osc)すると、以下の結果が得られました。

![npm search で「osc」をキーワードにした検索の結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b650e759-ab43-a968-ea01-8201d8e6eae2.jpeg)

[一番上に出ている osc.js](https://www.npmjs.com/package/osc) の説明に、「A JavaScript Open Sound Control (OSC) library that works in Node.js and the browser.」と書いてあり、最終更新も 2ヶ月前となっていて開発が止まっている感じでもないため、こちらを見てみることにしました。

#### ブラウザで利用するために
osc.js のページ内を見ていくと、以下の表が掲載されていました。
ブラウザで動かす場合、over WebSocket という形になるようでした。

![E_n-WxQVcAMVkXe.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/66fd08d9-794a-ce51-899a-6325401d24eb.jpeg)

そして、ライブラリを CDN から読み込めないか探してみたところ、最新版を読み込めそうな以下のものが見つかりました。

●osc CDN by jsDelivr - A CDN for npm and GitHub
　https://www.jsdelivr.com/package/npm/osc

#### サンプルを探す
osc.js のサンプルのリンクがあり、以下にいろいろ掲載されているようです。

●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のサンプル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/be8993ee-5fb5-8aba-497b-810441105642.jpeg)

また、osc.js のページ内にも以下のようにサンプルコードが書かれている部分があったりしました。
![ページ上のサンプル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c805842e-64d5-b68b-44f9-44b8850690fd.jpeg)

### ライブラリの調査2： p5.js用
最近、よく使っている p5.js で使う場合に活用できそうなライブラリがあるかも見てみます。
GitHub上で p5.js 用のものを検索してみました。

![GitHub上で p5.js 用のものを検索](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6ab325dc-9cf3-74f2-3fb8-b5f3338360bd.jpeg)

上から見ていくと、このあたりが該当しそうでした。

●genekogan/p5js-osc: OSC for p5.js with examples
　https://github.com/genekogan/p5js-osc

●lilyinstarlight/p5-osc: OSC bridge and library for p5.js
　https://github.com/lilyinstarlight/p5-osc

ざっくり見た感じ、osc.js　を直接使っても良いかも、という気もしてきました。

### ライブラリの調査3： osc-js
もう少し、別のライブラリも探してみました。
[npm search　での検索キーワードを「osc browser」にして実行してみたところ](https://www.npmjs.com/search?q=osc%20browser)、osc-js というものも出てきました。
![osc_browser_-_npm_search.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5fc95c05-b36b-8d4f-3cb1-a7636c301337.jpeg)

　●osc-js - npm
　https://www.npmjs.com/package/osc-js

[調査1 であげていた osc.js](https://www.npmjs.com/package/osc) と何が違うのか、少し見てみます。

#### osc.js との共通点・違い
まず CDN について調べてみると osc-js のほうも以下から読み込みができるようです。

●osc-js CDN by jsDelivr - A CDN for npm and GitHub
　https://www.jsdelivr.com/package/npm/osc-js

また「No dependencies (except of ws in Node.js or similar environments)」と書かれているように、通信部分で外部ライブラリに非依存となっているようです（osc.js で WebSocket を使う場合は「ws」を使うようでした）。

対応する通信方法について osc-js は「UDP と WebSocket」になるようで、一方 osc.js はその 2つ以外にもシリアル通信が使えるという記載がありました。
それと、osc-js のほうで「Special bridge plugin for easy communication between UDP- and WebSocket clients」という記載があるので、UDP と WebSocket を併用する場合に便利に使えそうな感じです。

それと、ブラウザ上で利用する場合のサンプルは、以下のような感じになるようです。
![ブラウザ上で osc-js を利用](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5e7b1aff-de15-3eca-a8a9-49850e2094e0.jpeg)


### サーバーの実装
ブラウザで扱う場合は、上に書いたとおり WebSocket を使う形になるため、仲介役になるサーバーが必要です。

そこで、サーバーの実装についても見ていきます。
上の調査で出てきた osc.js と osc-js のそれぞれを使って、サーバーも準備することができそうでした。

#### osc.js でサーバー（over WebSocket）
osc.js を使い、Node.js でサーバーをたてる場合、以下のようになるようです（over WebSocket の場合）。
ws や express に依存したコードになるようでした。
![osc.js でサーバー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8cd288f2-889f-c3a1-3c33-612ed7895c1b.jpeg)

#### osc-js でサーバー（over WebSocket）
osc-js を使って Node.js でサーバーをたてる場合、以下のようになるようでした（over WebSocket の場合）。
こちらは、上で出てきた内容のとおり、外部ライブラリに非依存となるようです。

![osc-js でサーバー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8aae6bc6-1473-e23a-f4d1-209dd6d113ed.jpeg)

## おわりに
今回、ブラウザで OSC を扱う初めの一歩として、ブラウザ用の実装に活用できそうなライブラリや、サーバーに実装の情報を見ていきました。

この後は、osc-js を実際に試していこうと思っています。
（それはまた、別の記事にできればと思います）

## 【追記】
サーバー・クライアント間での双方向のメッセージのやりとりを試してみて、その内容を記事にしました！

●ブラウザ上の p5.js のプログラムで OSC を使う（サーバー・クライアントは osc-js で実装） - Qiita
　https://qiita.com/youtoy/items/b537b5c9c5b4465d23b3