20190403のNode.jsに関する記事は7件です。

投稿日：2019-04-03T23:58:37+09:00

Vuepress で生成したWebサイトを Now にデプロイしてみる

Vuepress とは

Vuepress とは Vue で作られた静的サイトジェネレータのこと。
静的サイトジェネレータといえば有名どころは
* jekyll
* Hugo
などが挙げられる。
Vueで静的にサイトを作るのなら Nuxt.js でも良さそうにも思えるが、Vuepressは技術文書を静的に管理することに焦点を当て作成している。
why-not

Vuepress インストール

下記コマンドでインストールできる。
$ npm install -g vuepress
Vuepress を使ってみる

Vuepress はREADME.mdを起点にサイトを生成するようになっている。
実際にどのように動作するか下記のREADME.mdを作成して確認する。
# h1
## h2
### h3
#### h4
##### h5
Headers

## List

* Item 1
* Item 2
* Item 3
 + Item 3-1
 + Item 3-2

## Link
[Vuepress](https://vuepress.vuejs.org)
README.mdのあるディレクトリで下記コマンドで動作を確認できる。
$ vuepress dev
HTMLファイル等を生成するには下記コマンドを入力する。
$ vuepress build
Now とは

Nowとは簡単にWebアプリをデプロイできるサービスのこと。
CLIからコマンド一回でデプロイすることができる。
今回作成したサイトをさくっと公開するために使ってみる。
このデプロイの仕方はNow公式でも書かれている。
nowコマンドの使い方

nowコマンドをインストール・ログイン

nowにデプロイするためにnowコマンドをインストール
$ npm install -g now
次にNowを使うためにアカウントを登録する。
サインアップ

登録が済んだら下記コマンドを入力しCLI上でログイン
$ now login
メールアドレスを入力した後に届くメールのリンクを踏めばログインは完了する。

デプロイ

デプロイをするにはコードをNow側でビルドしてもらわないといけない。
なのでビルドできるように依存関係を書く必要がある
具体的にはREADME.mdを書いたディレクトリでVuepressをインストールする。
$ npm install vuepress --save-dev
次に下記内容のpackage.jsonを同じディレクトリに用意する。
{
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build",
    "now-build": "npm build && mv .vuepress/dist dist"
  }
}
dev,buildでvuepressのコマンドを呼べるようにしている他、now-buildという項目を定義している。
now-buildはnowコマンドで静的サイトを公開する設定にしていると呼ばれる。
ここではvuepressで生成したファイルをdistディレクトリに移すようにしている。

次にnow.jsonというnowコマンドの設定ファイルを用意する
{
  "version": 2,
  "name": "vuepress",
  "builds": [
    { "src": "package.json", "use": "@now/static-build" }
  ]
}
versionはnowコマンドのバージョン。
nameはデプロイする時に使用する名前。
buildsはnowコマンドでデプロイする際、ビルドするかしないか、ビルドする際はどのように公開するかを定義する項目となっている。
now.jsonの詳細な解説はドキュメントを参照すると良い。

これらを揃えた状態で下記コマンドを入力するとURLが出力される。
$ now
ビルドが無事に済めば下記のように公開される。
https://vuepress.famasoon.now.sh/

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-03T20:16:55+09:00

Node.jsを用いてSlackのuser idから情報を取得する

Slack APPでユーザーを取得しようとするとユーザーIDが取得される為
APIを用いてユーザーIDからユーザーの詳細情報を取得する

requestモジュール

https://www.npmjs.com/package/request
requestモジュールは HTTP/HTTPS 通信を行うためのクライアント。

users.infoメソッド

https://api.slack.com/methods/users.info

Slack APIには様々なメソッドが用意されている
今回はアカウントの詳細情報を取得したいので users.infoを使って取得する

Slack APIからの情報取得

簡単に言うと下記のURLにトークンとユーザーIDをつけてアクセスすると詳細情報が返ってくる仕組み

https://slack.com/api/users.info?token=トークン&user=ユーザーID&pretty=1

サンプルコード

Node.jsでAPIを叩くときは以下のように書く
TOKENとUSERIDを書き換える
index.js
// パッケージの読み込み
let request = require('request');

