Elixir/PhoenixとNeosVRを連携させる。

# はじめに

naritomoと申します。
NeosVRではnaritomo[jp]という名で遊んでいます。

![2022-11-25 16.03.04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/efde3bf6-9ba2-f3ac-4621-1d6dd48c0d1a.jpeg)

![2022-06-27 13.16.59.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/8635565d-3e24-9fa7-3fe3-4514b2376350.jpeg)

Neos始めてそろそろ2年になり、Neosにいた証として
なにか残してみようと思い、この記事を作成しました。

## 立ち上げ概要

windows11を使用してwsl2+Ubuntu+vscode環境を作り、
docker-composeを使用してサイトを立ち上げ、
websocketでNeosVRと連携させるものになります。

参考に以下のサイトを参照しています。

https://qiita.com/the_haigo/items/00b6c2ee12b061bc2355

必要なソースは以下にまとめてあります。

https://github.com/naritomo08/elixir-docker-nondb

https://github.com/naritomo08/neosElixir

## 構築される環境

  - Erlang/OTP 24
  - Elixir 1.13.4
  - Phoenix 1.6.15

## 必要なソフトウェア

* Docker 20 以上
* Docker Compose 1.27 以上

## 動作確認済みのOS

* Windows11(wsl2上のUbuntuから稼働)

## 構築方法(Elixir/Phoenixサイト)

NeosVRを動かすPCで行うこと。

### windoows11上にwsl/Ubuntu22.04をインストールする。

参考>
[Ubuntu 22.04でElixirの最短手順](https://qiita.com/piacerex/items/01e89435af0f7a454ad2)

作業実施後、以下のコマンドをwindowsコマンドプロンプトで実施する。

```bash
wsl --unregister Ubuntu
wsl --set-default Ubuntu-22.04
wsl --list --verbose
```

### docker-desktopをインストールする。

従業員250人以上かつ年間売上高1000万ドル以上の企業利用の場合、
有料となるため注意

参考>
[Docker Desktop インストール手順](https://qiita.com/R_R/items/a09fab09ce9fa9e905c5)

参考>
[Docker Desktop インストール手順](https://qiita.com/R_R/items/a09fab09ce9fa9e905c5)

Docker Desktopを使用しない(できない)場合、以下のサイトを参照

[DockerDesktopからWSL2上のみで動くDockerに移行する](https://zenn.dev/taiga533/articles/11f1b21ef4a5ff)

### vscodeのインストールを行い、wsl2内のUbuntuコンソールを開く

以下のサイトを参考に、vscodeのインストール/Ubuntuコンソールを開く。

参考>
[WSL2 + Ubuntu + VSCodeでの開発環境構築](https://qiita.com/zaburo/items/27b5b819fae2bde97a3b)

### dockerコンテナクローン、デプロイ、立ち上げ

```bash
git clone -b phx1.6 https://github.com/naritomo08/elixir-docker-db.git elixir-docker-nondb
cd elixir-docker-nondb/apps
git clone -b devlop https://github.com/naritomo08/neosElixir.git
cd ..
sudo bin/setup.sh
sudo bin/start.sh
sudo bin/login.sh
```

後にファイル編集などをして、git通知が煩わしいときは
作成したフォルダで以下のコマンドを入れる。

```bash
 rm -rf .git
```

### Phoenixサイト立ち上げ

```bash
cd neosElixir/
mix deps.get
cd assets
npm install
cd ..
mix phx.server
```

## NeosVRからのサイト参照

以下のURLで入手できます。
コピーしてNeos画面で貼り付ければアイテムは出ます。
Pulseをクリックすればひとまずできます。

neosdb:///f73ed2485ce0a89063a3aca283557b9c19cf556ac0cfc24574f2f3c2acc620eb.7zbson

以下は内容についての簡単な説明になります。

### websocketモジュール設置

適当なコーンなどのモジュールを作成し、
インベントリーを開き、[WebSocketClient]コンポーネントを
作成して1枚目の画像の設定をします。

次に2枚目のようにWebSocketコンポーネントのlogixインターフェイスを
取り出します。

![2022-12-06 13.04.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/d2ab5cdc-b2a8-f54d-0601-fbf6c7d2a5a0.jpeg)

![2022-12-06 13.05.15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/82a5c03b-6b92-4085-bd31-33ece21236ee.jpeg)

### 入力部作成

画面のように作成します。
Pulseをクリックするとサイトにデータが入力されます。

![2022-12-06 13.05.35.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/88d2fd09-e6b9-ac1e-7e0e-eb49cdfc9263.jpeg)

### 出力部作成

画面のように作成します。
入力部のPulseをクリックするとStringの先ににデータが出力されます。
入力部の"room:4"の数字を変更すると出力に反映されます。

![2022-12-06 13.05.45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1877319/6d42737e-883c-cc47-272f-98e0334c9886.jpeg)

## 後始末

### サイト停止

Ctrl+c を2回押すことで停止可能

### コンテナ停止

```bash
＊コンテナに入っている場合
exit

sudo bin/stop.sh
```

### コンテナ起動

```bash
sudo bin/start.sh
```

### Elixirコンテナログイン

```bash
sudo bin/login.sh
```

### コンテナ削除

```bash
docker-compose down
```

# おわりに

これで、一通りのElixir/PhoenixとNeosVRとの連携は行なえますが、
正直ここからどう活用しようかわかりませんが、
興味があればこれで試してみてください。

また、Elixir/Phoenix自体に興味があれば以下のページにも
DBも含めた開発環境構築方法を載せています。

https://qiita.com/naritomo08/items/fecf4ace7b9ca9078102

普段はNeosでアバターきせかえしていますので、そこら辺とこの機能を
組み合わせたいと思います。

あとはNeosきせかえノウハウ等何か残せればと思っています。