What's New Qiita

20200823のNode.jsに関する記事は4件です。

  • 投稿日：2020-08-23T18:57:10+09:00

pkgでインストールしたnode.jsを、Nodebrewのnode.jsに入れ替えたい！

nodeのバージョン管理を簡単にした〜い

ので、個人的にnodeをインストールするときは最初からNodebrewを使っているのですが、仕事で使っているマシンでは何を思っていたのかpkgでインストールしていたので、入れ替えした手順を備忘として残したいと思います

同部署の人がnodeのバージョン変更で手こずってて、Nodebrewで一発やんけと嘲笑していたところ
自分もpkg版だったのでしれっと入れ替えた

とりあえず最初に、そもそもnode.jsが入っているかを確認しておきましょう

$ node -v

そしてNodebrewとは、?

hokaccha / nodebrew

Node.js version manager. Contribute to hokaccha/nodebrew deve github.com


pkg(インストーラ)でインストールしたnode.jsをアンインストールする

まずは、すでにインストーラでインストールされているnodeをアンインストールします
ターミナルで下記を実行します

$ lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom \

そして下記を1行ずつ実行します

| while read i; do

 sudo rm /usr/local/${i}

done

sudo rm -rf /usr/local/lib/node \

/usr/local/lib/node_modules \

/var/db/receipts/org.nodejs.*

「\」が最後についているコマンドを実行すると、次の行の初めに「>」がつきますが、そのままコマンド実行して大丈夫です

一緒にnpmもアンインストールします

$ sudo rm -rf ~/.npm

上記コマンドまでで、インストーラでインストールしたnode.jsとnpmのアンインストールが済みました?

Nodebrewをインストールする

Nodebrewを入れる前に…

Homebrewをインストールしていないと、Nodebrewもインストールできません
(HomebrewでNodebrewをインストールするので…)

なので、Homebrewがインストールされているか確認しましょう

$ brew doctor

⚠️エラーが出ていたら、エラー内容を確認して解消しておきます

Your system is ready to brew.

問題なくインストールされていれば、「(Homebrewの)準備できてるよ！」と言われます

インストール自体をまだしていなければ、下記ワンライナーを実行して、インストールしておきましょう

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Homebrew

Homebrew The Missing Package Manager for macOS (or Linux).　　　

Nodebrewをインストールする

インストーラでインストールしたnode.jsをアンインストールして、Homebrewもインストールしたところで、
やっとこさNodebrewをインストールします！

$ brew install nodebrew

Homebrewのアップデートがある場合は、ここでしれっとアップデートされます?

~~~中略~~~

==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
#=#=#                                                                         
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
 /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
 export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
 export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
 /usr/local/etc/bash_completion.d

zsh completions have been installed to:
 /usr/local/share/zsh/site-functions
==> Summary
?  /usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.6KB, built in 2 seconds

Nodebrewがインストールされたっぽいですね
下記コマンドを実行して、問題なくインストールされているか確認してみましょう

$ nodebrew -v

バージョン番号をはじめ、コマンド一覧などが出てきたら、Nodebrewがインストールされています?
また、brewコマンドでも確認できます

$ brew list
nodebrew        <- Nodebrew入ってる！

次に環境変数へNodebrew関連のものを追加します

$ vi ~/.bash_profile

viコマンドで直接下記のパスを追加します

export PATH=$HOME/.nodebrew/current/bin:$PATH

追加したらsourceコマンドで更新して、この設定を反映させます

source ~/.bash_profile

最後にset upしてNodebrewのインストール〜設定完了です！

$ nodebrew setup

Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

さっき更新した設定がset upされていることが確認できます

Nodebrewでnode.jsを再インストールする

Nodebrewもインストールできたので、これでやっとpkg版node.jsに代わる、 Nodebrew版node.jsインストールの準備が整いました

まずはインストールするnode.jsの格納先を作りましょう

$ mkdir -p ~/.nodebrew/src

Nodebrewでインストールできるnode.jsのバージョンを確認してみます

