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

# はじめに
[RTA in JapanのNodeCGレイアウトを動かしてみる](https://qiita.com/pasta04/items/d676d9c2fb716176f665)で起動までの道のりを解説しましたが、RTA in Japan 2019 Online以降のバージョンでセットアップ手順が変わったのでその解説です。
なお、差分以外の説明は適当なので前回の記事も参照してください。

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

# 事前に用意するもの
前と同じなので省略。Node.jsとyarnくらいは入れておいてください。

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

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

git入れてない人はZIPファイルで直接ダウンロードしてもよいです。
![git.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/1aa8d72e-8cc9-012f-53bc-afb8a0d3f5d4.png)

# Nodeパッケージインストール
NodeCG開発者のたゆまぬ努力により、パッケージインストールは以下の1回だけで済むようになりました。

```
cd rtainjapan-layouts
yarn
```

# 環境変数の設定
[AdobeのWebフォント](https://fonts.adobe.com/)を利用しています。
環境変数として以下を設定してください。
`TYPEKIT_ID=利用したいフォントのID`
Adobeと契約していない場合は何でもいいので適当な値を設定してください。
Webフォントの読み込みに失敗しますが、一応使えます。

下記画像の塗りつぶしてる箇所が該当のID。
<img width="400" alt="Adobe Font" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/730bdd0c-bed0-8b15-338d-24b6eaa86480.png">

# アカウントに合わせたソース修正
自分のチャンネルに合わせてTwitchIDと配信タイトルのPrefixを設定します。

```ts:/src/extension/twitch.ts
const OUR_CHANNEL = 'pastan04';

const newTitle = `RTA in Japan 2019サンプル: ${newRun.title}`;
```

# ビルド

```
yarn prod
```
この時TYPEKIT_IDの環境変数が読み込めていないエラーが出た場合は、環境変数が正しく設定されているか確認してみてください。
環境変数の反映には、コンソールの再起動等が必要になる場合があります。

# Google APIの用意
前回と同じなので省略。

# スプレッドシートの準備
文で説明するのはつらいのでキャプチャ画像で察してください。
1つのスプレッドシートを共有状態にし、以下3種のシートを用意してください。

### ゲーム
<img width="500" alt="ゲームシート" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/9014ca83-2f13-c76a-ab71-0be3001f7456.png">

### 走者
<img width="500" alt="走者シート" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/248cd783-c5f4-10d1-06b3-261336ca97d4.png">

### 解説
<img width="500" alt="解説シート" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/3760c3b9-3ad0-0265-3900-872e1c1e1a6a.png">

# Configの用意
## NodeCGのConfig
前回の説明では無くてもよいと書いていましたが、なるべくならあった方がよいので記載しておきます。
必要最小限の設定のみ記載していますが、全体を見たい方は[こちら](https://nodecg.com/tutorial-6_nodecg-configuration.html)を参照してください。

```json:.nodecg/cfg/nodecg.json
{
    "login": {
        "enabled": true,
        "sessionSecret": "saltだから適当な値でよいのだ",
        "twitch": {
            "enabled": true,
            "clientID": "TwitchAPIのclientID",
            "clientSecret": "TwitchAPIのclientSecret",
            "scope": "channel_editor",
            "allowedUsernames": [
                "ログインを許容するTwitchユーザID"
            ]
        }
    }
}
```
Twitchログインの設定をすると、NodeCGでゲームを切り替えた時に自動でチャンネル情報の書き換えが行われます。

## レイアウト固有の設定
前回からちょっと構造が変わりました。

```json:.nodecg/cfg/rtainjapan-layouts.json
{
	"twitter": {
		"targetWords": ["検索ワード。RTAinJapanとか"],
		"consumerKey": "TwitterAPIのConsumer Key",
        "consumerSecret": "TwitterAPIのConsumer Secret",
        "accessToken":"TwitterAPIのAccessToken",
        "accessTokenSecret":"TwitterAPIのAccessToken Secret"
	},
	"spotify": {
		"clientId": "SpotifyAPIのClient ID",
		"clientSecret": "SpotifyAPIのClient Secret"
	},
    "spreadsheetId": "スプレッドシートのURLのうち、/d/の後ろから末尾の/までのめちゃ長い英数記号文字",
    "googleApiKey": "APIキー"
}
```
それぞれのキー取得方法についてはあまり細かくは解説しないですが、どこの設定値かはわかるように各サービスのキャプチャを貼っておきます。

### Twitch
それぞれ塗りつぶしているところ。
<img width="400" alt="TwitchAPIの設定値" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/83efebd1-51a5-996c-474b-59c83b0c7fb0.png">
リダイレクトURLは`http://[ホスト名]/login/auth/twitch`

### Twitter
それぞれ塗りつぶしているところ。
<img width="500" alt="TwitterAPIの設定値" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/9de354ea-96ae-50b4-9a5a-76ad3e832091.png">

### Google API
塗りつぶしているところのうち、上のAPIキーの方。
<img width="500" alt="GoogleAPIの設定値" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/18674d50-7709-a777-1f69-9a7452137351.png">

### Spotify
オレンジで塗りつぶしているところ。
<img width="500" alt="SpotifyAPIの設定値" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/93c8a7df-8efe-97d2-8a83-c112a0c2e6cb.png">
リダイレクトURLは`http://[ホスト名]/bundles/rtainjapan-layouts/spotify-callback/index.html`

# 起動
```
yarn start
```

```
info: [nodecg/lib/server] NodeCG running on http://localhost:9090
```
上記のようなメッセージが表示されたら無事起動です。
メッセージに従い、ブラウザでアクセスしてみましょう。

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

TwitchのAPI設定をしている場合は以下が表示されます。
画面に従ってログインしてください。
<img width="500" alt="Twitchログイン" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/2f1d24c1-d509-afc9-1f24-6a56ce6ad0c9.png">

TwitchのAPI設定をしていない場合、またはTwitchログインが完了した後は以下が表示されます。
<img width="500" alt="NodeCGダッシュボード" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/34034665-c022-84a9-23b1-a87e63ea010f.png">

# Spotifyにログイン
`2-MISC`からログインします。画面に出た通りポチポチすればOKです。
<img width="300" alt="NodeCG Spotify" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/79d4f76e-6b1a-d871-d4b4-8b45e531b8ea.png">

# 動作確認
## セットアップ画面
まずはセットアップ中のレイアウトを見てみましょう。
NodeCGダッシュボードから、`GRAPHICS > BREAK-2.HTML`

<img width="500" alt="NodeCG break2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/4cc6d881-a0a2-4946-b93f-c833ebee7421.png">

白抜きの箇所はHTML的に空白の領域で、下位レイヤの要素が映るようになっています。
RTA in Japan 2019を視聴されていた方はピンときたかもしれませんが、レイアウトの下位レイヤで動画を流すことによりRTAちゃんを動かしていました。

## 今回追加されたゲームレイアウト
QWOPはアスペクト比が特殊なため、専用のレイアウトが用意されています。
NodeCGダッシュボードから、`GRAPHICS > QWOP.HTML`

<img width="500" alt="NodeCG qwop" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/4d94f038-710b-2401-e3ec-76648e30e391.png">

# OBSの設定
## レイアウト登録
OBSの`ソース > 右クリ > 追加 > ブラウザ`を選択し、表示したいレイアウトのURLを入力します。
レイアウトのURLはダッシュボードで開いた時のものをそのまま入力すればよいです。
ローカルで起動しているNodeCGを参照する場合は以下となります。
`http://localhost:9090/bundles/rtainjapan-layouts/graphics/qwop.html`

TwitchAPIの設定をしている場合は、URLの末尾にkey情報が追加されるので、そこまで含めて登録します。
`http://localhost:9090/bundles/rtainjapan-layouts/graphics/qwop.html?key=なんかめちゃ長いkey`

<img width="300" alt="OBS source" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/0534a2e4-ebaf-a5c3-184f-01e68b079410.png">

`表示されていないときにソースをシャットダウン`はチェックを入れるようにしましょう。
これを入れていないと、ソースを多数登録した時にムチャクチャ重くて画像等が上手く表示できないという事象がイベント中に発生しました。(裏話)

## ゲーム設定
レイアウトの下に表示したいキャプチャデバイスなどのソースを登録してください。
あとは適当にクロップして黒枠のところに配置したら完成です。
<img width="300" alt="OBS source game" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399407/66ff80e8-3c2d-9311-e41b-5e4c7b220172.png">


## ★おしまい★