もすのはやにえ

主にRTAチャートや記録の置き場にするつもりですぞ

(日記)のーどしーじー導入してみた(こっそりと)

どうも。しがないRTA走者です。
気が向いたので、以下の記事の手順で、NodeCGを導入してみました。
これを使うと、配信画面をリッチに仕上げることが出来るらしい…
何それ?と思った方も、以下の記事等をチェック。興味がある方は是非。

https://zenn.dev/cma2819/articles/start-nodecg-01

詰まったポイントとかメモってたのをブロマガに書いてみます。5つです。
ほぼメモのままなので、全然内容整理されてません(予防線として日記と書いた)。
※途中、色々書いてますが、僕は全てにおいてにわか知識しか無いので、
 内容を鵜呑みにしないでください。導入の流れだけは参考になるかも。
 導入のみならず、ものが動く原理とか知りたい人はちゃんと勉強しましょう


使用OS:Windows10
作業日:2021/02/10~2021/02/11
作業時間:詰まったので合計1時間はかかってしまったかも
詰まったポイント詳細:赤字
詰まったポイント解決:緑字



詰まったポイント①(詰まり度:小):Installing NodeCG - NodeCGのインストール
記事内のインストール用URLにアクセスできない…なんでや…
→こっちなら行けた。 →https://nodecg.dev/docs/installing

詰まったポイント②(詰まり度:微):
Windowsなので、インストーラをダウンロードした。
・色々設定あるけど、何をどうすればいいんだろう。
→よくわからんので、設定は特にいじらずインストールした。()

インストーラの"Finish"を押下すると、PowerShellが起動する。
 (何とかを許可しますか?的なのはOK押下)
 数分かけて、必要なツールを自動でダウンロードしてくれた。
 ダウンロード完了後、"exit"と打ち込み、PowerShellを終了する。



詰まったポイント③(詰まり度:大):Node.jsのインストールが完了すると、以下のコマンドでバージョンを確認できます。
・ほーん、コマンドを打つのかー。Node.jsを起動すればいいのかな?

→Node.jsを起動すると、黒画面が出てきて、コマンドが打てるみたい。
Windowsだったら、検索で「Node.js」と打てば検索にヒットして起動できるはず。



→ヒットした。



起動できた。キーを打ち込めば、黒い画面に文字が入力できる。
じゃ、コマンド打ってみるか!

→あれぇ?そんなコマンドねえよ的なことを言われてしまった。。。



nodeだけならどうだ…と思ったけどダメか…ごり押しは効かぬか…



もっとちゃんと使用方法を調べないとかなぁ…

→調べる前に解決したわ…コマンド打ち込むのここじゃないわ…
 (調べた方がいいのは、それはそう)

というわけで、「Node.js command prompt」を開きます。 
※「Windowsシステムツール」の「コマンドプロンプト」でもいけるっぽい。




開いて、コマンドを打った結果、
コマンド実行成功し、各バージョンが表示されました。やったね!


参考元では"$ node ~~"となっていたけど、そういえば作業環境によっては、コマンド打つ場所の左側に"$"があったな…OSがLinuxの時とかかな。

Windowsの民なので、"$"の代わりに"C:\Users\(ユーザー名)> と表示されていると思えばいいかな。
※"C:\Users\(ユーザー名)>とは:PCの作業場所みたいなイメージ。この場所にある書類を何とかしてくれ みたいにPCに命令するような。
※念のためユーザー名は隠してます

無駄に混乱してしまった…バージョン確認だけで数十分使うとは思わなかった。
(昔Linuxサーバ構築の授業受けたはずなんだが…)

詰まったポイント④(詰まり度:中):nodecg-cliを用いたインストール方法
・参考サイトの手順通り進める。
・npmのインストール



導入成功したらしい なんか警告出てるけどまあいっか…




・試しに"nodecg"とコマンドを打ってみる。しかし、「gitが無いぞ」とのこと。
→出てきたURLから導入してみる。よくわからんので、
 インストール時の設定は全部デフォルトで進めた。
・あれ、インストールしても変わらないな…(囲んだ部分)


ん…PATH…?あ、環境変数の事か!

コントロールパネル>システムとセキュリティ>システム>システムの詳細設定>環境変数 と辿る。
→ユーザー環境変数にC:\Program Files\Git\cmd を追加。
(gitのインストール時の選択肢によっては、勝手に追加してくれたらしい…ちゃんと調べよう)

→と思ったらシステムの環境変数に勝手に追加してくれてたので対応不要だった。

 上手くいかなかったので、コマンドプロンプトを開きなおしたら治った



※詰まってないけど:本体のインストール
・説明に従い進める。


※絶対参照とか相対参照くらいはさすがに覚えてた…良かった…

コマンド操作する時はフォルダのことをディレクトリと呼んでる(ディレクトリ=フォルダ)位に思っている。
mkdir <フォルダ名>:指定した名前の新しいフォルダ(ディレクトリ)作成 make directoryの略
cd <フォルダ名>:指定したフォルダに移動 change directoryの略


どうやら上手くいったらしい。

詰まったポイント⑤(詰まり度:微):NodeCGの実行
・導入できたみたいなので、実行してみよう!



よし!出てきたURLをブラウザ(僕はchrome)で開こう!

→記事通りにヘッダが出てないな…はて?



とある拡張機能が働いていたせいだったっぽい。拡張機能オフにしたら出てきた



やったー!


以上、僕の詰まったポイントでした。意外と道のりが長くて導入疲れました…
ただ、日本語の参考記事が無ければ導入は無理ゲーだったはずなので、有難いですね。

なお、僕は配信画面のレイアウトにあまりこだわりが無いので、
実際に使うかは未定です。(本末転倒)


※とりあえず書いちゃったので記事投稿しますが、
 不備等あれば記事の修正・削除対応します。