$ nodebrew ls-remote

v0.0.1   
 v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
v0.1.16   v0.1.17   v0.1.18   v0.1.19   v0.1.20   v0.1.21   v0.1.22   v0.1.23
v0.1.24   v0.1.25   v0.1.26   v0.1.27   v0.1.28   v0.1.29   v0.1.30   v0.1.31
v0.1.32   v0.1.33   v0.1.90   v0.1.91   v0.1.92   v0.1.93   v0.1.94   v0.1.95
v0.1.96   v0.1.97   v0.1.98   v0.1.99   v0.1.100  v0.1.101  v0.1.102  v0.1.103
v0.1.104  

v0.2.0    v0.2.1    v0.2.2    v0.2.3    v0.2.4    v0.2.5    v0.2.6    

v0.3.0    v0.3.1    v0.3.2    v0.3.3    v0.3.4    v0.3.5    v0.3.6    v0.3.7
v0.3.8    

v0.4.0    v0.4.1    v0.4.2    v0.4.3    v0.4.4    v0.4.5    v0.4.6    v0.4.7
v0.4.8    v0.4.9    v0.4.10   v0.4.11   v0.4.12

​~~~中略~~~
​

上記のように、ずらずら〜っとバージョン番号が並びます
その中から使いたいバージョン番号を選んで、

$ nodebrew install <バージョン番号>

でインストールします
ちなみに、安定版のインストールは、

$ nodebrew install-binary stable

最新版のインストールは、

$ nodebrew install-binary latest

Installed successfully

「successfully」とあるので、インストール成功したっぽいですね
問題なく指定したバージョン番号のnode.jsがインストールできているか確認してみましょう

$ nodebrew ls

上記コマンドを実行して、先ほどインストールしたバージョン番号が表示されれば、問題なくインストールできています?
インストールしたnode.jsのバージョンをcurrentに設定します

$ nodebrew use <使いたいバージョン番号>

で設定し、

$ nodebrew ls

で出てくる「current」に使いたいバージョン番号が表示されていれば、晴れて入れ替え完了です！?
currentに表示されているnode.jsのバージョンが使われます

$ node -v

$ npm -v

で使用されるバージョンが確認できます

node.jsのバージョンを変えてみる

せっかくNodebrewでnode.jsのバージョン管理が楽になったので、お試しでバージョンを変えてみましょう！

$ nodebrew ls-remote

でインストールできるバージョンを確認して…

$ nodebrew install v13.13.0

試しで入れてみる「v13.13.0」を指定してインストールして…

$ nodebrew ls

v13.13.0
v14.5.0    <- 先に入れていたバージョン

current: v14.5.0    <- 先に設定していたバージョン

問題なく追加で入れたバージョンが表示されていることを確認して…

$ nodebrew use v13.13.0

追加で入れたバージョンを設定して…

$ nodebrew ls

v13.13.0    <- 追加で入れたバージョン
v14.5.0

current: v13.13.0    <- 追加で入れたバージョン

できました！?
複数のバージョンが保持できて、しかも切り替えも簡単ですよね！

一応それぞれのコマンドでもバージョン確認

$ node -v
v13.13.0

$ npm -v
6.14.4

最新版だとうまく動かない…や、
様々なバージョンで動作確認したい！などに当てはまる方には、入れ替え超おすすめします！


  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-23T18:32:41+09:00

node.jsでnpm run devがエラーになった場合の対処法

nuxt.jsの開発環境でで以下を実行したらエラーが出ました。

$ npm run dev
:
This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
:

結論

以下のコマンドを実行したら解決しました。一度消去後に再インストールしてます。

$ rm -rf node_modules
$ rm package-lock.json yarn.lock
$ npm cache clear --force
$ npm install

コマンド実行前もインストールされているはずでしたが、バージョンの違いでエラーが出る場合があるので一度消去して、再インストールしたらいけました！バージョンは変化していませんが、node？のバージョンが変化してのでしょうか。
詳しい方いたらご指摘いただけると幸いです。

