RTA イベント Twitter ツールの使い方　- コード修正部の解説＆使い方 -

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

こちらの続き

# Nodejsのインストール
これから扱うツールはNodejsのインストールが必要です。
また、**Nodejsのバージョンは14～17にする必要があります**

https://zenn.dev/keijiek/articles/4976559b876090

こちらのブログの2.1章～2.3章、3.1章～3.2章の手順でコマンド打っていくだけでNodejs Rev16.13がインストールされます。

# Redirects URLの登録
1. [Discord Developer Portal — My Applications](https://discord.com/developers/applications)から、認証機能に用いるbotを選択し、OAuth2メニューから情報取得する。
（もしbotがなければ、右上の「New Application」をクリックして新規作成しましょう。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/becb3417-1ac3-ca11-4263-056cc46aa064.png)

2. 使用するbotアイコンをクリックする。その後、ページ左にある「OAuth2」をクリックする。
3. Redirectsに「https://"hostname"/login/discord/」を入力する
例："hostname"がABCHOSTの場合、「https://ABCHOST/login/discord/」を入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/341626e6-e157-2b71-46c2-c4af73c998ef.png)

4. OAuth2 URL Generatorの項目で「identify」「guilds」にチェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/4e4596d9-27d8-3419-75e2-934eca609c43.png)

5. Select redirect URLをクリックし、Redirectsに入力したURLを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/9c4f0097-44ea-4d88-bae2-b86bf38d2f26.png)

6. 右下に保存ボタンがポップアップで出るはずなので、そちらをクリックする。

# Twitter API Server、RTAイベントTwitterツールのソースコードについて

## プロジェクトファイル（ソースコード一式）の取得方法

どちらもGithub上で公開されているため、gitのコマンド入力 or ブラウザ上のDLボタンから取得してください
※　Githubページの「<>Code」ボタンを押し、「Download Zip」をクリックすればプロジェクトファイル（ソースコード一式）をDLできます。
※　コマンド取得に関しては・・・やろうと思う人は自分で調べられる人と思うので調べてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/e264b0d8-0d3b-80b5-ac43-9e11d5a6101d.png)

## プロジェクトファイル（ソースコード一式）の保存先について

それぞれのアプリケーションを起動させたい場所に保存してください。
自分はWSL2にインストールしたUbuntu20.04上で動かしたかったため、Windows側ではなくUbuntu側のファイルシステム上に保存しました。

※　WindowsのエクスプローラからWSL2にインストールしているOSのファイルシステムへアクセス可能です。（エクスプローラの左枠最下部にLinuxカテゴリが追加されるはずです）
ドラッグ＆ドロップでのファイル移動、保存可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/0442f11e-89e1-4ce9-174e-216e5155c54a.png)

# Linuxコマンドについて
WSL2環境を活用する場合、Linuxコマンドを理解しなければフォルダ間移動すらできません。

なので基礎的なコマンドと、注意点を記載します。

## 超基礎的なコマンド（今回やる事なら、これだけでOK）
自分が今どこにいるのかを知る、指定場所に行く事が出来ればOKなので、以下3つのコマンド知ってればOKです。

### pwd　（Print Working Directory）
自分が今どこのフォルダにいるのかを知るためのコマンド
```
~$ pwd
/home/usyuuu
```
自分の環境でWSL2起動直後にpwdを打った結果。home/usyuuuが現在位置と判明

### cd （Change Directory）
フォルダ間移動する場合などで使用。
例えばWSL2環境を起動したときに「home/usyuuu」にいたとして、「home/usyuuu/rta-in-japan-twitter-client」に移動する場合は以下コマンドを入力
```
cd rta-in-japan-twitter-client-master
```
Windowsのエクスプローラ画面で説明すると、上記コマンドを打つと画像の赤矢印移動ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/e68d80b6-75fd-1db7-3cc2-46b99726469f.png)