// ヘッダーを定義
var headers = {'Content-type': 'application/json'};

// オプションを定義
var options = {
  url: 'https://slack.com/api/users.info?token=TOKEN&user=USERID&pretty=1',
  method: 'GET',
  headers: headers,
  json: true,
};

// リクエスト送信
request(options, function (error, response, body) {
  console.log(body); // body内に取得したJSONが入っている
})
ユーザーIDを動的にしてAPIを叩く

Slack APPなどから取得したユーザーIDを使って検索する際はES2015(ES6)から追加されたテンプレート構文を用いると便利

JavaScript (ES2015) 文字列中に変数展開できるテンプレート構文のメモ
index.js
// パッケージの読み込み
let request = require('request');

// message.channels eventで取得した場合
if (payload.event && payload.event.type === 'message'){

  // 取得したユーザーIDを代入
  user_id = payload.event.user;

  // ヘッダーを定義
  var headers = {'Content-type': 'application/json'};

  // オプションを定義
  var options = {
    // バックスラッシュ内のテキストに　${変数名}　で変数を入れられる
    url: `https://slack.com/api/users.info?token=TOKEN&user=${user_id}&pretty=1`, 
    method: 'GET',
    headers: headers,
    json: true,
  };

  // リクエスト送信
  request(options, function (error, response, body) {
    console.log(body); // body内に取得したJSONが入っている
  })
};
前まではuserを取得したらメールアドレスが返ってきていたような気がするけど
こっちのほうがユーザーIDから一気に様々な情報が取れるから便利

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-03T18:50:51+09:00

Outgoing WebHooksの代わりをSlack APPで実装する

OutgoingWebHooks と GoogleCloudFunction でSlackチャンネル内の発言に応じた情報の抽出をおこなっていたが
公式は以下のように発表した

これは、従来のカスタム統合に関する情報（チームがSlackと統合するための古い方法）に関する情報を探しているためです。これらの統合はより新しい機能を欠いており、将来廃止される可能性があり、おそらく削除されるでしょう。私達はそれらの使用をお勧めしません。

めっちゃ便利だったのに。。。
親愛なる友を亡くした悲しみは大きいが落ち込んでいる場合じゃない

代替えのアプリを作らなければ！！

代わりに、私たちはあなたがそれらの置き換えについて読むことを勧めます - Slackアプリ。スラックのアプリケーションを構築することができるだけで、独自のワークスペースのかのApp Directoryを介して配布され、彼らは最新かつ最高のAPIとUI機能を使用することができます。

公式も自分で作れと言っているようだ
まあ確かに自由度が増したほうが拡張性があるから開発者としては嬉しいかも

とりあえず実装してみる

Slack APPの作成

https://api.slack.com/appsにアクセスして、App NameとWorkspaceを入力して Create App で新しいアプリを作成

Bot Usersの作成

作成後、基本情報ページに遷移するので、必要な機能を追加していく
今回はOutgoing WebHooksの代わりなので、Botの設定はいらないが、自動返信なども設定したいのでBotの基本設定も行う

まずはワークスペースを監視するBotの追加をおこなう


必要な情報を記入してBot Userを作成

Event Subscriptionsの有効化

ワークスペース内で起きたイベントに応じて指定したURLにアクセスするように設定する
Request URLに希望のURLを記入

ここで普通にGCFやGASのURLを書き込んでも怒られる
Event Subscriptions の受け取り先になるには、そのサーバーを所有していることを証明する必要があるため、既存のファイルに以下の処理をコピペ。

何をやっているかというと、URLを記入欄に入力してきた瞬間にchallengeっていう値が投げられてくるからchallengeっていう値を投げ返すだけ
index.js
if (payload.type === 'url_verification') {
  return res.status(200).json({ 'challenge': payload.challenge });
}
res.status(200).send('OK');
処理を実行するイベントを選択

ご丁寧に説明までつけてくれている
今回はチャンネルにメッセージが投稿されたのをトリガーに処理を実行するので message.channels を選択

Bot Eventsも同様に　message.channels を選択

SaveChangeで設定を保存

ワークスペースへのインストール

設定の OAuth & Permissions の Scopes で、bot を追加します。