$ npm -v
6.14.7
// 上記のコード実行後
$ npm -v
6.14.7
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-23T04:30:27+09:00

生のNode.jsでプロジェクト作成時にやること

当然ではありますが、生のNode.js(特にWebアプリ)でプロジェクト作成時にやることが多く、HTTP通信に関する勉強にもなったのでメモを残しておきます。
Node.jsに関してはほぼ初心者なので、不足や誤りがあるかもしれません。発見した場合はコメントなどでご報告いただけますと幸いです。

プロジェクトの初期化

とりあえず初期化。
いろいろ聞かれるので、それぞれのプロジェクトに合った選択をしていきます。

$ npm init
  • package name: (フォルダ名)　プロジェクトの名前を定義します。特に変更がなければそのままReturnまたはEnterでOK。
  • version: (1.0.0)　バージョンを定義します。これも1.0.0のままでよければそのままReturnまたはEnterでOK。
  • description:　プロジェクトの概要を定義します。これも空白のままでよければそのままReturnまたはEnterでOK。
  • entry point: (index.js)　アプリケーションを起動するためのファイルを指定します。index.jsやmain.jsが多そう?これもindex.jsのままでよければそのままReturnまたはEnterでOK。
  • test command:　テストコマンドの指定をします。これも空白のままでよければそのままReturnまたはEnterでOK。
  • git repository:　Gitのリポジトリを指定します。これも空白のままでよければそのままReturnまたはEnterでOK。
  • keywords:　npmに公開した時のキーワードを設定します。今回はWebアプリを作ることを想定しているのでそのままReturnまたはEnterでOK。
  • author:　製作者の名前を設定します。これもnpmに公開した時に使われるようなので、そのままReturnまたはEnterでOK。
  • license: (ISC)　npm に公開された時のライセンスを記述します。これもnpmに公開した時に使われるようなので、そのままReturnまたはEnterでOK。

-yを末尾につけることで、すべてデフォルトのまま初期化することができます。

http-status-codesをインストールする

$ npm install http-status-codes --save #--saveはNode.js 5.0.0以降は自動で付与されるのでなくてもよい

サーバーがリクエストの受信に成功したことを表す200や、Not foundを表す404などを返します。

リクエストとレスポンスに最低限必要なコードを書く

ポート番号の設定

index.js
const port = 3000; //今回は3000番ポートを使用。

httpモジュールのロード

index.js
const http = require('http');

http-status-codesモジュールのロード

index.js
const http-status-codes = require('http-status-codes');

サーバーを作成する

index.js
app = http.createServer((req, res) => {
    res.writeHead(httpStatus.OK, {
        'Content-Type': 'text/html'
    });
    res.write('<h1>Hello, World!</h1>');
    res.end();
});

httpStatus.OKには200が入っています。
これをres.writeHeadの引数にとることで、リクエストが成功したことを表します。
その後、res.write()でボディを記述し、res.end()でレスポンスを閉じることで、クライアントにレスポンスを送信します。

ポートの監視

このコードの初めに記述した3000番ポートを監視します。

index.js
app.listen(port);

これでlocalhost:3000にアクセスすることができるようになりました。
実際にブラウザからアクセスしてみると、下の写真のようになっています。
image.png

まとめ

これで、サーバーを立てることができるようになりました。
実際にExpressなどのフレームワークなどを一切使わずにNode.jsをサーバーサイドとして使用する機会はあまり多くはないと思いますが、通信の仕組みをやんわりと理解することにも役立ちそうな気がします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-23T00:11:03+09:00

OBS をスマホや M5GO（M5Stack）から遠隔制御 〜 MQTT や obs-websocket を利用 〜

はじめに

この記事は、ライブ配信などで使われる OBS Studio（以下、OBS と記載） を遠隔制御してみたという内容です。

まずは、その仕組みを実際に動作させている様子をご覧ください。