### ls　（LiSt)
現在いる場所に存在するファイル、フォルダ一覧を表示します。
ファイルA.txt、B.gs、C.tsが存在するフォルダでlsを打つと、以下結果となります
```
$ ls
A.txt B.gs C.ts
```

他のコマンドを知りたい場合は「Linux　コマンド」で検索して、それぞれのコマンド試してください。

## 初心者が手を出さない方が良いもの
### Vi, Vim
端末上で動作可能なテキストエディタ。
信奉者が現れるくらい根強く支持されている物ですが、かなり癖が強く、初心者が扱えるものではありません。
Linuxのコマンドを調べてるときに「Viについて」とか出てきてもスキップしましょう。レベルアップしてからそれは読んでください。

# Twitter API Server　の編集
[Twitter API ServerのGithubページ](https://github.com/pingval/rtainjapan-twitter-api-node)
こちらのコード内容、修正が必要な個所について解説します。

## configフォルダ内に「local.json」を追加する
local.jsonの新規作成が必要。
configフォルダに入っている「default.json」を元に作成してください。

```default.json
{
  "debug": false,
  "hashtag": "#rtainjapan",
  "cache": {
    "ttl": 60,
    "enabled": false
  },
  "twitter": {
    "apiKey": "<API Key>",
    "apiSecret": "<API Secret>",
    "accessToken": "<Access Token>",
    "accessSecret": "<Access Secret>"
  }
}

```

### "hashtrag"
イベントで使用するハッシュタグ名に変更してください

### "twitter"
"API KEY"など記載されている箇所は、[Twitter 開発者プラットフォーム](https://developer.x.com/ja)から取得します。

https://qiita.com/neru-dev/items/857cc27fd69411496388

こちらの記事を読んでアカウント作成し、API Key 、secret、Token、 Access Secretを取得し、local.jsonに記載してください。

※　取得後にDeveloper PortalのProject＆Appsにアクセスすれば、API Keyなどの再生成が可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/6e2ee088-ce88-f718-7896-7e08e987c3c4.png)

## .envの作成
1. .env.example　を　.env　に変更

2. .envの中身　DATABASAE_URL を以下に変更
DATABASE_URL=postgres://username:password@localhost:3306

3. WSL2側の端末で「npx prisma generate」を入力する。

# rta in japan Twitter client　の編集
[rta-in-japan-twitter-clientのGithubページ](https://github.com/pingval/rta-in-japan-twitter-client)
こちらのコード内容、修正が必要な個所について解説します。

## static/config.json
```config.json
{
  "api": {
    "twitterBase": "/api",
    "runner": "https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxx/exec",
    "webhook": "https://discord.com/api/webhooks/xxxxxxxxxxxxxxx/xxxxxxxxxxxxxxxxxxxxxx"
  },
```
編集必要なコードについて解説

### "runner"について
走者情報API URLを記載します。
1. [rta-in-japan-twitter-clientのGithubページ](https://github.com/pingval/rta-in-japan-twitter-client)　
「RTA in Japan Twitter Client 走者情報サンプル」を参照し、走者情報をまとめたGoogleスプレッドシートを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/742bce10-4084-a8a5-34ab-315e093ce027.png)

2. 作成したスプレッドシートの「拡張機能」 ->Apps Script をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/0850ab18-50c1-f59e-e3bb-7e7c19a24539.png)

3. [rta-in-japan-twitter-client/runner-api.gs](https://github.com/pingval/rta-in-japan-twitter-client/blob/master/runner-api.gs)
このURL先のコードを「コード.gs」にコピペする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/00d4c5ad-d9c8-5339-9bdf-824d9728f2ee.png)

4. 右上の「デプロイ」ボタンを押し、「デプロイを管理」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/2eec0d4a-d0d6-01da-c28d-cba4f878e771.png)

5. デプロイを管理　が表示されたら、編集のアイコンをクリックして新バージョンを選択し、デプロイをクリックする。