あとは　　を押してSlackワークスペースへのインストールが完了

情報の取得

message.channels event を用いて情報を取得すると以下のように飛んでくるので好きに料理する
index.js
if (payload.event && payload.event.type === 'message'){
  console.log(payload.event); // payload.eventの中に上記画像の情報が含まれる
}
文献が英語ばっかりなので拒否反応が出るのはわかるけど
使ってみたらかなり自由度が高くて使いやすいからオススメ

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-03T18:50:51+09:00

SlackにおけるOutgoing WebHooksの代わりをSlack APPで実装する

OutgoingWebHooks と GoogleCloudFunction でチャンネル内の発言に応じた情報の抽出をおこなっていたが
公式は以下のように発表した

これは、従来のカスタム統合に関する情報（チームがSlackと統合するための古い方法）に関する情報を探しているためです。これらの統合はより新しい機能を欠いており、将来廃止される可能性があり、おそらく削除されるでしょう。私達はそれらの使用をお勧めしません。

めっちゃ便利だったのに。。。
親愛なる友を亡くした悲しみは大きいが落ち込んでいる場合じゃない

代替えのアプリを作らなければ！！

代わりに、私たちはあなたがそれらの置き換えについて読むことを勧めます - Slackアプリ。スラックのアプリケーションを構築することができるだけで、独自のワークスペースのかのApp Directoryを介して配布され、彼らは最新かつ最高のAPIとUI機能を使用することができます。

公式も自分で作れと言っているようだ
まあ確かに自由度が増したほうが拡張性があるから開発者としては嬉しいかも

とりあえず実装してみる

Slack APPの作成

https://api.slack.com/appsにアクセスして、App NameとWorkspaceを入力して Create App で新しいアプリを作成

Bot Usersの作成

作成後、基本情報ページに遷移するので、必要な機能を追加していく
今回はOutgoing WebHooksの代わりなので、Botの設定はいらないが、自動返信なども設定したいのでBotの基本設定も行う

まずはワークスペースを監視するBotの追加をおこなう


必要な情報を記入してBot Userを作成

Event Subscriptionsの有効化

ワークスペース内で起きたイベントに応じて指定したURLにアクセスするように設定する
Request URLに希望のURLを記入

ここで普通にGCFやGASのURLを書き込んでも怒られる
Event Subscriptions の受け取り先になるには、そのサーバーを所有していることを証明する必要があるため、既存のファイルに以下の処理をコピペ。

何をやっているかというと、URLを記入欄に入力してきた瞬間にchallengeっていう値が投げられてくるからchallengeっていう値を投げ返すだけ
index.js
if (payload.type === 'url_verification') {
  return res.status(200).json({ 'challenge': payload.challenge });
}
res.status(200).send('OK');
処理を実行するイベントを選択

ご丁寧に説明までつけてくれている
今回はチャンネルにメッセージが投稿されたのをトリガーに処理を実行するので message.channels を選択

Bot Eventsも同様に　message.channels を選択

SaveChangeで設定を保存

ワークスペースへのインストール

設定の OAuth & Permissions の Scopes で、bot を追加します。

あとは　　を押してSlackワークスペースへのインストールが完了

情報の取得

message.channels event を用いて情報を取得すると以下のように飛んでくるので好きに料理する
index.js
if (payload.event && payload.event.type === 'message'){
  console.log(payload.event); // payload.eventの中に上記画像の情報が含まれる
}
文献が英語ばっかりなので拒否反応が出るのはわかるけど
使ってみたらかなり自由度が高くて使いやすいからオススメ

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-03T15:37:41+09:00

npm@6.9.0でnpm installしたら出来なかった

現象

タイトル通り、Macでnpm@6.9.0でnpm installしようとしたら以下のようなエラーが出ました。
npm WARN tar EISDIR: illegal operation on a directory, open '/Users/username/workspace/node_modules/.staging/@emotion/memoize-08ad4918/dist'
解決策

調べたところ、どうも6.5以降にすると起きるようなのでダウングレードするか、
以下の様にディレクトリの所有権を自分に変更してからnpm installすると出来るようです。
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib
sudo chown -R $(whoami) /usr/local/bin
詳しくは以下に書かれています。