この動画の内容について補足すると、PC上で OBS が動いており、その OBS では以下の 3つのシーンが設定されています。
  1. 「休憩中」という文字を表示するシーン
  2. PC のカメラ映像を画面いっぱいに表示するシーン
  3. スライドを画面いっぱいに表示しつつ PC のカメラ映像も同時に表示しているシーン

上記の 3つのシーンの切り替え操作を、スマホや M5GO（M5Stack）といた別デバイスから制御しています。全体の構成は以下のとおりです。
全体の構成図.jpg

以下で、その仕組みの詳細について書いていきます。

利用している仕組み

ここでは、OBS を遠隔制御するために用いた以下のプラグインやパッケージ・サービスについて記載します。

  • obs-websocket（プラグイン）
  • obs-websocket-js
  • MQTT.js
  • shiftr（MQTTブローカー）
  • UIFlow

また、今回用いた仕組みの話ではないのですが、MQTT の開発に便利に使えるアプリ（MQTT.fx）についても少し記載しています。

今回の仕組みで用いたプログラムの詳細に関しては、この後の「プログラム」の項目でまとめて記載します。

OBS関連

obs-websocket（プラグイン）

今回、OBS を外部から制御する一番のポイントは obs-websocket というプラグインです。

●obs-websocket - Remote-control OBS Studio from WebSockets | OBS Forums
　https://obsproject.com/forum/resources/obs-websocket-remote-control-obs-studio-from-websockets.466/
●Palakis/obs-websocket: Remote-control OBS Studio through WebSockets
　https://github.com/Palakis/obs-websocket
obs-websocket_-_Remote-control_OBS_Studio_from_WebSockets_OBS_Forums.jpg
このプラグインを OBS に追加してやることで、外部のプログラムやアプリから OBS を制御することができるようになります（自分が見つけたきっかけは、MQTT や WebSocket を使ったライブラリ等を、GitHub上でキーワード検索を行ったことでした）。

プラグインの名称にあるとおり、OBS の制御には WebSocket を用いる形です。
以下の提供元のページに書かれたプロトコルに沿って WebSocket を用いた通信を行うことで、冒頭に紹介したシーンの切り替えだけでなく、様々な OBS の操作を外部のプログラムやアプリから行うことができます。

●obs-websocket/protocol.md at 4.x-current · Palakis/obs-websocket
　https://github.com/Palakis/obs-websocket/blob/4.x-current/docs/generated/protocol.md

WebSocket で通信させることができれば、OBS が動いている PC内の別プログラム・アプリからでも制御できますし、PC の外の別デバイスから制御することも可能です。

obs-websocket のセットアップ

このプラグインを使うための手順はシンプルで、プラグインのインストールを行ってしまえば OBS を起動した際に WebSocketを利用するためのサーバが連動して立ち上がります。
なお、ポート番号やパスワード認証といったプラグインに関わる設定を変更することもでき、具体的には OBS を起動後のメニューの中から「ツール ⇒ Web Server Settings」とたどった先で変更が可能です（自分は、PC内の別のプログラムがこのプラグインのデフォルト設定のポート番号を利用していたため、競合しないようにデフォルトのポート番号ではないものに変更し、その話とは別になりますが、認証の設定の有効化も行いました）。

obs-websocket のクライアントのサンプル

obs-websocket のページに、以下のような記載がありました。
obs-websocket_Client.jpg
どうやら、ブラウザ上で動作するクライアントが、以下のリンクから簡単に試せるようです。
●OBS Tablet Remote
　http://t2t2.github.io/obs-tablet-remote/
OBS_Tablet_Remote.jpg

obs-websocket-js

上記の obs-websocket のプロトコルに合わせた通信部分の処理を書いてやれば、外部プログラム・アプリからの制御はできるようなのですが、まずは手軽に試せればと思い obs-websocket-js を使いました。

これは、obs-websocket の GitHub のページ 内（以下の画像の部分）で紹介されていたもので、obs-websocket の通信部分をより簡単に書けるようにしてくれるもののようでした。
obs-websocket_APIs.jpg
様々な言語向けのものが（様々な方によって）準備されているようですが、自分はこの画像内のリストで一番上に書かれた「Javascript (browser & nodejs): obs-websocket-js by Brendan Hagan」を使いました（選定に関しては、比較評価をして選択したのではなく、単に自分が Node.js・JavaScript を使い慣れているという理由で選択）。