6. 「ウェブアプリ」のURLをコピーし、"runner"横のダブルクォーテーションに貼り付ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/dfe50729-a5bb-8ed8-1a68-4481a7422ee9.png)

## "webhook"について

[タイトル: Webhooksへの序章](https://support.discord.com/hc/ja/articles/228383668-%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB-Webhooks%E3%81%B8%E3%81%AE%E5%BA%8F%E7%AB%A0)
こちらの手順でメッセージを受信するサーバー/チャンネルのWebhook URLを取得します。

1. Discord認証機能を使用するDiscordサーバで「サーバ設定」を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/67ec7ac7-0523-8324-668c-edc20a295a1b.png)

2. 「サーバ設定」内の「アプリ -> 連携サービス」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/2a7cdce3-8ea4-076f-da92-d73c35727a5b.png)

3. [ウェブフック」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/424a798b-8a45-b871-f7e9-307998428ac1.png)

4. 使用するウェブフックを選択。（無いなら「新しいウェブフック」をクリックして作成する）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/19cf048a-b938-868e-0d44-0e89f99d6a0c.png)

5. 「ウェブフックURLをコピー」をクリックし、"webhook"横のダブルクォーテーションに貼り付ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/af266a46-c04d-6d52-c271-5ac864a1b518.png)

## "discord"について
rta in japan twitter clientを使う際、Discord認証を行う場合はこちらの編集が必要です。
[README.md](https://github.com/pingval/rta-in-japan-twitter-client/blob/master/README.md)を読めばほぼ記載内容わかりますが、補足必要な情報を以下に記載します

### `enable`
Discord認証機能を有効にする場合、"false" -> "true" にする

### `config`
* `clientId`
[Discord Developer Portal — My Applications](https://discord.com/developers/applications)から、認証機能に用いるbotを選択し、OAuth2メニューから情報取得する。
（もしbotがなければ、右上の「New Application」をクリックして新規作成しましょう。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/becb3417-1ac3-ca11-4263-056cc46aa064.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/5270c420-80a3-bfdb-38e1-dce83b7428a4.png)

* `redirectUrl`
[README.md](https://github.com/pingval/rta-in-japan-twitter-client/blob/master/README.md)の通り、「https://"hostname"/login/discord/」を記載する。ngrokを活用している場合、ngrokで固定サブドメイン取得した時のコマンド内に記載された”hostname”を上記"hostname"にコピペすればOK。
例：　ngrokで取得したhostnameが"ABCHOST"の場合
```config.json
"redirectUrl": "https://ABCHOST/login/discord/",
```

* `guild`
使用するサーバのタイトルで右クリックし、一番下に出てくる「サーバIDをコピー」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/69c6bc41-c00c-f6b0-a324-b6bc06a4a4ae.png)

* `users`
Discord認証機能を有効にする際、ここに記載したDiscord ユーザIDの人だけがrta in japan twitter clientにログイン可能となります。
記載情報のフォーマットは以下の通り
例：ユーザA、Ｂ、Ｃのみアクセス可能とする
```config.json
"users": ["ユーザAのユーザID","ユーザBのユーザID","ユーザCのユーザID"]
```
例：ユーザAのID=12345、ユーザBのID=678910、ユーザAのID=13579 の場合
```config.json
"users": ["12345","678910","13579"]
```

### "tweetTemplate"について
rta in japan twitter clientでつぶやく際のテンプレート文をここに記載します。呟くだけならデフォルトの内容でもOK。
tweetTemplate：「次のタイムアタックは~」から始まるRiJのテンプレまんま。
tweetFooter：初期設定ではRiJのTwitchチャンネルとハッシュタグになっている。

## static/mainfest.json
short_name : 略語名を RiJTwi から　好みの名前に変更
name : 正式名を　RTA in Japan Twitter Client　から　好みの名前に変更
icons : 独自のアイコンに変更するときは、manifest.jsonと同じディレクトリにアイコンファイルを保存＆ファイル名を変更する

## static/index.htmlについて
ページtitleをRTA in Japan →自分の好みのタイトルに変更する際に活用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/bb27c16e-e583-b30c-fbfb-9fd097b1b617.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/c106cd0a-e26f-c05a-78d3-29c6a8279f71.png)