https://npm.community/t/global-installs-sudo-npm-i-g-fail-on-mac-after-6-5-upgrade-works-fine-after-6-4-1-downgrade/4082/10

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-03T12:58:49+09:00

FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！

技術書典が近いですね！

技術書典向けに作った紙の本を同時に電子書籍としても配信できるFL Bricksというサービスの使い方をまとめました。

FL Bricksとは

https://www.bricks.pub

FL Bricksは独自の出版サービスを展開したい出版者向けのマイクロサービスシリーズです。
機能単位で利用できるため、柔軟に独自の出版サービスを構築出来ます。

FL Bricksはクローズドベータ提供中で現在は問い合わせからしかユーザー登録ができません。

FLB ROOT

FLB ROOTは、出版コンテンツを管理・制御するサービスです。
登録した出版コンテンツの書籍ファイル・書誌情報を誰がどのように使用するかを管理・制御します。

このサービスで電子書籍の管理や自分のアプリの登録をします。

FLB BinB

FLB BinBは、出版コンテンツをWEBブラウザ上で閲覧可能にするサービスです。
FLB ROOTで使用許可されたPDF ／ ePub 形式の出版コンテンツをコンバートし、BinB ビューワーで閲覧可能にします。

FLB BinBを使うとFLB ROOTに登録された電子書籍を配信できます。
BinBはいろんなサイトでの実績がある電子書籍ビューワーです。

FLB ROOTにログインしてみる

ログインしました。
コンソールでは主にコンテンツオーナーとBrickの管理ができます。

コンテンツオーナー

コンテンツオーナーとは、コンテンツを所有し管理する組織や個人です。例えば、○○出版、○○出版××編集部等

Brick

Brickとは、FL Bricksを使って構築されたサービスやアプリケーションです。

これを登録するとAPIキー等開発に必要な情報が取得できます。

サンプルアプリを作ってみよう

技術書典向けに書いた本をTwitterやその他SNSから読めるようなサイトを想定してサンプルを作ってみます。

作業の流れ

サンプルアプリを作るにあたって全体の流れを確認しておきます。

Brick登録

コンテンツ登録

コンテンツオーナーを登録する

コンテンツの利用権限を設定する

APIを使ってコンテンツを登録する

APIを使ってファイルをアップロードする

APIを使って画像をアップロードする

コンテンツ閲覧

FLB BinBにログインする

Brick情報を登録する

APIを使ってコンテンツを読むためのリンクを生成する

読めました

1. Brick登録

Redirect URIにはひとまずhttp://localhost を指定しておきます。

APIキーなどの情報を取得できました。

2. コンテンツ登録

コンテンツオーナーを登録する

コンテンツの利用権限を設定する

先程作ったBrickとFLB BinBに対してこのコンテンツオーナーが持っているコンテンツを使えるように許可を与えます。

APIを使ってコンテンツを登録する
以下の登録APIを使って登録します。
https://console.root.bricks.pub/docs/api/v1#owners-contents-create
curl --location --request POST "https://api.root.bricks.pub/v1/owners/{あなたのコンテンツオーナーのID}/contents" \
  --header "Content-Type: application/json" \
  --header "X-API-KEY: {BrickのAPIキー}" \
  --header "Authorization: Bearer {Access token}" \
  --data "{
    \"title\": \"FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！\",
    \"description\": \"FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！\",
    \"authors\": [
        {
            \"name\": \"@shwld\",
            \"role\": \"著\"
        }
    ],
    \"image\": {
        \"filename\": \"cover.jpg\"
    },
    \"file\": {
        \"filename\": \"flb.pdf\",
        \"layout_type\": \"pre_paginated\",
        \"trial_range\": \"-5\"
    }
}"
事前にイメージ画像とPDFファイルを用意しておくことをオススメします。

