book-bundleの例からNodeCGのbundleの作り方を考える
https://gyazo.com/0bde5d07268d8b735325b31c60d0377a
https://gyazo.com/7c5a6dcad15a7ab083d1eb94acd3fbd6
↓実際に利用した配信
https://www.youtube.com/watch?v=EefB_ZLQRn4
技術選定
言語
TypeScript
フレームワーク
React
CSS in JS
emotion
UIフレームワーク
Material-UI
バンドル作成
Parcel
Parcelを使った理由
ゼロコンフィグというのがよい。
nodecgのプロジェクトについては、基本的にブラウザ設定以外にコンフィグするべきところがない。
IE死すべしというか、OBSのCSFの都合上Chromeのみをターゲットにしてよい。
CRA(Webpack)を使わなかった理由として、CRAはSPA向きのため、吐き出すHTMLが一つになっている。とにかく設定がめんどい。 ParcelならHTMLを指定するだけで自動的に色々やってくれるのだ…。
一度開いたらずっと読み込みっぱなしになるはずなのでバンドルサイズは深く考えなくても良い。
TypeScript + React
まず、nodecgの型定義が存在するのが大きい
あとuse-nodecgがメチャクチャ便利
とくにuseReplicantが便利
つまりHoishinさんに足を向けて寝られない状態です
あと、Material-UIやreact-transition-groupみたいな、使えるライブラリが多いのが助かりです。
CSS in JS
主に配信画面で利用している。
emotionを選んだ深い理由はないです。普段使ってるからという理由。
Globalに背景透明と1920x1080のサイズを指定しておくと便利
Layer概念を用意して、レイヤーごとに表示の制御をしている
Layer概念を用意すると特定のCSSの適用範囲を絞れて便利。
Layerは position:absolute にしておくとよい
そもそもサイズは固定なので画面サイズに応じてどうこうみたいなレスポンシブを考える必要はない。
1920x1080の領域を指定しているので、位置が不用意に変わらない絶対配置でよい。
CSSの使える範囲はChrome準拠
なのでChromeでしか使えない最新のCSSとかも積極的に使って良い。
でもCEFのChromiumのバージョンが古いケースはあるので気をつけること。
Material-UI
特に深い理由はないですが、UIフレームワークとして定番なので採用。
タブ分けとかもMaterial-UIで一通り出来るので、nodecgのそういうフレームワーク部分は使ってない。
レイアウトが適当でびみょいところもあるが、自分しか使わないような管理画面なので割り切り。
nodecgの画面が黒いのでdarkmodeにする必要がある
微妙にテーマの色が合わないけど、管理画面なので気にしないことにしている
配信画面と管理画面のデータ同期の方法
配信画面と管理画面と拡張のどこでも使えるオブジェクト永続化機能。
POJOならなんでも永続化可能っぽい
これによってあたかもlocalのstateもしくはFluxのStoreかのようにReplicantを使うことが出来る。
多少エラー処理などが雑になってしまうが、やろうとしてることが割と簡単なので複雑度を下げるためにReduxなどは導入していない。
FluxでいうところのActionを管理するところがないけど、 useCallback の中で頑張ればいいはず。
それで複雑になるならもう少しAction管理について考えればいいけど、今のところstateが同期できれば問題ないので複雑度的に困らなかった。
パフォーマンスについては自分の配信用PCがそれなりに高速なので考えてない。