## webpack.config.tsについて
webpack-dev-serverの設定に、ngrokで取得したトンネル用のポート、ホスト名を記載する
```webpack.config.ts
// webpack-dev-serverの設定
const devServerConfig: webpackDevServer.Configuration = {
  contentBase: 'docs',
  host: 'localhost',
  open: true,
  hot: true,
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: { '^/api': '' },
    },
  },
-----(ここから追記部分)------
  port: <port>,
  public: '<hostname>',
-----(ここまで追記部分)------
};
```

例：ポート番号が80で、hostnameがABCHOSTの場合

```webpack.config.ts
// webpack-dev-serverの設定
const devServerConfig: webpackDevServer.Configuration = {
  contentBase: 'docs',
  host: 'localhost',
  open: true,
  hot: true,
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: { '^/api': '' },
    },
  },
  port:80,
  public: 'ABCHOST',
};
```

以上の対応行えば準備は完了

# RTAイベントTwitterツールの起動手順
端末3つ開けた状態でそれぞれコマンドを打つ必要あり
以下VS CODEを用いた場合の画面画像と一緒に解説

## ngrokを用いてトンネルを作る（RTAイベントTwitterツールの外部公開準備）
以下コマンドを打ち、「https://"hostname"」を外部公開する。
```
ngrok http --url= <hostname> <port>
```

例：　hostname=ABCHOST, port=80 の場合

```
ngrok http --url=ABCHOST 80
```

## Twitter API Serverを起動する
cdでTwitter API Serverソースコードが保存されている場所まで移動した後、サーバ起動する。
以下はTwitter API Serverのフォルダ名が「rtainjapan-twitter-api-node」と想定したコマンドです。
```
cd rtainjapan-twitter-api-node
npm install
npm run dev
```
※　**2回目以降の起動では「npm install」は不要です。**

## RTAイベントTwitter ツールを起動する
ngrokを用いた「https://"hostname"」の外部公開、並びにTwitter API Serverの起動を行った後に以下コマンドを入力し、RTAイベントTwitter ツールを起動する。
以下はRTAイベントTwitter ツールのフォルダ名が「rta-in-japan-twitter-client」と想定したコマンドです。
```
cd rta-in-japan-twitter-client
npm install
npm start
```
※　**2回目以降の起動では「npm install」は不要です。**

---

#Twitter API 制限について
2024/11/10現在、Twitter　API無料プランの利用制限がさらに厳しくなり、月に50ツイート、１日17ツイートまでとなっています。
上記注意しつつ、本ツール活用してください。

https://automaton-media.com/articles/newsjp/x-twitter-api-20241101-316630/


# （おまけ）VSCODEでWSL2の端末起動する方法
自分は以下画像の用にVS CODE上で端末を3つ起動させ、それぞれで上記コマンドを打ち込んでました。

## VScodeで端末を表示される方法
VScodeを起動させ、右下にマウスカーソルを移動させるとマウスカーソルが↕アイコンに代わる場所があります。そこでクリックしながら上に移動すると、端末が現れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/78f9e72e-fe9e-0031-d1bc-db4335115a2b.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/1a699e28-a87a-fee7-70a0-524bfd24cb3c.png)

## VScode上で表示する端末数を増やす
右下の＋ボタンをクリックすることで端末数を増やせます。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/709ed483-20cc-c805-a69a-aaf0f5c5aa25.png)

## VScode上でWSL2の端末を起動させる
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/94c199b7-c826-b1c5-9e22-f444000f942d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/764e3c44-4a2d-e584-e477-b12b5753843e.png)