レスポンス：
{
    "data": {
        "id": "xxxxxxxxxxxxxxxx",
        "title": "FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！",
        "description": "FL Bricksという電子書籍を簡単に配信できるサービスを使ってみよう！",
        "owner_id": "{あなたのコンテンツオーナーのID}",
        "authors": [
            {
                "name": "@shwld",
                "role": "著"
            }
        ],
        "file": {
            "upload_url": "https://s3.ap-northeast-1.amazonaws.com/root.bricks.pub/content_files/eafd96f6-0c97-432a-a677-16dc306004ed/1d9338b0-dbd6-4944-8791-c8cfb5a8fda6.pdf?x-amz-acl=private&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJLLXFHCUMKSFOTJA%2F20190327%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20190327T005943Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=22214dd5895bd06cb70df338c1fcbcd63c954643a7c99c4fb9550964b69d6ff6",
            "layout_type": "pre_paginated",
            "trial_range": "-5",
            "size": null,
            "uploaded_stamp": null
        },
        "image": {
            "upload_url": "https://s3.ap-northeast-1.amazonaws.com/root.bricks.pub/content_images/eafd96f6-0c97-432a-a677-16dc306004ed/7a0c6027-50d5-49fe-8133-3d1dbf2f92cf/default.jpeg?x-amz-acl=public-read&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJLLXFHCUMKSFOTJA%2F20190327%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20190327T005943Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=dfe2e8de69df68d1049e578ebb43b0072bfa53c51a704d7372c37770aaf275b6",
            "size": null,
            "uploaded_stamp": null
        }
    }
}
レスポンスが返ってきたら、fileとimageのupload_urlにそれぞれファイルをアップロードします。

APIを使ってファイルをアップロードする
curl --location --request PUT "https://s3.ap-northeast-1.amazonaws.com/root.bricks.pub/content_files/eafd96f6-0c97-432a-a677-16dc306004ed/1d9338b0-dbd6-4944-8791-c8cfb5a8fda6.pdf?x-amz-acl=private&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJLLXFHCUMKSFOTJA%2F20190327%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20190327T005943Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=22214dd5895bd06cb70df338c1fcbcd63c954643a7c99c4fb9550964b69d6ff6" \
  --data-binary "@assets/book.pdf" -v
APIを使って画像をアップロードする
curl --location --request PUT "https://s3.ap-northeast-1.amazonaws.com/root.bricks.pub/content_images/eafd96f6-0c97-432a-a677-16dc306004ed/7a0c6027-50d5-49fe-8133-3d1dbf2f92cf/default.jpeg?x-amz-acl=public-read&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJLLXFHCUMKSFOTJA%2F20190327%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20190327T005943Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=dfe2e8de69df68d1049e578ebb43b0072bfa53c51a704d7372c37770aaf275b6" \
  --data-binary "@assets/cover.jpg" -v
3. コンテンツ閲覧

FLB BinBにログインする

FLB ROOTのアカウントをFLB BinBで使うように許可します。

ログインできました。

Brick情報を登録する

APIキーなどの情報を取得できました。

APIを使ってコンテンツを読むためのリンクを生成する
curl --location --request POST "https://api.binb.bricks.pub/v1/contents/tokens" \
  --header "X-API-KEY: {APIキー}" \
  --header "Content-Type: application/json" \
  --header "X-CONFIRMATION-TOKEN: {Confirmationトークン}" \
  --data "{
  \"content_id\": \"{Content ID}\",
  \"exit_url\": \"{ビューワーを閉じたときに遷移するURL}\",
  \"continuation_url\": \"{最後のページまで読んだあとに遷移するURL}\"
}"
APIの実行に以下の情報が必要です。

Content ID

先程API経由で登録したコンテンツのID

APIキー

FLB BinBコンソールのBrick詳細画面で確認します

Confirmationトークン

FLB ROOTコンソールのBrick詳細画面で確認します

※ コンテンツが読めない場合APIを使ってコンテンツの状態を確認することができます
https://console.binb.bricks.pub/docs/api/v1#contents-show
curl --location --request GET "https://api.binb.bricks.pub/v1/contents/{Content ID}" \
  --header "X-API-KEY: {APIキー}" \
  --header "X-CONFIRMATION-TOKEN: {Confirmationトークン}"
読めました

今回は読むためのリンクを生成するAPIを使って書籍ビューワーを表示するサイトを作ってみました↓
https://fl-bricks.shwld.now.sh/

