19
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ElixirAdvent Calendar 2022

Day 12

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

Last updated at Posted at 2022-12-06

はじめに

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

2022-11-25 16.03.04.jpg

2022-06-27 13.16.59.jpg

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

立ち上げ概要

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

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

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

構築される環境

  • 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の最短手順

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

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

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

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

参考>
Docker Desktop インストール手順

参考>
Docker Desktop インストール手順

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

DockerDesktopからWSL2上のみで動くDockerに移行する

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

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

参考>
WSL2 + Ubuntu + VSCodeでの開発環境構築

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

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通知が煩わしいときは
作成したフォルダで以下のコマンドを入れる。

 rm -rf .git

Phoenixサイト立ち上げ

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

2022-12-06 13.05.15.jpg

入力部作成

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

2022-12-06 13.05.35.jpg

出力部作成

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

2022-12-06 13.05.45.jpg

後始末

サイト停止

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

コンテナ停止

*コンテナに入っている場合
exit

sudo bin/stop.sh

コンテナ起動

sudo bin/start.sh

Elixirコンテナログイン

sudo bin/login.sh

コンテナ削除

docker-compose down

おわりに

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

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

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

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

19
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?