obs-websocket-js のページには以下のサンプルが書かれており、これを参考にすると「認証＋接続の処理」や「設定したシーンの一覧の取得」・「シーンの切り替えの指定」を用いる処理はすぐに実装できそうです。
obs-websocket-js_Sample.jpg
実際に、このサンプルの一部を自分の obs-websocket のプラグイン設定に合わせた形で書きかえ（※ OBS側で自分がデフォルトから変更したポート番号と、設定した認証用のパスワードの部分を書きかえ）、プログラムを実行してみて OBS の外部からシーンの切り替え等が行えることを確認できました。

この後、keypress を組み合わせて、PC の特定のキーを押したら OBS のシーンが押下したキーと対応づけられたシーンに切り替わる、というものをお試しで実装したのですが、今回の本題と少しズレる部分であるため詳細については省略します。

MQTT関連

obs-websocketプラグインと obs-websocket-js（または、JavaScript以外の言語向けのもの）を使うことで、obs-websocket のプロトコルの詳細まで踏み込むことなく OBS を制御をすることが可能になりました。
ここまで試せたところで、自分がこの OBSプラグインを見つけた際にやりたいと思った「OBS の操作を PC の外の別デバイスから行う」という内容に着手することにしました。

やり方の 1つとして、PC上で動かした Node.js のプログラム（obs-websocket-jｓ を用いたプログラム）に Webサーバの処理・Webページ用のファイルなどを追加して操作用の Webページを用意し、そこへスマホでアクセスして操作する方法がありそうです。
ただ、スマホ以外のマイコンモジュール等とも連携させたいと思い、さらに PC側の実装はそれらの端末用に別で用意するのではなく共通化できれば、と思いました。そこで、マイコンモジュール等を含めたデバイス間連携で最近よく使っている MQTT を組み合わせてみることにしました。

MQTT.js と shiftr（MQTTブローカー）

「はじめに」の項目で掲載した図の構成のとおり、PC と他デバイスの間の通信に MQTT を用いることとし、PC上の Node.js のプログラムで MQTT.js を用いた処理を追加しました（※ 構成図のスマホの部分の JavaScript実装でも MQTT.js を利用しています）。
MQTT の通信を仲介する MQTTブローカー に関しては、自分が今回使う用途はローカルネットワーク内での通信が行えれば十分であったため、OBS が動いている PC上で動かす形でも良かったのですが（※ 例えば Mosquittoを使う等）、過去に作成したプログラムで外部の MQTTブローカーを提供するサービスの 1つである「shiftr」を使うものが手持ちであったので、shiftr を使う構成にしました。

ここでは、MQTT・MQTT.js・shiftr の詳細な説明は割愛しますが、以下に参考となりそうな記事のリンクを記載します。

【余談】 MQTT.fx（GUIベースの MQTTクライアントアプリ）

これは、利用した仕組みではなく、開発の途中で用いたアプリの話になるのですが、便利に使えるものなので紹介します。

冒頭で紹介した今回の構成で、MQTT のメッセージを受信側の PC上の処理を実装した時点で、MQTT の処理部分を軽くテストするために MQTT.fx というアプリを使いました（※ このアプリが冒頭の構成図の左にある、2つのデバイスの役割を代替する形）。
MQTTfx.jpg
このアプリは Javaベースで作られた MQTTクライアントで、 MQTTブローカーやトピック・メッセージの設定などを GUI上で行うことができ、MQTT のメッセージ送受信（Publish/Subscribe）の操作・受信内容の確認等も同じく GUI上で行えて便利です。
マルチプラットフォーム対応であるため、普段は Mac をメインで使いつつ Windows も併用している自分にとって、どちらの環境でも使えるのもありがたい点です。

UIFlow