今回作ったサービスのコードはこちらです。
https://github.com/shwld/fl-bricks-sample

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-03T01:39:22+09:00

1から学ぶNodeCG#1：NodeCG導入編

はじめに

昨今、HoishinさんのQiitaで解説されていたり、私のTwitterでやかましいくらいに発信しているおかげで、RTA界隈でもNodeCGという固有名詞が割と認識されつつあります。
NodeCGを使ってみたい！レイアウトを作ってみたい！という方を目にする機会も増えてきたので、これを機に導入方法～実際にレイアウトを作ってみるところまでを紹介できればいいなと思っています。

また、Qiitaに書いておいてアレですが、非Node.jsエンジニア向けに記載している箇所を多く含みます。
厳密な説明になっていない箇所が多々あると思いますが、エンジニアでない人にもわかるようにあえて曖昧な記載にしている部分がありますので、ご了承ください。

環境

Windows環境での導入を前提とします。コマンドプロンプトを使用する場面もありますが、MacOSの方は都度読み替えていただければ幸いです。

NodeCGとは

そもそもNodeCGとは何か、というお話しですが、上述したHoishinさんの記事「ライブ配信レイアウトを作るNode.jsのフレームワークで紹介されています。
難しいことはよくわからん！という方は、ひとまず下記の部分だけでも認識しておいてください。

噛み砕くと
Twitch、YouTube Live、ニコニコ生放送などのライブ配信で
動的でリッチな見た目の画面表示を作るための
大枠の仕組みを提供するフルスタックフレームワーク
です。

要するに、ライブ配信上のレイアウトを作成・操作・表示するための枠組みを提供してくれるのがこのNodeCGです。

この導入編では、今ブラウザでこのQiitaを見ているだけの状態から、NodeCGを実行するまでの手順を記載していきます。

NodeCGの公式ページ

何はともあれ、NodeCGの公式ページ（という表記が正確かはわかりませんが今はざっくりこう表記します）を見ましょう。
→https://nodecg.com/

NodeCGの機能説明や仕様が載っています。英語なので抵抗のある方は大変かもしれませんが、日本人で使っている方がまだまだ少ないので、基本的にはこのページと既存のプログラムを見てお勉強しています。

この記事でも、基本は公式ページの記載に則って導入を進めていこうと思います。

Install - NodeCGのインストール

公式ページの手順に従って、NodeCGをインストールします。以下の手順が記載されていますね。

Install Node.js (version 8.3 or greater) & npm (version 2 or greater).

Then, run the following commands from a terminal (command prompt):

... この下にコマンドが羅列されていると思いますが、、、順を追って説明していきます。

Node.jsのインストール

Node.jsとnpmをインストールするように言われているので、インストールします。

Node.jsとは、プログラミング技術の一つで、（これまた語弊を含むかもしれませんが、ざっくり言うと）主にブラウザ上で動作するプログラミング言語「JavaScript」をWebアプリケーション構築に使用できるようにしたものです。

プログラミングにある程度理解のある方はこちらの記事の解説がわかりやすいかと思います。私もこの程度の理解しかしていません。。。

NodeCGもNode.jsのフレームワークであるため、NodeCGを使うにはNode.jsの環境が必須となります。
まずは、記載されたリンクからNode.jsのページに飛びましょう。

NodeCG的にはバージョン8.3以上（2019/04/02現在）を求められますが、特にこだわりがなければLTS版をダウンロードしましょう。
インストーラを実行して、ウィザードの案内に従ってインストールを進めます。

これも特別こだわりがなければ[Next]で進めていけばよいでしょう。
保存先ディレクトリを指定する場合は指定してインストールしてください。

インストールウィザードが最後まで完了したら、Node.js及びnpmのインストールは終了です。
コマンドプロンプトで下記のコマンドを実行し、バージョン情報が表示されればインストールは成功です。
※インストールしたバージョンによって表示は異なります。
$ node --version
v8.9.4
$ npm --version
6.9.0
ちなみにNode.jsと一緒にインストールされたnpmとは、Node.jsのパッケージ管理ツールです。
Node.jsは同様にNode.jsで開発された様々な部品（パッケージ）を活用して開発することが多いです。そのパッケージをインストールしたり、アンインストールしたり、記録しておいたりする時に利用するのがnpmです。

