RTA in JapanのNodeCGレイアウトを動かしてみる

# はじめに
[ライブ配信レイアウトを作るNode.jsのフレームワーク](https://qiita.com/Hoishin/items/36dcea6818b0aa9bf1cd)や、[1から学ぶNodeCG#1：NodeCG導入編](https://qiita.com/cma2819/items/e775bd8aa2a2fa911d4c)を読んでみてちょっと興味出たから、NodeCGを使ってRTAイベントをやってみたい・・・どうやって使ったらいいのかわからない・・・

そんな人の為に、RTA in Japanで使われているレイアウトを自分の環境で動作させるまでの道のりを解説します。既存のレイアウトを元に改造してみることで、理解を深めることができるかもしれません。

## 対象読者
- ぷろぐらむチョットワカル
- イベント、ヤル、オレガンバル

## この記事の目標
ローカル環境でRTA in JapanのNodeCGレイアウトを動作させる。

#### (2019/08/08追記)
RTA in Japan Online 2019用でソースの構造が変わったため、本記事の対象はRTA in Japan 3向けのレイアウトとなります。
Onlineのソースが安定したら別途記事書きます。

# 事前に用意するもの
## [Node.js](https://nodejs.org/ja/)
LTS版をダウンロードしてインストール。
Macなら[[Mac, Homebrew] Node.jsのバージョン管理ツール、nodebrew導入手順](https://qiita.com/mii-chan/items/f3291ae8bbbf788c8aa3)を参考に。

## Git
Windowsなら`Git for Windows`が良いと思います。インストーラポチポチでおしまい。
Macなら[購入直後のMacでGitコマンドを使えるようになるまで](https://qiita.com/furusin_oriver/items/974a7b7fb8c56ad88d6e)を参考に。

# 事前に必要なNode.jsモジュールをインストール
コマンドプロンプト等のコンソールを起動し、以下を実行。

```
npm install -g yarn webpack webpack-cli onchange npm-run-all typed-css-modules
```

# gitからダウンロード
コンソールで以下を実行。

```
git clone https://github.com/RTAinJapan/rtainjapan-layouts.git
cd rtainjapan-layouts
git checkout d3db7fe86c641df8edfdb90fffaae1a4c978cedf
```

`rtainjapan-layouts`というフォルダができていると思います。


# Nodeモジュールをインストール
package.jsonと同じフォルダで`yarn`コマンドを実行することで、パッケージをインストールできます。
Windowsの場合はパッケージインストール後のbower実行が失敗するので、事前に`scripts/postinstall.ts`の10行目付近にあるパスを、以下のように書き換えてください。

#### (2019/04/20追記)
Windowsだとシンボリックリンク作成に失敗するケースがあるようです。
失敗する方は管理者権限でコマンドプロンプトを起動してyarnを実行してみてください。

```ts:scripts/postinstall.ts
const bowerPath = resolvePath('../node_modules/bower/bin/bower');
```
パッケージインストール

```
cd rtainjapan-layouts
yarn
```

rtainjapan-layoutsの中にまたrtainjapan-layoutsフォルダがあって、その中にもpackage.jsonがあります。同様のコマンドでパッケージをインストールします。

```
cd rtainjapan-layouts
yarn
```

# Google APIの用意
[スプレッドシートのAPIのページ](https://developers.google.com/sheets/api/quickstart/js)を開くと以下のような文言があります。`this wizard`をクリック。

<img width="392" alt="スクリーンショット 2019-04-16 21.44.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/512f7358-1ec1-3861-0719-0d5f53682811.png">


1. Google API コンソール に Google Sheets API のアプリケーションを登録
  - プロジェクトを作成
1. API は有効になっています
  - 認証情報に進む
1. 認証情報の追加1
 <img width="594" alt="スクリーンショット 2019-04-16 21.49.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/d879d34d-fdb0-eec0-1999-978b49b18f09.png">
1. 認証情報の追加2
<img width="486" alt="スクリーンショット 2019-04-16 21.50.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/edd07eb7-2204-64a9-3b98-cd66183b6581.png">
1. 認証情報のダウンロード
<img width="649" alt="スクリーンショット 2019-04-16 21.52.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/9e5789c9-09d3-2728-0fa2-1a764356ae46.png">
ダウンロードしたJSONファイルに、APIを使うための情報が格納してあります。
取り扱いには注意してください。


# スプレッドシートの準備

[スプレッドシート](http://sheets.new)を作成します。スプレッドシートの名前は何でもOKです。

走者情報とゲーム情報のシートを用意します。
厳密にはシートは分けなくても良いのですが、分けた方が管理しやすいと思います。

## 走者情報
以下のフォーマットで記載していきます。
1行目はヘッダとして扱いますが、NodeCGの中でスキップされるので記載内容は何でもOKです。

|列  |内容  |備考  |
|---|---|---|
|A  |走者ID  |一意なIDで、ゲーム情報から参照される。形式不問。 |
|B  |名前  |走者の表示名  |
|C  |Twitter ID  |  |
|D  |niconico コミュニティ番号 |  |
|E  |Twitch ID |  |

## ゲーム情報
|列  |内容  |備考  |
|---|---|---|
|A  |タイトル  |  |
|B  |機種  |DSとかPCとか  |
|C  |カテゴリ  |any%とか  |
|D  |予定タイム |  |
|E  |セットアップタイム |  |
|F以降  |走者ID | 空欄でもOK  |

## 名前の定義
範囲に名前をつけます。
`スプレッドシートのメニュー > データ > 名前付き範囲`
走者情報は`runners`、ゲーム情報は`games`と名前をつけます。
なお、選択範囲にはヘッダも含みます。

#### (2019/04/20追記)
スプレッドシートは共有状態にしておいてください。
最低限、`リンクを知っている全員が閲覧可`としてください。

## 完成状態
サンプルとしてどうぞ。
<img width="897" alt="スクリーンショット 2019-04-16 21.59.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/7cb7b32c-cbf7-2f93-dcb8-c5d7bdf85ba6.png">

<img width="1058" alt="スクリーンショット 2019-04-16 22.01.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/8af16573-7587-e66a-3f6e-d11b1e2aaa5c.png">

# Configの用意
NodeCG本体のconfigと、レイアウト用のconfigがあります。
NodeCG用のconfigは無くても支障がないため、レイアウト用のconfigだけを用意します。

```json:rtainjapan-layouts.json
{
	"twitter": {
		"targetWords": [],
		"maxTweets": 5,
		"consumerKey": "",
		"consumerSecret": ""
	},
	"spotify": {
		"clientId": "",
		"clientSecret": ""
	},
	"googleApi": {
		"spreadsheetId": "スプレッドシートのURLのうち、/d/の後ろから末尾の/までのめちゃ長い英数記号文字",
		"clientEmail": "Google APIでダウンロードしたJSONのclient_email",
		"privateKey": "上記と同JSONのprivate_key。めちゃくちゃ長い。"
	}
}
```
上記ファイルは`cfg`フォルダに入れます。
なお、twitterとsporifyのパラメータは、とりあえず動かす分にはサンプル通り空文字でOKです。
configのファイル名は、layoutの名前と一致させる必要があるので注意してください。

# 起動

コンソールで最上位のpackage.jsonのあるフォルダに移動し、以下のコマンドを実行します。

```
yarn dev
```

なお、ビルドするのに少し時間がかかります。

```
schemas/CurrentRun.json
schemas/Spotify.json
schemas/NextRun.json
schemas/Checklist.json
schemas/Schedule.json
configschema.json
schemas/Twitter.json
schemas/ChecklistCompleted.json
schemas/Timer.json
schemas/Tweets.json
ℹ ｢atl｣: Time: 1608ms
ℹ ｢atl｣: Time: 16739ms
```
上記のようなメッセージが表示されたらビルド完了です。
別のコンソールを用意するか、`Ctrl+C`等でプロセスを終了します。
続けて以下のコマンドを実行します。

```
yarn start
```

```
info: [nodecg/lib/server] Starting NodeCG 1.3.0 (Running on Node.js v10.15.3)
info: [nodecg/lib/server/extensions] Mounted rtainjapan-layouts extension
info: [nodecg/lib/server] NodeCG running on http://localhost:9090
```
上記のようなメッセージが表示されたら無事起動です。
メッセージに従い、ブラウザでアクセスしてみましょう。

# アクセス
`http://localhost:9090/`を表示します。

## MISC
いきなりその他の画面に飛ばされますが・・・気にせず。
Twitter APIなどを用意してる場合は、ここからログインします。
<img width="1437" alt="スクリーンショット 2019-04-16 22.32.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/0b67b618-6f9e-2140-552f-d3c86d7296dc.png">

## STREAM
ここがメインとなる操作パネルです。
ストップウォッチの操作や次のゲームの設定はここで行います。
Twitter連携するとこの画面にツイートが表示されます。
<img width="1437" alt="スクリーンショット 2019-04-16 22.33.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/07eb5fb7-d8c6-c138-6236-c4f35433633f.png">

## GRAPHIC
OBS等で表示するレイアウト一覧です。

<img width="1437" alt="スクリーンショット 2019-04-16 22.33.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/5f7ea7a0-060b-8453-3340-b296ad4a2b04.png">

### サンプルで一個開いてみる
DS1.HTMLを開くと以下のような画面が表示されます。

<img width="1437" alt="スクリーンショット 2019-04-16 22.33.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/13452017-fb4c-45c3-eeb3-af4ab4ea16f5.png">

OBSのbrowser sourceでは以下のようなURLを指定することになります。（配信PC上でNodeCGを動かす場合）
`http://localhost:9090/bundles/rtainjapan-layouts/graphics/ds1.html`

# OBSで表示

OBSの`ソース > 右クリ > 追加 > ブラウザ`を選択し、表示したいレイアウトのURLを入力します。
この時点だとなんかよくわかんない画像になっています。

![obs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/f501f1f4-4c7f-cb96-cbd6-efbd7c012b48.png)

OKをクリックして元の画面に戻ると、無事レイアウトが表示されています。
あとは好みで配置していきましょう。

![obs2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/2010d0e0-c732-748e-c455-3d3c97c08f03.png)

## ★おしまい★


# (オマケ1)Twitter連携
このレイアウトとしては必須ではないですが、連携したい方のために記載しておきます。

[Twitterの開発者サイト](https://apps.twitter.com)でAPIの登録を行ってください。なお、大事と思われるのは以下の値で、それ以外は何でもOKです。

|項目  |値  |備考  |
|---|---|---|
| Sign in with Twitter | Enabled |
| Callback URL          | `http://localhost:9090/bundles/rtainjapan-layouts/twitter-callback/index.html` | ホスト名は実際に動作させる環境に合わせること。 |

登録が完了したら、`Keys and tokens`の`Consumer API keys`で`API key`と`API secret key`を確認し、configに記載してください。
また、NodeCG上に表示したいツイートのキーワードを`targetWords`に記載してください。
NodeCG起動までの流れは既に書いた通りです。
正常に認証できれば、コンソールのログにエラー無く表示できており、また、ダッシュボードにツイートが表示され始めるでしょう。

# (オマケ2)ディレクトリ構成
ここまでの手順をこなすと以下のようになっています。
![dir.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/24818288-0cbd-13ac-7a2d-685a90cea20d.png)