RTA イベント Twitter ツールの使い方　- WSL環境整備編 -

# 解説するもの

大規模RTAイベント用に開発されたツイート投稿、ツイートの削除、メンションの確認に機能を絞ったWebサーバー上で動作するTwitterクライアントの使い方を詳しめに解説していきます。解説対象は以下2つ。本家本元ではないですが、本家を少し改変して使いやすくしたものです。
[RTA in Japan Twitter Client を簡単に動くよう改変したやつ](https://github.com/pingval/rta-in-japan-twitter-client)
[rtainjapan-twitter-api-node を殆ど改変してないやつ](https://github.com/pingval/rtainjapan-twitter-api-node)

# ツールの動作環境について
## 前提条件
実行環境がWindows 10 バージョン 2004 以上 (ビルド 19041 以上) または Windows 11

## 私の用意した環境
* Windows11 23H2
* WSL（Windows Subsystem for Linux） バージョン: 2.3.24.0
    * Ubuntu バージョン20.04　（Ubuntuのバージョンは上げすぎるとツールが動かなくなるため注意）

# WSL2のインストール方法
PowerShell または Windows コマンド プロンプトを管理者モードで開き、下記コマンドを入力し、PCを再起動します。

```
# 管理者モードで実行
wsl --install
```

# WSL2にUbuntuをインストールする手順
:::note warn
解説対象のツールを使うにはRev22.04以前のUbuntuにして下さい。TwitterAPIサーバが起動しなくなります。今回はUbuntu Rev20.04をインストールする手順について記載します。
:::

## 作業内容

PowerShell または Windows コマンド プロンプトを管理者モードで開き、下記コマンドを入力し、PCを再起動します。
※ 他RevのUbuntu入れたい人は、末尾の（Ubuntu-20.04)を変更してください

```
# 管理者モードで実行
wsl --install -d Ubuntu-20.04
```
下の画像の様にプログレスバーが表示され、100%まで行くと自動でUbuntu20.04が起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/7d950479-8c97-6cfc-725d-362a3bf0d481.png)


## Ubuntu起動後の作業
Ubuntu20.04で使用するユーザ名、パスワードを登録します。

```
Ubuntu 20.04 LTS を起動しています...
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers

# ユーザ名の登録
Enter new UNIX username: （ユーザ名を入力）

# パスワードの登録
New password:（パスワードを入力。入力してもここに文字は表示されません）
# パスワードの再確認
Retype new password:（パスワードを再入力。入力してもここに文字は表示されません）

passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 20.04.6 LTS (GNU/Linux 5.15.153.1-microsoft-standard-WSL2 x86_64)
```

## トラブルシュート
もしインストール後に下の画像の様に「指定されたファイルが見つかりません。」と出た場合、WSL側の登録を解除する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/28a9f653-23f3-64d0-0ebd-754bde96498a.png)

解除手順はこちらを参照してください

https://qiita.com/kawauso5/items/9b8e64cc1a2421f8c4fc

## WSL2にインストールしたUbuntuの起動方法
以下どれでも起動可能。ですが初心者はスタートメニュー等Ubuntuアイコンをクリックで起動するのお勧めします。

Powershellやコマンドプロンプトから起動する場合、PowerShellやコマンドプロンプトのPATHからスタートする為ややこしい感じになります。

* Windowsのスタートメニュー一覧から起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/6c108b62-263a-dce6-dbcc-7724225ef853.png)

* Windowsの検索窓で「Ubuntu」と打つ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/a05e1797-55d2-a6d5-bc37-2f19c9cc19d7.png)

* PowerShell や Windows コマンド プロンプトで以下コマンドを打つ
```
wsl -d (起動させたいディストリビューション）
```

例：Ubuntu20.04を起動させたい場合
```
wsl -d Ubuntu-20.04
```

## WSL2上でソースコードを編集する為の準備
WSL2にインストールしたUbuntuではGUI操作ができません。
PowerShell や Windows コマンド プロンプトと同じ画面上で操作します。

ですが操作方法さえ知っていればVisual Studio Codeなどのコード編集GUIアプリを開いて編集もできるので、そのあたり解説。

### Visual Studio Codeのインストール

https://qiita.com/_masa_u/items/d3c1fa7898b0783bc3ed

正直ここ観れば全部載ってますが、もう少し丁寧な内容にしたのを下に書きます。

### Windows側にVisual Studio Code（VScode)をインストールする

https://code.visualstudio.com/

こちらのリンクから「Download for Windows」をクリックすればインストーラが自動でDLされます。そちらを用いてインストールしてください。

### VScodeの拡張機能を追加する

Remote Development用のVScode拡張機能を追加します。
以下どちらかをインストールすればOKです。
[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
[Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)

* 例：Remote Developmentをインストールする場合
1. VScodeを起動する
2. 左の「拡張機能」アイコンをクリック
3. 検索窓に「Remote De」まで打つと一番上に出てくる「Remote Development」を選択
4. 「インストール」ボタンをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/70cb19bf-20e4-4ad5-4895-2501c0074f67.png)

### WSL2からVScodeを起動する
:::note warn
この手順は必ずWSL2側（Ubuntu20.04をインストールした側）で行ってください。WindowsのPowerShell や Windows コマンド プロンプトでやっても「そりゃ起動するよね」という事になります。
:::

Ubuntu20.04を起動し、以下コマンドを打ち込んでください。

```
code .
```

VScodeを起動させると以下のような警告窓が表示されますが、どちらを選んでもいいです（自分は信頼しますをいつも選択してます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/700e6ca1-69c8-3c74-75bb-117d542f70bd.png)

VScodeの左下に以下のような「WSL:<ディストリビューション名>」が表示されていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/41f4960f-8983-4772-399b-786eea657462.png)

### 余談（わからなかったら飛ばしてOK）
設定が完了した後は、いちいちWSLを起動させなくともVScodeからWSL側で保存しているコードの編集ができるようになります。
VScodeを開いた状態で**F1**キーを押し、**Remote-WSL: New Window using Distro**と打ち込んでEnterキーを押すと、WSL2に登録しているディストリビューション一覧が表示されます。
編集したいコードのあるディストリビューションを選択すると、Remote WSLになった状態のVScodeが開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/c415fe73-bcbc-cd72-2563-e3a227599009.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/8c9bbf78-fac5-33e3-3088-f75c9366cc98.png)

次はNgrokの登録＆WSL環境にNgrokをインストールする手順について解説します

https://qiita.com/Usyuuu/private/d4affe532f7124d4122c

# 用語集
## GUI

https://wa3.i-3-i.info/word1371.html