小難しいことは一旦置いておいても良いですが、今後の手順の中で
nodeコマンドが出てきたら、Node.jsを使っている とか、npmコマンドが出てきたら、npmでパッケージをいじっているんだなくらいの認識はしておくことをオススメします。

Gitのインストール

NodeCGのインストール手順で、インストールするように記載されていた2つはインストールできました。
が、もう1つ必要なものがあります。公式ページ上の下記コマンドを見てみましょう。
$ git clone https://github.com/nodecg/nodecg.git
gitというコマンドが現れました。何も入れていないWindows環境ではgitコマンドを叩いても何も起きないと思います。

このコマンドは、Gitを利用するためのコマンドです。Gitとは、プログラムを主な対象としたファイルのバージョン管理システムで、「リポジトリ」と呼ばれる保存場所（大きなフォルダみたいなもの）の変更履歴を管理するためのものです。

NodeCGのファイルもGitで管理されており、NodeCGの利用者はNodeCGリポジトリをそのままコピーすることでNodeCGを使うことができます。
したがって、NodeCGの導入のためにはGitを導入する必要があります。

Gitの公式ページから、インストーラをダウンロードします。

画像上「Download 2.21.0 for Windows」と表示されているリンクから、インストーラがダウンロードできます（バージョンは2019/04/03現在）。
インストーラを実行し、ウィザードに従ってインストールを進めます。細かい設定もできますが、ひとまず何も考えず[Next]で進めていけば良いと思います。気になる方はググってみてください。

ウィザードが完了したら、ここでもコマンドプロンプトでバージョンを確認してみましょう。
$ git --version
git version 2.16.2.windows.1
バージョン情報が表示されていれば、Gitのインストールは完了です。

bowerのインストール

ここから、NodeCGの公式ページに記載されているコマンドを叩いていきます。

何も考えずにコマンドを叩いて進めるだけでも導入できそうですが、せっかくなので1行ずつ内容を見ていきましょう。
まずは1行目のこのコマンドです。
npm install -g bower
コマンドの先頭がnpmなので、npmを実行していることがわかります。npm installで、npmを使ってパッケージをインストールすることを意味します。最後のbowerはインストール対象のパッケージ名で、ここでインストールしたいものがbowerです。
ちなみに、パッケージ名指定の前にある-gはインストール時のオプションで、このコマンドを実行した端末全体で利用できるようにインストールを行うように指定します。ちょっと意味がわからないかもしれませんが、「PCにインストールするためのオプション」とざっくり思ってください。

ということで、このコマンドでbowerというパッケージをインストールしました。bowerもパッケージ管理ツールの一つですが、対象となるものがブラウザ上で表示するような部品であることがnpmとの違いです。

現在bowerの利用は非推奨らしいですが、NodeCGでは未だに使われているので同様に利用する必要があります。そのうちNodeCGでもbowerを使わなくなるかもしれませんが、現状は必須です（maintainerの方もどうにかしたいみたいなことは言ってた気がします）。

上記コマンドを実行したら、bowerのインストールは完了です。

NodeCGをGitリポジトリからコピー

次に実行するのがこのコマンドです。
git clone https://github.com/nodecg/nodecg.git
このコマンドを実行すると、実行した場所の直下にフォルダが作成されます。
コマンドプロンプトのカレントディレクトリを適切な作業場所に移動してから、上記コマンドを叩きましょう。

コマンドプロンプト上でのフォルダ移動がわからない方は、下記の手順でコマンドプロンプトを起動しましょう。

エクスプローラーで作業フォルダを開く。

アドレスバーに「cmd」と入力し、Enter。

開いていたフォルダ上でコマンドプロンプトが開きます。

作業フォルダでコマンドプロンプトを開いたら、コマンドを叩きましょう。

実行コマンドはgitなので、ここではGitを利用します。
cloneはその名の通り「クローン」を作ります。コピー元のリポジトリを最後のURLで指定します。
これで、https://github.com/nodecg/nodecg.git上のファイルを、カレントディレクトにコピーすることができます。

