- 投稿日:2020-10-15T19:42:40+09:00
Node.jsとはなにか?なぜみんな使っているのか?
この記事は
「JavaScriptの勉強してたらみんなNode.jsの存在を前提に話が進む。でもNode.jsってWebサーバじゃないの? なんでインストールしなきゃいけないの? なんでみんな使ってるの?」
といった疑問を解消することを目的としています。
大前提:JavaScriptの特徴
Node.jsを説明する前にJavaScriptと他のプログラミング言語の違いを知っておく必要があるので説明します。
JavaScriptはChromeやFirefoxといった「ブラウザ上」で動作するプログラミング言語です。
対してPythonやRubyのような一般的なプログラミング言語は通常「パソコン上」で動作します。1
このことが生み出す違いは、OSの機能にアクセスできるかどうかです。
「OSの機能」とは例えばファイルの読み書きや、ネットワーク通信などの機能のことです。
パソコン上で動作するアプリケーション(PythonやRubyなどを含む)ではこれらの機能を扱うことができます。2
それに対し、ブラウザ上で動作するプログラム(JavaScript)がOSの機能へアクセスできてしまうと大変まずいことになります。3
あるサイトにアクセスしただけで勝手にパソコン上のファイルを読み書きされたり、プログラムのミスでうっかりパソコン上のファイルを一部消されたりしたら大問題ですよね。4ということで、ブラウザ上で動作するJavaScriptはOSの機能にアクセスできないようになっています。
ですがOSの機能へ全くアクセスができないということは、ローカルファイルの読み込みや保存ができないのはもちろん、ユーザーがどこをクリックしたのか、キーボードのどのキーを押したのかも分からないという状態になります。それでは不便なのでブラウザが限定的にOSの機能へのアクセスを仲介してくれています。5
最近ではカメラやマイクへのアクセスの仲介もやってくれるので、ブラウザ上でWeb会議できたりしますよね。
Node.jsって何者?
そんなブラウザ上という制限された環境でしか動けなかったJavaScriptを、PythonやRubyのようにパソコン上で動かせるようにしてくれるのが「Node.js」です。
誤解されることが多いのですが、Node.jsはWebサーバでもなければRailsやDjangoのようなWebフレームワークでもありません。JavaScript実行環境です。WindowsにPythonをインストールすると「python.exe」ができるように、Node.jsをインストールすると「node.exe」ができます。
python.exeがPythonコードを実行するアプリケーションであるように、node.exeはJavaScriptコードを実行するアプリケーション(つまりJavaScript実行環境)です。Node.jsではJavaScriptでOSの機能にアクセスするプログラムを組むことができます。6
つまりブラウザ上で動作していたときはできなかった自由なファイルの読み書きやネットワーク通信などのOSの機能を扱えます。
結果的にPythonやRubyなどと同じようにWebアプリケーションを作成することもできますが、Node.jsはWebアプリケーションのためだけのものではないということは覚えておいてください。Node.jsはサーバサイドのJavaScript実行環境?
Node.jsはよく「サーバサイドのJavaScript実行環境」と紹介されます。
これはNode.jsの生い立ちに由来します。Node.jsは元々(大量の同時接続をさばける)ネットワークアプリケーションの構築を目的に設計されたJavaScript環境です。
その「JavaScriptでWebアプリケーション(Webサーバ)が作れる」という特徴から(それまでブラウザ上で動作させるものだったということもあり)「Node.jsは(クライアントサイドではなく)サーバサイドのJavaScript実行環境である」という紹介がよくされました。ところが現在、Node.jsは「クライアントサイドJavaScript」の開発環境としても広く利用されています。
これはNode.jsの「パソコン上でJavaScriptを実行できる」という特性に目を付けた人々によって、どんどんクライアントサイドJavaScriptの開発に便利なライブラリが整備されていった結果……なのだと思います。(調べがつかなかったので想像です)経緯はともかく、現在では「Node.jsはサーバサイドのJavaScript実行環境やクライアントサイドJavaScriptの開発環境として利用される」というのが誤解を与えにくいNode.jsの説明になるかと思います。(分かりやすさはともかくとして)
npmって何者?
ちょっと話はそれますが一応npmのことも解説しておきます。
npmはNode.jsのパッケージ管理ツールです。
Pythonにおけるpip、Rubyにおけるgem(RubyGems)、Debianにおけるapt、MacにおけるHomebrew、Rustにおけるcargo。だいたいそんな感じです。たまにyarnというのが出てきますがnpmと同じことができる物だと思って大丈夫です。
「パッケージ」というのはライブラリやフレームワークのことです。
つまりVueやReact, webpack, jQueryなどのことです。Node.jsで使いたいライブラリがある場合、jsファイルをダウンロードしてきて
<script src="xxx.js"></script>
って書いて……とかはせずにnpmを使ってインストールします。Node.jsってなんでみんな使ってるの?
Node.jsによって枷を外されたJavaScriptは色々なことができるようになりました。
その用途は多種多様ですが、現在、Node.jsを使っている人の目的のほとんどは以下の3つに分類できます。(筆者の主観的な意見です)
- 新しい仕様のJavaScriptまたはTypeScriptでクライアントサイドのプログラムを書きたい。
- Webアプリケーションを作りたい。
- モバイル/デスクトップ用のアプリケーションを作りたい。
目的1. 新しい仕様のJavaScriptまたはTypeScriptでクライアントサイドのプログラムを書きたい
新しい仕様(ES2015以降)のJavaScriptについては至る所で解説されているのでここでは簡潔に。TypeScriptについては割愛します。JavaScriptは年々仕様が更新され、どんどん新しい機能が増えています。特にES2015というバージョンではそれまでにはなかった便利な機能がたくさん仲間入りしました。
しかしJavaScriptの仕様を新しくしても既存のブラウザが追いついてこれないという問題が発生します。
これを解決するために登場したのが「新しい仕様で書いたJavaScriptファイル」を機械的に「旧仕様(ES5)のJavaScriptファイル」に変換してしまう手法です。この変換を行うツール(トランスコンパイラ)の現在の主流がBabelであり、それを動かすための環境として現在よく選ばれているのがNode.jsです。
つまりかなり乱暴な言い方をすると
みんな
const
やimport
などを使ってクライアントサイドのJSを書きたい
↓
でも古いブラウザは対応していない
↓
Babelを使えば新しい仕様で書いても古いブラウザに対応したJSファイルに変換できる
↓
BabelはNode.js上で動かすことができる
↓
みんなNode.jsを使って開発するようになるということです。
目的2. Webアプリケーションを作りたい
Ruby + RailsやPython + Djangoなどで作るようなWebアプリケーションをNode.jsで作ることも可能です。
わかりやすくするためにこの場合に対応する項目を表で書くと
実行環境 言語 Webフレームワーク Ruby Ruby Ruby on Railsなど Python Python Djangoなど Node.js JavaScript Expressなど となります。
またNode.jsの特徴として「Webサーバの役割もNode.jsがこなす」という点があります。(というかNode.jsの目的を考えるとWebサーバとしての役割がメインです)
元々Node.jsは大量の同時接続をさばけるようなネットワークアプリケーションを構築することを目的として設計されています。
そのため、Webサーバとしての機能から一貫してNode.jsが受け持ち、効率的に処理できるようになっています。
要するに通常使われるApacheやnginxのようなWebサーバの代わりにNode.jsが直接HTTPリクエストを受け取り、処理をするということです。
(実際にはNode.jsのみだとWebサーバとしては少し機能が物足りないので、その前段にApacheやnginxをリバースプロキシとして置く構成が多いようです。)フロントエンドしかやったことがない人がサーバサイドも書くことになったときにJavaScriptしかできないからNode.jsを選ぶなんて言われたりしますが、正直Node.js+Expressを勉強する労力と、Ruby+RailsやPython+Djangoの勉強をする労力はあまり変わらないと思いますので、言語にとらわれずにそれぞれの特徴をよく調べてから選択するのがいいかと思います。
目的3. モバイル/デスクトップ用のアプリケーションを作りたい
Node.jsではモバイルアプリケーションやデスクトップアプリケーションの開発ができます。
フレームワークはモバイルアプリケーションであればReact Nativeが、デスクトップアプリケーションであればElectronが使われることが多いです。React Nativeは使ったことがなく知識も少ないので、以下Electronのみについて説明します。悪しからず。
ElectronはJavaScript+HTML+CSSを使用してデスクトップアプリケーションを作成するためのフレームワークです。
JavaScriptは元々ウェブサイト用の言語ですのでUIの操作に使われることが多く、そういったライブラリやフレームワークは洗練され、成熟しています。その財産を利用してWebサイトと同じようにUIが構築できるというのは大きなメリットになります。また、Electronでは同じコードでWindows/Mac/Linuxのアプリが作成(クロスプラットフォーム開発)できます。
Visual Studio Code、Slack、Discord、Twitch、SkypeといったデスクトップアプリがこのElectronでできています。
目的4. その他
他にもウェブサイトのアセットをバンドル(webpack)するためにNode.jsを使ったり、SassをCSSに変換(node-sass)するためにNode.jsを使ったり、テストツール(Jest)やコード検証ツール(ESLint)を使うためにNode.jsを使ったり、開発用の簡易Webサーバ(webpack-dev-server)をローカルで立てるためにNode.jsを使ったり、静的サイトをビルド(Gatsby)するためにNode.jsを使ったりと、Node.jsは様々な用途で使われています。
最後に
Node.jsは他のプログラミング言語と同じような大きな可能性をJavaScriptにもたらしてくれました。(話が複雑になるので本文中では言及を避けましたがV8 JavaScriptエンジンのおかげでもあります)
ちまたで言われるように、たしかにJavaScriptは(その出自のせいもあり)他の言語に比べて設計が甘い部分もあります。それで同じ土俵に立たれてもなあ……という意見もわかります。
ですがこんなに若い層の使用人口が多く、ライブラリなども含めて物凄い勢いで進化していき、トレンドが走馬灯のように移り変わるプログラミング言語は他にありません。
jQueryなんてもはや歴史的遺物みたいな扱いになっていますが、誕生したのはRailsやDjangoより後ですからね。物凄いスピード感です。
この時代に生まれ、このスリリングなJavaScriptの進化の波に乗れるのはワクワクできて楽しいことだと個人的には思います。最後に、冒頭でも言いましたが、この記事で「Node.jsってWebサーバじゃないの?ES2015で書きたいだけなのになんでインストールしなきゃいけないの?」みたいなよくある疑問が解消できたら幸いです。
「JavaScriptはブラウザ上で動作してる。つまりパソコン上のブラウザ上で動作してるってことだから……結局パソコン上で動作してるのでは?」と思ってしまった方は、本文中の「パソコン上で動作」を「パソコン(OS)上で直接動作」と読み替えて読んでください。 ↩
昨今ではOSのセキュリティがしっかりしているのでインストールしたアプリケーションであっても自由に全てのOSの機能を使えるわけではなく、アプリケーションが特定の機能にアクセスしようとしてきたら、ユーザーに「これ本当に大丈夫?」と許可を求めることが多いです。 ↩
ActiveXとかいうのはこれができちゃいますが。 ↩
JavaScriptは関係ないですけど実際昔HDDバースト事件なんてのがありました。 ↩
ブラウザはインストールされたアプリケーションなので当然OSの機能へアクセスできます ↩
「JavaScriptでOSの機能にアクセスできる」と書きましたが、実はこれは微妙な表現で、実際にOSの機能にアクセスするにはC++でNode.jsの拡張機能を作る必要があります。ほとんどの場合、標準ライブラリやサードパーティライブラリが用意されていますが。 ↩
- 投稿日:2020-10-15T14:33:19+09:00
【JavaScript】オブジェクトが存在しているのにその中身を参照しようとするとundefinedになる
{ apple: 'りんご', lemon: 'レモン' }testObjectという名前の上記のようなオブジェクトを参照したいとします。
「りんご」という文字を取り出したいので、
console.log(testObject.apple); console.log(testObject['apple']);などとしてもコンソールには
undefinedの表示。
オブジェクト自体はあるのになぜ中身は参照できないの!?!?と困惑するかと思います。
それは、実はオブジェクトではなくてjson型のデータではないでしょうか。試しに、元のデータを見るため
console.log(testObject);としてみてください。
{ apple: 'りんご', lemon: 'レモン' }ではなく
{ "apple": "りんご", "lemon": "レモン" }のように出てくるかと思います。(※キーも値もダブルクォーテション)
こうなった場合、これはオブジェクトではなくjson型のファイルということです。
結論
testObject = JSON.parse(testObject);をしましょう。
これをすることでjson型がObject型に変換されます。
その後
console.log(testObject.apple);をすると
りんご表示できました!
逆に、Object型からjson型に変換したい場合には
testObject = JSON.stringify(testObject);を使ってくださいね!
- 投稿日:2020-10-15T12:56:09+09:00
"firebase deploy --only functions"が通らない時の対処法【Firebase】
はじめに
以下のように
firebase deploy --only functions
を叩いたところ、エラーが発生した時の対処方法を紹介します。% firebase deploy --only functions === Deploying to 'xxx'... i deploying functions i functions: ensuring required API cloudfunctions.googleapis.com is enabled... i functions: ensuring required API cloudbuild.googleapis.com is enabled... ✔ functions: required API cloudbuild.googleapis.com is enabled ✔ functions: required API cloudfunctions.googleapis.com is enabled i functions: preparing functions directory for uploading... Error: Cloud Runtime Config is currently experiencing issues, which is preventing your functions from being deployed. Please wait a few minutes and then try to deploy your functions again. Run `firebase deploy --except functions` if you want to continue deploying the rest of your project.対処法
エラーの内容としては、少し待てば解決しそうでしたが、一向に解決しなかったため、クライアント側のエラーだと考えました。色々と試行錯誤していくうちに、functions内のバージョンを
audit fix
で調整したらデプロイに成功しました。具体的には以下の手順で実行しました。
1.
npm install
まず、改めてパッケージをインストールしてみました。
% npm install audited 256 packages in 1.291s 32 packages are looking for funding run `npm fund` for details found 4 high severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details2.
npm audit fix
次に、audit fixを要求されたので、実行してみましょう。
% npm audit fix up to date in 0.752s 32 packages are looking for funding run `npm fund` for details fixed 0 of 4 vulnerabilities in 256 scanned packages 1 package update for 4 vulnerabilities involved breaking changes (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)3.
npm audit fix --force
強制的に実行しましょう。
% npm audit fix --force npm WARN using --force I sure hope you know what you are doing. + firebase-admin@9.2.0 added 31 packages from 55 contributors, removed 53 packages, updated 25 packages and moved 2 packages in 8.038s 2 packages are looking for funding run `npm fund` for details fixed 4 of 4 vulnerabilities in 256 scanned packages 1 package update for 4 vulnerabilities involved breaking changes (installed due to `--force` option)4.
npm list --depth=0 && npm install
続いて、インストールされているパッケージのバージョンを確認しましょう。
また、改めてnpm install
して、脆弱性がないかを確認しましょう。% npm list --depth=0 functions@ /Users/xxx/Documents/xxx/functions ├── firebase-admin@9.2.0 ├── firebase-functions@3.11.0 └── firebase-functions-test@0.2.2 % npm install audited 234 packages in 1.074s 6 packages are looking for funding run `npm fund` for details found 0 vulnerabilities5.
cd .. && firebase deploy --only functions
最後に、デプロイしていきましょう。
functionsのディレクトリに入っているため、一つ上の階層に戻り(cd ..
)、そこでデプロイを実行します。% cd .. % firebase deploy --only functions === Deploying to 'xxx'... i deploying functions i functions: ensuring required API cloudfunctions.googleapis.com is enabled... i functions: ensuring required API cloudbuild.googleapis.com is enabled... ✔ functions: required API cloudbuild.googleapis.com is enabled ✔ functions: required API cloudfunctions.googleapis.com is enabled i functions: preparing functions directory for uploading... i functions: packaged functions (24.65 KB) for uploading ✔ functions: functions folder uploaded successfully i functions: creating Node.js 10 function helloWorld(us-central1)... ✔ functions[helloWorld(us-central1)]: Successful create operation. Function URL (helloWorld): https://us-central1-xxx-xxx/helloWorld ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/xxx/overview
- 投稿日:2020-10-15T12:33:50+09:00
TypeScriptでHello, World!~インストール方法と使い方~
ごあいさつ
ひさしぶりの投稿です!
勉強は続けていたのですが、知識が増えてくると逆に自分の知識不足に気が付き、間違いを恐れて投稿できなくなっていました笑
今回の記事では、自分を含めた初心者向けにTypeScriptのインストール方法と使い方をまとめます。
相も変わらず初心者なので、間違いや補足情報等あればどんどん(やさしく)教えてください!TypeScriptとは
Microsoftが開発した、JavaScriptの欠点を補うプログラミング言語です。
「JavaScriptの欠点」とは何か。
公式( https://www.typescriptlang.org/docs/handbook/intro.html )によると、みんなプログラムの型エラーってよくやっちゃうよね。
でもJavaScriptってどんなに複雑なプログラムでも、
実際に動かしてみないと型チェックができないんだよね。不便だねー。
だからTypeScriptは、静的な型チェックができるようにしたよ!
動かす前にプログラムの型があってるかどうか確認できるよ!だそうです(超意訳)。
つまりTypeScriptは、JavaScriptの
実行しないとエラー確認ができない!
という欠点を、
Javaのようにコンパイル→実行の手順を踏むことで克服しています!えらい!試しに、誤ったJavaScriptのコードを書いて保存しました。
この時点ではエラーがでません。
しかしブラウザで開いてみると、
何も現れないので、コンソール確認でエラー判明。
たしかにこの手順、特に複雑なプログラムのときはとてもめんどくさいですね。一方、TypeScriptで誤ったコードを書き、実行前にコンパイルすると、
おー、教えてくれてありがとう!
わざわざブラウザで動かさなくていいので、複雑なプログラムでもすぐエラーに気が付けますね!インストール
さっそくはじめましょう!
初心者でも30分ほどで"Hello, World!"できますよ!①Node.jsのインストール
htmlに組み込むJavaScriptは、ブラウザ(クライアント)側の実行環境で動作しています。
一方、Node.jsは、サーバ側で動くJavaScriptの実行環境です。
Node.jsの公式サイトからインストーラをダウンロードしてインストールしましょう。
私は「推奨版」を選びました。②TypeScriptコンパイラのインストール
コマンドラインでTypeScriptのコンパイラをインストールします。
私はVisual Studio Codeのターミナルで行ったので、VSCodeを利用した手順を紹介します。1.ローカルの任意の場所にフォルダ作成
2.VSCodeで、作成したフォルダを開く
3.左上Viewタブ→Terminalを開く
4.初期化のコマンド
※いろいろ聞かれますが、とりあえず全部EnterでとばしてOKTERMINAL> npm init5.TypeScriptコンパイラをインストール!
TERMINAL> npm install -g typescript6.バージョン確認
TERMINAL> tsc -vここでエラーが発生しました。
TERMINAL+ CategoryInfo : セキュリティ エラー: ( : ) []、P SSecurityException + FullyQualifiedErrorId : UnauthorizedAccess
調査したところ、PowerShellの実行ポリシーがrestrictedになっていることが原因だそうです。
現在のポリシーを次のコマンドで確認すると、restrictedになっていました。TERMINAL> Get-ExecutionPolicy Restricted次のコマンドを実行してポリシーをBypassに変更したら、無事バージョンの確認ができました。
TypeScriptコンパイラのインストール成功です!TERMINAL> Set-ExecutionPolicy Bypass -Scope CurrentUserTERMINAL> tsc -v Version 4.0.3参考:PowerShellでスクリプトを実行するとセキュリティエラーになるときの対策 | 山本 隆 ( https://www.gesource.jp/weblog/?p=8203 )
実行
インストールお疲れ様でした!
さあ、TypeScriptを実行しましょう!①コンソール表示
先ほど開いたフォルダ内にhello.tsというファイルを作成し、
コンソール表示のコード書いて保存!hello.tsconsole.log('Hello, World!');次に、ターミナルでコンパイル!
以下のコマンドを実行しましょう。TERMINAL> tsc hello.tsすると、あら不思議!
同じフォルダにhello.jsというファイルが作成されています!
こちらは特にいじる必要なし。hello.jsconsole.log('Hello, World!');最後に実行!
ターミナルで以下のコマンドを実行してください。TERMINAL> node hello.js Hello, World!Hello, World!が表示されました!
②ブラウザ表示
まず、同じディレクトリにindex.htmlというファイルを作成します。
headの中にscriptタグを記述し、コンパイルで作成されるhello.jsを指定します。index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf8"> <script src="hello.js"></script> </head> <body></body> </html>hello.tsの中身は画面表示のコードに変更しましょう。
hello.tsdocument.write('Hello, World!');そしてコンパイル!
TERMINAL> tsc hello.tsindex.htmlを開いてみると…
Hello, World!が表示されました!
ちなみにDocumentオブジェクトの場合、ターミナルでの実行には失敗するようです。
TERMINAL> node hello.js C:\BlankFolder\hello.js:1 document.write('Hello, World!'); ^ ReferenceError: document is not defined at Object.<anonymous> (C:\BlankFolder\hello.js:1:1) at Module._compile (internal/modules/cjs/loader.js:1015:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10) at Module.load (internal/modules/cjs/loader.js:879:32) at Function.Module._load (internal/modules/cjs/loader.js:724:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) at internal/main/run_main_module.js:17:47おわりに
やり方がわかっても、文章で人に説明するのは難しいです。
Qiitaで記事を書こうとすると特に、有識者の方に怒られないよう一生懸命調べるのでいい勉強になります笑
最後まで読んでくださってありがとうございました!
- 投稿日:2020-10-15T11:48:11+09:00
スマブラSP大会用ライブ配信レイアウト "ssbutw" を使うまで【NodeCG】
こんにちは。普段はゲームのオフライン大会運営をしながら、日曜大工的に浅瀬でプログラムの勉強をしている者です。
今回NodeCGに関する学びが僅かながら蓄積してきたことと、大変便利そうなライブ配信レイアウトの存在に知ったことをきっかけに筆を取りました。
記事の目的
- スマブラを始めとする対戦ゲーム勢に「ssbutw」を紹介し、アプリを起動し使うところまでの方法を共有する
- 備忘録の作成
(アプリの中身を書く話はしません。あくまで使うまで)
想定読者(自己紹介)
- StreamControlを使ったことがある、またはOBSのテキストソースでスコア管理をしたことがあり、BANステージなどよりリッチな配信レイアウトを使ってみたい
- スマブラSPをはじめとする対戦ゲームのライブ配信に興味がある
- 自分で配信レイアウトを作成するほどの技術はないが、調べながらありものを動かすことはできそう
ssbutwとは
ssbutwは、スマブラSP大会用ライブ配信レイアウトの表示・操作・管理を行うアプリです。
ウメブラ・ヒロスマ等のStreamControlをNodeCGで動くように改造したもので、BANステージ表示やSmash.gg連携など機能が追加されています。
オリジナルのページにはスコアボードや操作UIのスクリーンショットがたくさん載っています。
StreamControl等を見慣れている人なら直感的に理解できると思います。(英語です)※StreamControlって何?という方は「日本 StreamControl 学会」をご参照ください。
日本 StreamControl 学会
http://streamcontroljapan.blog.jpできること
従来のStreamControlでもできたこと:
- 選手情報の表示(名前、Twitter、国旗、スポンサー)
- スコア表示
- 大会名、ラウンド表示
- ファイターアイコン表示
- Lower thrids表示
ssbutwで追加されていること:
- BANステージ表示
- 複数オーバーレイ対応(ウメブラ2種、GENESIS6、FB2019ダブルス、ヒロスマ)
- 参加者情報インポート(Smash.gg API、Challonge API ※Smash.ggの方は不具合あり?)
- 参加者情報リスト管理(名前1、名前2、チーム、Twitter、国、使用ファイター)
- 3言語対応(繁体中国語、英語、日本語)
従来のStreamControlと比較したメリット・デメリット
概して、
「必要な機能を揃えて誰でも使えるようにシンプルにまとめたStreamControl」
vs
「導入までに学習コストがあるが多機能なNodeCGレイアウト」というイメージです。
メリット
- BANステージを表示できる
- 選手情報を分かりやすく管理できる
- オーバーレイ更新をリモートで役割分担できる
デメリット
- アプリを起動するまでの環境構築や準備が必要
- サーバーを用いる場合は接続トラブルが発生する可能性がある
前提知識
基本的にありものを用いるのでプログラムをいじることはありません。
ターミナル, git, node.js, NodeCG, Webサーバに関する浅瀬の知識があると作業の全体像が掴みやすい程度です。ここでは本記事を読む上で最低限必要なNodeCGに関する情報を簡単に説明します。
ちゃんと知りたい人はHoishinさんの記事やコミュニティDiscordを参照して下さい。というか推奨します。ライブ配信レイアウトを作るNode.jsのフレームワーク
https://qiita.com/Hoishin/items/36dcea6818b0aa9bf1cd
https://twitter.com/nodecg
記事群
https://qiita.com/search?q=nodecgNodeCGとは、Webの技術を使って動的でリッチな配信レイアウトを作成・管理する技術の様式です。
国内だとRTA in JapanをはじめとするRTA勢の方々が中心になって使用・開発されています。主な構成要素はDashboardとGraphicsの2つで、2つをまとめたものをBundleと呼びます。
Dashboardは操作部分で、Graphics配信レイアウト部分です。
前者をブラウザで開き、後者は配信ソフトでブラウザソースとして開きます。
前者を操作すると後者に反映されるという流れになります。色々な方々がBundlesを開発しています。
RTA用、格ゲー用など様々なBundlesが作られています。
今回のssbutwは主にスマブラSP用に作られたもので、中身としては、Dashboard(操作部分)は
- スコア入力
- 選手情報管理
- 選手情報インポート
- BANステージ選択
が、Graphics(配信レイアウト)は
- スコア・プレイヤーネーム表示(ウメブラ・ヒロスマ・GENESISなど各大会仕様のレイアウト)
- BANステージ表示
が入っています。
普通のWebページと同じようにWebサーバを立ててアプリを起動すれば、配信PC以外の端末(リモート端末や選手用のタブレットなど)から操作が可能です。
使用パターン
主な使い方としては3パターンくらいがあるかと思います。
- 配信PC(ローカル)で完結
- LAN内で完結
- Webサーバを利用
パターン1は配信PC上でNodeCGアプリを起動し、同PC上でスコアボード更新など全てを行う場合です。
パターン2は配信PCと同一LAN内のPC(配信PCでも可)でNodeCGアプリを起動し、そのLAN内の端末からスコアボードを操作したり、選手がBANステージを入力したりする場合です。
パターン3はWebサーバ上でNodeCGアプリを起動し、配信PCやスタッフ/選手用の操作端末から操作する場合です。BANステージを配信画面に表示させるとしたら、パターン2か3を採用するのが良さそうです。
著者の環境
今回はMacを用います。
macOS Catalina 10.15.4
nodebrew 1.0.1
node.js 12.18.3
npm 6.14.6
NodeCG 6.1.0
zshWindowsでもgit bashを用いて動作確認しています。
起動までの流れ
続いて起動までの流れを説明します。
主な流れは以下の通りです。
- 必要なものをインストール(git, node.js, nodecg-cli, NodeCG, ssbutw-bundles)
- 使用パターンに応じた設定(LAN内の配信 or AWS EC2 上で起動)
- アプリを起動
ローカルで完結させる場合と、Webサーバを用いる場合に分けて説明します。
起動までの流れ(ローカル版)
オリジナルのページのInstallation最下部「Directly Download Build Bundle (If you want to add your own dashboard/layout)」の流れに沿っています。
ssbutw Installation
https://github.com/crs38c28/ssbutw/wiki/Installation0. ターミナルを起動
所謂「黒い画面」のターミナルを起動します。
ここから文字を入力して、必要なものをインストールしたりファイルを操作したりします。操作する上で
cd
ls
open
mkdir
などコマンドが必要になります。
必要あれば「ターミナル コマンド」などで調べて下さい。1. nodebrew, node.jsをインストール
nodebrew: node.jsをバージョンを管理するもの、node.jsを効率よくインストールするのに必要
node.js: javascriptの仲間、NodeCGを使うために必要1.1. nodebrewのインストール
nodebrewをインストールするためのパッケージ管理ツールであるhomebrewをインストールします。
ターミナルに下記を入力します。$ sudo /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"nodebrewをインストールします。
$ brew install nodebrew1.2. node.js をインストール
node.js (v12.18.3) をインストールします。
$ nodebrew install 12.18.3バージョンを確認してインストールできていることを確認します。
$ node --version v12.18.3 $ npm --version v6.14.6npmは、node.jsを使う上で便利な機能のまとまりを飛び道具的に扱いやすくしてくれる管理システムのようなものです。
参考
初めてのコマンドライン=>npmの利用まで
https://qiita.com/y_sekitoba/items/f0d50afe3884bd22f6d52. nodecg-cliをインストール
NodeCGをターミナルから操作するために必要な「nodecg-cli」をインストールします。
$ npm install -g nodecg-cli bower3. NodeCGをインストールするフォルダを作成
"your-nodecg-project-name" の部分はフォルダ名です。
分かれば何でも良いです。
ターミナルを特に操作していないとフォルダはhomeフォルダに作成されます。
作成する場所を変更したい場合は、あらかじめcd
を用いて移動してください。$ mkdir your-nodecg-project-name $ cd your-nodecg-project-name4. NodeCGをセットアップ
作成したフォルダにNodeCGをセットアップします。
$ nodecg setupこのコマンドを実行して、対象のフォルダに様々なファイルやフォルダが作成されればセットアップは成功です。
※your-nodecg-project-nameが空のフォルダでないとエラーが出ます。5. bundleをセットする
"your-nodecg-project-name" フォルダ直下の "bundles" フォルダに移動します。
$ cd bundlesssbutwのbundleをダウンロードします。
$ git clone https://github.com/YujiAIda/ssbutw-bundleフォルダ名をssbutwに変更します。
$ mv ssbutw-bundle ssbutw8. ssbutwをnpmで管理できるようにする
$ cd ssbutw $ npm install9. your-nodecg-project-nameに階層を合わせてアプリを起動
$ cd ../.. $ nodecg start問題なく起動すれば "http://localhost:9090" で起動している旨が表示されます。
ブラウザのアドレスバーに "http://localhost:9090" を入力して起動を確認できます。11. 同一LAN内の別端末で開く
同一LAN内の別端末で開く場合は、(ホストのIPアドレス):9090をブラウザから開きます。
ホストのローカルIPアドレスは下記コマンドで調べます。$ ifconfigずらっと文字が表示されますが、"en0(Wi-Fiの場合)" の "inet" の横の数字がローカルIPアドレスです。
Wi-Fi接続でない場合は、それっぽい項目かを試すか、 "ifconfig" でググってください。12. アプリを終了
Ctrl + Cを入力
起動までの流れ(AWS EC2版)
注意:AWS EC2は利用料金が発生する場合があります。基本的に無料枠の範囲で利用すれば気にする必要はありませんが、ご自身で調べてから使用することを推奨します。
基本的な流れはローカル版と同じです。
AWS EC2のインスタンス(仮想PCみたいなもの)を作成し、そこの上でアプリを起動し、そこにアクセスするという流れです。1. AWS EC2インスタンス準備
AWSの設定はこちらの記事を参考にしました。
AWS EC2でNodeを動作させる
https://qiita.com/oishihiroaki/items/bc663eb1282d87c46e97まずはこちらの5章まで進め、以下を完了させます。
- AWSアカウント作成
- EC2インスタンス作成
- SSHでEC2 インスタンスへ接続
- node.jsのインストール
2. アクセス関係の設定
次に、外部端末からアクセスする宛先に関する設定と確認を行います。
2.1. パブリックIPアドレスの確認
EC2ダッシュボードから確認します。
2.2. ポート(9090)解放
下記記事を参考にしました。
セキュリティーグループにルールを追加する (サーバーのポートを開放する) - Amazon AWSの使い方 Tips
https://www.ipentec.com/document/amazon-ec2-add-rule-to-security-group
- EC2ダッシュボードを開く
- 左メニューから「セキュリティグループ」をクリック
- 実行中のインスタンスで使用するセキュリティグループ名をクリック
- インバウンドルールをクリック
- インバウンドルールを編集をクリック。
- ルールを追加をクリック。タイプを「カスタムTCP」、ポートを「9090」、ソースを「任意の場所」とする
- ルールを保存をクリック。
3.NodeCGの準備
無事AWS EC2インスタンスに接続できたら、上記「起動までの流れ(ローカル版)」の手順でnodecg start まで行います。
4.他のデバイスから開く
EC2ダッシュボードで確認したグローバルIPをブラウザ(ブラウザソース)に入力します。
例: http://[グローバルIP]:9090/これで開かなければポート9090が開放されているか確認します。
問題なくと動いていれば、複数デバイスで同じページを開き、片方で操作したことがもう一方に反映されることを確認できます。5.終了時
5.1. アプリの終了
Ctrl + C
5.2. EC2 インスタンスの終了
EC2ダッシュボードから「インスタンスの状態」→インスタンスの終了をクリックします。
インスタンスが終了(≒削除)されるます。
課金されなくなります。「停止」だけだと、アプリを切っていても課金され続けるので注意。(Elastic IPを占有し続けるかららしい)
備考
元のgithubのbundlesブランチだけgit cloneする方法がわからなかったので、自分用にリポジトリ作りました。
上記のやり方だとnodecg startするとCtrl + Cするまでターミナル が占有されてしまうので、バックグラウンドでアプリを動かし続けるforeverみたいな道具を使うと安全かもしれません。
Node.jsアプリをLinux環境で常駐化させる forever編
https://qiita.com/chihiro/items/24ca8ac81cb20c22b47e今回は勉強がてらAWS EC2を利用しました。
VirtualBoxや他のレンタル/クラウドサーバーとかでもっといい方法があるかもしれません……。オリジナルのNodeCGアプリはジョーカーが参戦したあたりで更新が止まっています。
小戦場を追加する際は自身で画像を用意し、うまく名前を変更して画像フォルダに追加する必要があります。
ファイターの追加はよくわかっていません……。JavaScriptの学習はこちらを利用しました。旧NodeCG Discordでお薦めされていました。
- 投稿日:2020-10-15T02:01:10+09:00
play.jsとWorking Copyで、iPad上にNode.js実行環境を構築する。
iPad miniでNode.js実行環境を構築できたので、まとめてみました。
この記事でできること
- iPadでNode.jsをローカル実行する。
- iPadからGitHub上のリポジトリに対してpush / pullする。
注意事項
これから紹介するNode.js実行アプリは、エミュレータであり、
本家Node.js / npmの一部しかサポートしていないので、
PCでできることがそのままできたりはしないことに注意してください。筆者のハードウェア環境
Node.js実行環境の構築手順
アプリをインストールする
play.js - JavaScript IDE
Node.js実行アプリ。npmやnodeを実行できますが、あくまでエミュレータ。
PCみたいにnpmやnodeを自由に実行する事はできません。
しかし、expressとReactでWebアプリを作成して実行できたりしますので、
かなり遊べます。Working Copy - Git client
Gitクライアント。簡単な手順でGitHubにSSH接続できたりします。
pushを行うには、課金してProにグレードアップする必要があるものの、
play.jsのGit機能でpushできますので、課金する必要はありません。GitHubにリポジトリを作成する
先にブラウザで、GitHubに空のリポジトリを作成した方が簡単です。
Working Copyでリポジトリをcloneする
Working Copyを起動して、作成したリポジトリをcloneします。
接続はSSHで行いますが、アプリが自動でキーを作成・登録してくれます。cloneするには、左ペインの上にあるプラス (+) アイコンをタップして、
"Clone repository" を選択します。
iOSアプリ「ファイル」でWorking Copyを閲覧可能にする
iOSアプリ「ファイル」を起動して、
左ペインの上にあるミートボール(…)アイコンをタップし、「編集」を選択します。
Working Copyの項目がありますので、スイッチをオンにしてください。
play.jsでプロジェクトを作成する
play.jsを起動して、プラス (+) アイコンをタップし、新規プロジェクトを作成します。
Name、Typeを入力して、Directoryに "Select directory" を選択します。
表示されたダイアログに、先ほど閲覧可能にしたWorking Copyがありますので、
その中からリポジトリを選択します。
後はplay.jsでプログラミングをするだけです。
.gitignoreを作成してnode_modulesを含めることを忘れずに。なお、Gitの操作は、基本的にplay.jsで行います。
Working Copyでpushを行うには課金が必要ですが、
play.jsからpushできますので、課金しなくても大丈夫です。サンプルの紹介
Satomaru/mosaic-tile
これは、私が習作としてパクっ作ってみたパズルゲームです。
プログラミングを参考にされるのは恥ずかしいので、
play.jsの使い方を参考にする程度に見て、いじめないでください……。
- 投稿日:2020-10-15T01:01:08+09:00
docker-composeのnode_modules問題にぶちあったたときにやった対処方法
どんな問題?
最近、
docker-compose
でnode
の環境を構築するとき、コンテナ内のnode_modules
がどっかに行ってしまうという問題に遭遇した。いろいろ調べてみると、
docker-compose
でローカルのディレクトリをコンテナ内にマウントする際に、上書きされてしまい、コンテナ内のnode_modules
が消えてしまっているようだ。どう解決したの?
https://qiita.com/suin/items/e53eee56da23d476addc の記事などを見ると、
volumes
を作成し、node_modules
をそこにマウントすることで、回避することができるようだ。
しかし、これだとローカル環境にnode_modules
が生成されないため、TypeScript
でパッケージの型定義を参照できず、TypeScript
を使うことの旨味が薄れてしまう。この問題を解決するために、
docker-compose
のcommand
でyarn install
もすることで、コンテナ内のnode_modules
をローカルにマウントされるようにして、ローカルにnode_modules
を持ってくるようにしている記事を見た。
だが、この方法だとdocker-compose up
をするときにyarn install
が走ってしまうため、docker-compose up
でまあまあな時間がかかってしまった。(ローカルにコンテナ内のnode_modules
を持ってくるのにもめちゃめちゃ時間がかかっているようだった)そこで、以下のような方法で解決をするようにした。(この解決方法がBadであれば、教えていただけると勉強になります)
. ├── app │ ├── Dockerfile │ └── src │ ├── package.json │ └── yarn.lock └── docker-compose.ymlDockerfileFROM node WORKDIR /app ADD src/package.json /app/ ADD src/yarn.lock /app/ RUN yarn installdocker-compose.ymlvolumes: # ←追加 app_node_modules: # ←追加 services: app: image: ./app volumes: - ./app/src:/app/ - ./app/src/node_modules:/app/node_modules # ←追加 # 以下略ここまでは https://qiita.com/suin/items/e53eee56da23d476addc の記事と同じだ。
これにプラスで、パッケージを追加したときに以下のスクリプトを実行すること(docker-compose build
の代わり)で、ローカルにもnode_modules
を生成するようにした。build.shdocker-compose build cd app/src && yarn installとりあえずこれで、
node_modules
が消えてしまう問題と型定義がない問題を解決することができた。
しかし、ローカル環境にnode
があることが前提になってしまっているため、もっといい解決方法があればいいな〜と思っている。(が、わからなかった)おわりに
いい解決方法があればぜひ教えていただけると嬉しいです。