導入
最近 TypeScript や React を触れる機会が非常に多くなり、そろそろ自身の配信レイアウトもリニューアルしたい、ということで今回の作業(?)のきっかけになりました。Graphic や Dashboard は Vite でバンドルした React で作っていこうかと思います。
今回の記事のもう一つの目的として、現在自身が NodeCG でのバンドル制作の手法に対して抱いている「こういう理解で合ってる？」というのを言語化+指摘していただこうかな、というものがあります。
序盤は公式チュートリアルをなぞっていく形になっています。
作業ログ、という意味合いも大きいかも。
今回の作業環境
- Ubuntu 22.04 (WSL2 Windows11 21H1)
- Node.js 18.7.0 (StoryBook 使うなら 16 系にする必要があった気がします)
- VSCode
作業
NodeCG 本体のセットアップ
nodecg-cliのインストール
過去に導入している場合は不要です。
NodeCG の公式チュートリアルにある通り、
npm install --global nodecg-cli
とします。Linux 環境でエラー出る場合はsudoを付けてやるか、あるいは何らかの方法(丸投げ)でいい感じにしてやってください。最悪 npx とかでいいんじゃないかなとか思ってます。
作業ディレクトリの作成
これから作成するディレクトリに NodeCG のアプリケーション本体が来ます。
mkdir 任意の名前 # NodeCG本体を入れるディレクトリ
cd さっき作ったディレクトリの名前
nodecg setup # さっき作ったディレクトの中をなんかいい感じにしてくれる
ここまででバンドルを含まない状態の NodeCG のセットアップが完了しました。
とりあえず起動確認してみて、問題ないようであれば先へ進みます。
nodecg startで起動します。
バンドルの作成
Yeoman のインストール
Yeoman とは、汎用的なひな型ツールとしての側面を持った開発環境を構築するためのツールだと認識しています 今回の記事書く中で初めて知ったツールかも
npm install --global yo generator-nodecg
バンドル作成
ひな形作成~(nodecg 外への)移動
本章前書き
後で Git 関係でめんどくさい感じなりそうで nodecg/bundles 以下に作った後で nodecg よりも上に移動させた後、Github に push、その後nodecg installで持ってくる、という流れになっています。これをやるくらいなら最初から別のディレクトリで作っておいた方がよかったのかもしれません。
本編
Yeoman を利用していい感じにしていきます。
cd bundles
mkdir バンドルの名前
cd さっき作ったバンドルの名前
yo nodecg
初めて yo を使う場合はよくある品質向上のための匿名で使用レポートを送っていいか聞かれるので Y(デフォルト)か n を入れてあげましょう。
正直よくわからない箇所の方が多かったので、そういう場合はデフォルト(何も入力せず Enter)していました。できればこのあたりの説明どこかに欲しいかもしれません。
- 特によくわからなかった箇所(概念?)
下二つについては、NodeCGのDiscordサーバーで教えていただきました。ありがとうございます。- そもそも panel って何(Dashboard のアレだったっぽい)
-
"single instance" graphicって何(なずな予想: Graphic の枚数)
→ 同時に1か所でしか開けなくなるそうです(ドキュメント該当箇所) - custom workspace って何
→ 指定しない場合、nodecgデフォルトのWORKSPACEタブに操作盤が表示されるが、指定した場合にはそっちに操作盤がまとめられる(ドキュメント該当箇所)
私の場合、こうなりました。
とりあえず、ひな型の完成です。
この段階でのディレクトリ構成はこんな感じになっています
nodecg/bundles/my-usual-layout$ tree
.
├── LICENSE
├── README.md
├── dashboard
│ └── panel.html
├── extension
│ └── index.js
├── graphics
│ └── dist
│ └── index.html
└── package.json
4 directories, 6 files
このまま進めると、Git 周りが大惨事になりそうな気がするので一度別のディレクトリに移動させます。私の場合はこうなりました。とりあえず、nodecg が管理しているより外側へ持って行った形になります。
na2na@Corei7-11700K:~/develop/nodecg/bundles/my-usual-layout$ cd ../
na2na@Corei7-11700K:~/develop/nodecg/bundles$ mv my-usual-layout/ ../../
na2na@Corei7-11700K:~/develop/nodecg/bundles$ ls
na2na@Corei7-11700K:~/develop/nodecg/bundles$ cd ../../my-usual-layout/
na2na@Corei7-11700K:~/develop/my-usual-layout$ git add .
na2na@Corei7-11700K:~/develop/my-usual-layout$ git commit -m "Initial Commit"
この後で Github に push(リポジトリ作成)しました。
次に、改めて先ほど作った nodecg/bundles 以下に今作ったバンドルのひな形を導入する作業です。
まず、先ほどの nodecg のディレクトリへ移動してください。
私だとこうです。
na2na@Corei7-11700K:~/develop/my-usual-layout$ cd ../nodecg/
na2na@Corei7-11700K:~/develop/nodecg$
公式のガイドにある通り、Github からバンドルのインストールをします
nodecg install na2na-p/my-usual-layout (人それぞれ変わります)
cd bundles/my-usual-layout (さっき作ったバンドル名)
code .
ここまででひとまずは完了となります。次の記事からは、Graphics と Dashboard を React(Vite)でとりあえず画面が出た！というところまでやっていきます。まとまりのない上に寄り道している感じもすごい記事ですが、ありがとうございました。
次記事