実行すると、作業フォルダ内に「nodecg」フォルダが作られ、その中に色々なフォルダ／ファイルが入っていると思います。ここでコピーされた資材一式が、NodeCGそのものです。

そのままコマンドプロンプト上で下記コマンドを実行し、「nodecg」フォルダ内に入りましょう。
cd nodecg
パッケージのインストール（npm / bower）

続いても2コマンド分進みます。以下のコマンドを実行します。
npm install --production
bower install
それぞれnpm、bowerを使って必要なパッケージをインストールします。
ここでインストールするのは、NodeCGの実行に必要なパッケージ群です。

「なぜGitからコピーした上でさらに別のパッケージをインストールするの？」と疑問に思う方もいるかもしれませんが、NodeCGには多くのパッケージが利用されています。それを全てGitリポジトリの管理下に入れるのは、そもそも権利の持ち主が違いますし、プログラムファイル自体も恐らく大きくなってしまうでしょう。

他のパッケージ管理ツールでも同様ですが、基本的に「どのパッケージを使うか」だけをファイル¹に記録しておき、実行する側（今回のようにユーザーがいたり、実行環境のサーバーだったり）はそのファイルを見て必要なパッケージを別途インストールします。「どのパッケージ」かを共通認識にするためのツールが、パッケージ管理ツールなのです。

npmコマンドに含まれる--productionは、ざっくり言うと「（製品として）実行に必要なもの」を指定するコマンドです。package.jsonでは、各パッケージが必要になる段階ごとに分けて記載することができ、--productionを設定することで必要なものだけインストールすることができます。

上記2コマンドを実行することで、NodeCGの実行に必要なパッケージがインストールできました。

いざ実行！

ここまででNodeCGの実行に必要なものはすべてインストールできたので、いよいよNodeCGの実行です。
node index.js
nodeコマンドは、Node.jsの実行コマンドです。対象ファイルをNode.jsで実行します。ここでindex.jsはNodeCGの実行プログラムで、このファイルからNodeCGが実行されていきます。

コマンドを叩くと、以下のようなメッセージがコマンドプロンプトに表示されると思います。
[nodecg] No config found, using defaults.
info: [nodecg/lib/server] Starting NodeCG 1.3.2 (Running on Node.js v8.9.4)
info: [nodecg/lib/server] NodeCG running on http://localhost:9090
3行目のメッセージで、http://localhost:9090でNodeCGが動いてるよ、と言われています。
WebブラウザでこのURLにアクセスしてみましょう。

ほぼ何も表示されていませんが、これがNodeCGの操作画面であり「ダッシュボード」と呼ばれる画面です。
今後、インストールされたNodeCGに実際のレイアウトのファイルを導入していくと、このダッシュボードに操作UIが表示されます。

NodeCGを終了するには、NodeCGを実行したコマンドプロンプトを閉じるか、コマンドプロンプトでCtrl+Cを押下します。

NodeCGを終了すると、先ほどのURLにアクセスしてもページが表示されなくなります。

まとめ

以上で、NodeCGを導入するための準備＋NodeCGの導入・実行までが完了しました。

始めに述べた通り、NodeCGはあくまでもフレームワークであり、枠組みです。レイアウト自体を導入しなければ、まだ何も表示できません。

ということで次回は、Bundle導入編と題して、既存のレイアウトの導入～配信ソフトでの表示までをご紹介していく予定です。

ちなみに

著者は日本国内でもNodeCGを使っている数少ないエンジニアのうちの1人で、RTAコミュニティ内でのオンラインイベントや、名古屋で行われたRTAオフラインイベントのレイアウトを作ったり、あまり前例のないところでは個人で配信しているTwitchのRTA紹介番組でもテロップ等を出す仕組みを提供していたりします。

NodeCGの中身のことはあまり詳しくないですが、NodeCG便利だよ！ってのを少しでも広めれたらなという思いで、色々なところにしゃしゃり出させていただいています。

配信レイアウトを少しリッチにしたいけど、こういうことできる？みたいなことがあれば、ご相談いただければと思います。

宣伝終わり。#2へ続きます。

npmでは「package.json」に、bowerでは「bower.json」にそれぞれ記載されています。 ↩

　 Tweet
Qiitaで続きを読む