冒頭の動画の前半で使っていたボタン付のデバイス M5GO（M5Stack） のプログラムは、M5Stack用のビジュアルプログラミング環境である「UIFlow」を使いました（※ 以前、UIFlow を使って MQTT を用いるプログラムを作成したことがあったため）。
UIFlow は、以下の画像にあるようなブロック型のビジュアルプログラミングでプログラムを作成できます。
UIFlow.jpg
デバイスに内蔵された画面・ボタン等などの処理や、外付けできるセンサー等の専用部品（ユニット）に関する処理なども使えますが、さらに HTTPリクエストや MQTT といった、IoT に役立つ処理もビジュアルプログラミングで作成することができます。

利用するためには、デバイスでのセットアップやブラウザ上（UIFlow上）での端末に紐付いた API Key の指定などが必要ですが、今回の記事では割愛します。詳細は、公式ドキュメントや Web上の記事などをご覧ください。

obs-websocket（プラグイン）を使った事例

今回の仕組みを作る中で、この obs-websocket を使っている事例を軽く検索してみました。
ひとまず日本語に限定した検索結果にして、見つかった記事をいくつかざっと見てみました。

今回の記事に出てくる obs-websocket-js やシーンの切り替えの話以外に、M5Stack用のプログラム（C言語での実装）に obs-websocket との WebSocket での通信を実装した例や、Pythonライブラリを使った話、OBS上で YouTubeライブチャット欄を表示する設定（URL指定）を自動で更新する話などがありました。

これらを見ていて、シーン切り替え以外のことをやっている事例が混じっていて、様々な OBS の操作や設定変更を外部から制御する話を、もっと調べたり試してみたくなりました。

プログラム

ここでは、以下の図の赤矢印で示した 2箇所のプログラムについて記載します。
構成図で説明する部分.jpg
スマホの部分はシンプルな内容でもあるため、今回は割愛します。
おおまかには、HTML で 3つのボタンを表示させるようにし、JavaScript でそれらのボタンがクリックされた時に 押されたボタンによって異なる MQTT のメッセージが送信されるように実装しています（※ 他に MQTT関連の処理で、MQTT.js を読み込んで MQTTブローカーとやりとりするための設定を行っています）。

PC上の Node.js のプログラム

今回の切り替え操作の対象となる 3つのシーンは、OBS上で以下のように設定しており、これらを Node.js のプログラムから指定して切り替えることになります。
OBS_シーン.jpg

ここで記載するプログラムでは、2つのパッケージ（obs-websocket-js・mqtt）を利用します。
そのために、npmコマンドで obs-websocket-js と mqtt の 2つのパッケージをインストールしてください。

npm i obs-websocket-js mqtt

プログラムの具体的な内容は、以下のとおりです。
プログラム中に 【 】 で囲まれた部分が複数ありますが、ご自身の環境に合わせて書きかえをしてください。

  • 書きかえが必要な部分のリスト
    • obs-websocket のポート番号
    • obs-websocket のパスワード（※ 認証を有効にした場合に利用する）
    • shiftr の ID
    • shiftr の PASS
    • MQTTクライアントのクライアントID
    • MQTT のトピック
    • MQTT でやりとりする文字列（※ 今回は 3つのシーンを用意したため、3種類）
const OBSWebSocket = require('obs-websocket-js');
const mqtt = require('mqtt');

