最近流行り(?)のNodeCGをいじってみた
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

最近流行り(?)のNodeCGをいじってみた

2019-06-03 17:02
    ※本記事は2019年6月時点の情報です。今後情報が変わる可能性がありますので、その点を理解した上で読んでください。
    ※日曜プログラムレベルの腕(≠本職)なので、本職さんが見たら誤りのある表現や違和感のある表現を使っている可能性がありますが、(逆に言うと)配信者レベルで説明できていると思います。
    画像は全部小さめにしています。拡大したい場合は画像をクリック。


    最初に
    最近、配信レイアウト関係の話になると、"NodeCG"という単語をよく(?)耳にするようになった。
    私は自分の配信用にレイアウトを作るのが好き(≠達人)なので、「お気に入りのレイアウトを作れるのなら」と思い、このNodeCGをちょっと触ってみた。
    今回は「とりあえずNodeCGのサンプルを動かしたい!」ぐらいの人に向けて、私が実際にやった作業を記載していく
    (下記に挙げるおふたりの記事の補足だと思ってほしい。)


    NodeCGとは何か
    google先生に聞くと、日本語の記事は以下の2件だけ引っ掛かると思う。(2019年6月現在)
    https://qiita.com/Hoishin/items/36dcea6818b0aa9bf1cd (Hoishin氏)
    https://qiita.com/cma2819/items/e775bd8aa2a2fa911d4c (Cma氏)

    この二つの記事それぞれの冒頭に「NodeCGとは何か」が載っているので、詳しくは割愛するが、とりあえずはWeb技術を利用してちょっとリッチなレイアウトが作れるやつぐらいの認識で良いと思う。


    NodeCGの利点(特長)
    いきなり作業の話をしても良いのだが、NodeCGの利点をいまいちつかみきれてない人へ利点を簡単に説明する。

    先に述べた通りNodeCGはWeb技術を使っている。なので、Web技術でできることなら基本的になんでもできる
    Web技術でできる一般的なことを話しても仕方がないと思うので、NodeCGならではの利点(特長)を以下に述べておく。
    管理用のWebページ画面表示用のWebページの2種類があり、
    ・管理ページから項目を選択・入力等すると画面表示用ページへ即時反映できる
    (・レイアウト用のWebサーバを立てることになるので、外部からアクセスできる環境を作れば、NodeCGの環境をインストールしていないPCでも同じレイアウトを使うことができる)

    これだけだと「意味が分からん!」という人がいるかも知れないので、身近な例で説明する。
    (※ぱっと見て意味が分かるようにこの例を使用しているが、もっとリッチなこともできる。)

    例. RTAの練習を終えて通しへ移る時。(RTA練習中は"Practice"、RTA通し中は"Run"を表示するレイアウトを使用している)

    ■ OBSのみでやろうとした場合・・・

    ・Aパターン: "Practice"の文字を"Run"に書き換えるやり方
    - デメリット: (固定文字の表示なのに)いちいち文字を書き換えるのがあほらしい!


    ・Bパターン: "Practice"を非表示にし、"Run"を表示するやり方
    - デメリット: 固定文字が2パターンだけなら良いが、5, 10パターンと数が多い場合は、ソースの量(OBSの真ん中下の欄)が半端ない事になる上、表示したいものを探すところで手間取る。(OBSにはソースをグループ化する機能もあるが、その機能を使ってもソース管理が大変だったりする。)


    ・・・とこんな感じでどちらのパターンにもデメリットがあると私は考えている。

    ■ NodeCGを使った場合!
    ここまで読んだあなたは「じゃあNodeCGを使うとどうなるの?」と思ったはずだ。その疑問に答えるべく、以下にNodeCGを使った場合を書く。

    NodeCGを使った場合・・・
    管理ページで"Run"を選択すると、レイアウトの方も瞬時に"Run"に変わる!

    (管理ページ) / (レイアウト)
     / 
    ↓ Statusのところで"Run"をクリックすると・・・
     / 
    レイアウトへ即時反映される!超楽ちん!


    私が実際やった作業
    以上でNodeCGのことが多少は分かったと思う。ここから先は私が実際に行なった作業を書く。

    ~目次~
    1.環境構築
    2.サンプルを動かしてみる
    3.OBSにレイアウトを適用させる
    4.その他


    1.環境構築
    環境構築の仕方は、冒頭で挙げたhoishin氏の記事やCma氏の記事に懇切丁寧に書かれているので、そっちを見てほしい。
    https://qiita.com/Hoishin/items/36dcea6818b0aa9bf1cd (Hoishin氏)
    https://qiita.com/cma2819/items/e775bd8aa2a2fa911d4c (Cma氏)

    私は両者の記事をつまみ食いするような感じで構築した。以下に実際行なったことを書く。
    (※"Windows 10 64bit"を使用)

    ① まずはCma氏の記事を開き読み始める。
    ② "Node.jsのインストール"の項目まで読む。
    Node.jsのバージョンは"v8.x"系を選択。(https://nodejs.org/dist/latest-v8.x/)
     "node-v8.16.0-x64.msi"(64bitのほう)をダウンロード&インストール。
    ④ "node --version"と"npm --version"コマンドでインストールを確認する。
    ⑤ "Gitのインストール"の項目を実施。(追記:⑫でgitが必要らしい)"bowerのインストール"の項目をやらずに⑥へ。
    ⑥ ここからHoishin氏の記事を読み始める。
    ⑦ 作業用フォルダを適当に作る。("NodeCG"みたいなフォルダ名)
    ⑧ ⑦のフォルダを開く。
    ⑨ ⑦のフォルダ上で"Shift"を押しながらマウス右クリック。するとオプションが出現。
     
    ⑩ "コマンドプロンプトをここで開く"を選択してプロンプトを開く。
    ⑪ Hoishin氏の記事の"つくってみる - NodeCGをcloneして準備する"を読む。
    ⑫ ⑩で開いたコマンドプロンプトに以下2つのコマンドを打つ。
     "npm i -g nodecg-cli bower"
     "nodecg setup"

    ~ Hoishin氏とCma氏の記事を参考にしたのはここまで ~

    ⑬ 以下のURLに良さげなサンプルがあるのを見つける。
     URL: https://github.com/nodecg/nodecg-simple-examples
    ⑭ 右上の"Clone or download"を押して、"Download ZIP"でダウンロード。
     
    ⑮ ⑭でダウンロードしたファイルのうち、"0_dashboards"と"1_graphics"をコピー。
    ⑯ ⑮を作業用フォルダ内にある"bundles"フォルダに貼り付け。(bundlesフォルダは以下の画像のような感じになる)
     
    ※Windowsファイアウォールの警告が出たら、そのままアクセスを許可するでOK。

    2.サンプルを動かしてみる
    基本的に"bundles"フォルダ内にあるアイテム(html, css, javascriptとか)が実行されるらしい。
    - "dashboard"というのが管理ページのこと。
    - "graphics"というのが画面表示用ページ(レイアウト)のこと。

    それぞれのフォルダに"package.json"が必要っぽい(よく分からない)。
    現状では拡張まで考えなくていいと思ったから、"2_extensions"はコピーしなかった。

    下準備は整ったのでサンプルを動かしてみる。

    ① まずはNodeCGを起動する。作業用フォルダでコマンドプロンプトを開く。
    ("1.環境構築"での⑧~⑩の操作を行なうという意味)
    ② ①で開いたコマンドプロンプトに"node ."を入力して実行。
    ③ 以下の画像のような感じでエラーを吐いていなければ大丈夫だと思う。
     
    ④ Webブラウザ(私の場合はChrome)を開き、アドレスバーに"http://localhost:9090"を入れてこのページに飛ぶ。以下の画面が出たらOK。
     
    ⑤ ④のページの右側の"graphics(目玉マーク)"をクリックし、"HELLO-WORLD.HTML"をクリック。
     
    ⑥ すると、Hello, world!と書かれた画面が出現する。
     
    ⑦ (⑤と⑥を別窓で開いたまま) Enter a nameに"test"と記入してSubmitしてみる。
    すると、瞬時に"Hello, test!"に変わる。
     


    3.OBSにレイアウトを適用させる
    とりあえずここまでできたあなたは「動的に変わるのは分かったけどどうやってOBSに適用させるんだよ!」とご立腹かもしれないので、一応この項目を書くことにした。
    (※Hoishin氏の記事の"実際の配信での使い方"の項目に同じ内容が載っている。)

    ① OBS起動。ソースの[+]を押して、ブラウザを選択。
     
    ② "2.サンプルを動かしてみる"の⑥のURLをコピー。
    (たぶん"http://localhost:9090/bundles/1_graphics/graphics/hello-world.html")
    ③ OBS側に戻り、URLの欄に②を貼る。
     ※本番のレイアウトを適用させる時は幅と高さをそろえること。
     
    ④ すると先ほどの"Hello, test!"が出現。(黒背景だと隠れちゃうけど)
     
    ⑤ "2.サンプルを動かしてみる"の⑦と同じ操作をする。
     管理ページを開いて、今度は"arichan"と記入してSubmitしてみる。
     すると、OBS側の表示も瞬時に"Hello, arichan!"に変わる。
     


    4.その他
    サンプルを動かせたらあとはWebプログラム(html,css,javascript)で適当に書いてカスタマイズするだけ。

    Q. ここから先どうすれば良い?(Webプログラミングやったことある人)
    A. "2.サンプルを動かしてみる"で使ったフォルダ達に"hello-world.html"が入っているので、それをメモ帳とかで開けば何してるかがすぐ分かる。
    あとはグーグル先生に聞いたりサンプルソースを真似てみれば書けると思う。

    Q. ここから先どうすれば良い?(Webプログラミングやったことない人)
    A. 私の生まれ育ってきた時代では、中学生でWebに興味持った人は例外なく自前のホームページ(黒歴史)を作る慣習があった。それぐらいWebプログラミングは(初歩的なものであれば)簡単ということだと思う。(複雑なものを書くのはとても難しい!)
    NodeCGは基本的にWebプログラミングなので、html, css, javascriptを軽く書けるようになれば、あとはグーグル先生を駆使すれば大体書けると思う。

    ただし重要なのは「どういうレイアウトを作りたいか」なので、「作りたいレイアウト」(ゴール)を決めてからプログラム(材料)に勤しむべきだと思う。
    (プログラムを極めたからといって、レイアウトセンスが神るわけではない)

    もしくは、Webプログラミングなんかせずに、できる人に「こういうレイアウト作って!」とお願いするのも手。

    Q. 個人の配信で使えそうなレイアウトサンプルないの?
    A. どこかに置き場があるのなら教えてください。
    とりあえず私が遊びで作ったレイアウトはこんな感じ。右の画像が管理ページ。(gif載せようと思ったら1MB以下じゃないといけなかったのでアーカイブURLだけ)
    ※ゲーム画面とLiveSplitは生ソースで、それ以外はNodeCG。

    参考URL: https://www.twitch.tv/videos/433562402

    管理ページは(視聴者には見えない部分だから)必要最低限しか作ってないしやっつけ感があるけど、それでも良ければ使ってください。
    ソースをきれいにしてくれる人・改良してくれる人がいたら助かる。改善したら連絡ください。二次配布可。

    ダウンロード: https://drive.google.com/uc?authuser=0&id=12Wprk7m6aCHJdSsp7alCHcQzxr3FKpay&export=download
    (使用する場合は「ありちゃんサンキュー」と口にしてくださいね)
    ※(追記)ごり押しでフェードさせていたのをjqueryでちゃんと書き直したので再UPした。

    使い方は「2.サンプルを動かしてみる」と同じ。
    "0_dashboards"と"1_graphics"を"bundles"フォルダに入れて実行するだけ。
    ちなみにレイアウトサイズは1280x720になっているので、適宜サイズ変更すること。
    あと、(cssを見れば分かるけど)各パーツの位置は無理やり調整しているので、ずらすときは頑張ってください。


    終わりに
    困った時はNodeCGのdiscordサーバの日本語チャンネルで質問すると良いと思います。
    招待URL: https://discord.gg/jgQRuJK

    このNodeCGをきっかけに「見れれば良い時代」から「レイアウトにもこだわる時代」に変わるといいですね。
    ちなみにわたくしごとですが、最近102匹のダルメシアンというゲームをやっているので、興味のある人は見に来てください。(日本版が存在しないゲームですが面白いです)


    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。