const obs = new OBSWebSocket();
obs.connect({
        // obs-websocket に関わる設定
        address: '127.0.0.1:【ポート番号】',  // 同じPC内で接続、ポート番号のデフォルトは「4444」
        password: '【パスワード】' // 認証を有効にした場合に必要
    }).then(() => {
        console.log(`Success! We're connected & authenticated.`);
        return obs.send('GetSceneList');
    }).then(data => {
        // 取得したシーンのリストを出力（サンプルそのまま）
        console.log(`${data.scenes.length} Available Scenes!`);
        data.scenes.forEach(scene => {
            console.log(`${scene.name}`);
        });

        // OBSのシーン情報を取得できた後に、MQTT関連の設定を行う
        const client = mqtt.connect('mqtt://【shiftrのID】:【shiftrのPASS】@broker.shiftr.io', {
            clientId: '【MQTTのクライアントID（文字列を設定する）】'
        });

        client.on('connect', function(){
            console.log('MQTT: client has connected!');
            client.subscribe('【MQTTのトピックを設定する】');
        });

        client.on('message', function(topic, message) {
            console.log('new message:', topic, message.toString());
            // MQTT で受信したメッセージの内容によって切り替えるシーンの指定を変える
            switch (message.toString()) {
                case '【MQTTでやりとりする文字列1（シーン1つ目に対応）】':
                    obs.send('SetCurrentScene', {
                        'scene-name': data.scenes[0].name
                    });
                    break;
                case '【MQTTでやりとりする文字列1（シーン2つ目に対応）】':
                    obs.send('SetCurrentScene', {
                        'scene-name': data.scenes[1].name
                    });
                    break;
                case '【MQTTでやりとりする文字列1（シーン3つ目に対応）】':
                    obs.send('SetCurrentScene', {
                        'scene-name': data.scenes[2].name
                    });
                    break;
            }
        });
    }).catch(err => {
        console.log(err);
    });

obs.on('SwitchScenes', data => {
    console.log(`New Active Scene: ${data.sceneName}`);
});

// You must add this handler to avoid uncaught exceptions.
obs.on('error', err => {
    console.error('socket error:', err);
});

今回、元のサンプルをできるだけ流用する形にしたため、3つのシーンの名前を取得する処理の後にシーンの切り替え処理を実装し、そこで指定するシーンの名前を data.scenes[0].name などという形で書いています。
この部分は、わざわざプログラムで OBS からシーン名を取得するのではなく、それら 3つの名前をプログラム上に直接書いて利用する形でも良いかもしれません。

なお、こちらのプログラムを動作させて使う際は、プラグイン（obs-websocket）をインストール済みの OBS を先に立ち上げておいてください。

UIFlow のプログラム

M5GO（M5Stack）用に作成したプログラムは以下の画像のとおりです。

画像中に 【 】 で囲まれた部分が複数ありますが、ご自身の環境に合わせて書きかえてください。
なお、説明の都合上、文字列を記載する箇所に日本語の文字を書いていますが、UIFlow で日本語の文字は利用できないため、半角英数字・半角記号のみを書くようにしてください。

書きかえが必要な部分は以下にまとめました。この中の「MQTT のトピック」と「MQTT でやりとりする文字列（※ 3種類）」は、Node.js のプログラムで指定したものと同じものにする必要があります。

  • 書きかえが必要な部分のリスト
    • MQTTクライアントのクライアントID
    • shiftr の ID（※ 画像では見きれていますが、上から2つ目のブロックの右のほうの「ユーザー名」のところで指定できます）
    • shiftr の PASS（※ 画像では見きれていますが、上から2つ目のブロックの右のほうの「パスワード」のところで指定できます）
    • MQTT のトピック
    • MQTT でやりとりする文字列（※ 今回は 3つのシーンを用意したため、3種類）

UIFlowのプログラム.jpg

プログラムを M5GO（M5Stack）に書き込んだら、あとは OBS と Node.js のプログラムを動作させた状態で、M5GO（M5Stack）の3つのボタンを押すだけです。3つのボタンの何れかを押すと、OBS の表示が押したボタンに対応したシーンへと切り替わります。

おわりに

今回、OBS のプラグイン「obs-websocket」と MQTT などを組み合わせて、スマホや M5GO（M5Stack）から OBS を遠隔で制御するという内容を試しました。

今回試している制御内容は、自分が一番多く使いそうだったシーンの切り替え操作だけでしたが、本文中に書いたようにこのプラグインで制御可能な操作は他にも様々あるようです。OBS の利用を便利にしてくれそうな仕組みを他にも作れそうなので、シーン切り替え以外の制御などを引き続き調べて試してみようと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