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

Last updated at 2024-11-10Posted at 2024-11-10

こちらの続き

Nodejsのインストール

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

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

Redirects URLの登録

Discord Developer Portal — My Applicationsから、認証機能に用いるbotを選択し、OAuth2メニューから情報取得する。
（もしbotがなければ、右上の「New Application」をクリックして新規作成しましょう。）
使用するbotアイコンをクリックする。その後、ページ左にある「OAuth2」をクリックする。
Redirectsに「https://"hostname"/login/discord/」を入力する
例："hostname"がABCHOSTの場合、「https://ABCHOST/login/discord/」を入力する
OAuth2 URL Generatorの項目で「identify」「guilds」にチェックを入れる
Select redirect URLをクリックし、Redirectsに入力したURLを選択する。
右下に保存ボタンがポップアップで出るはずなので、そちらをクリックする。

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

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

どちらもGithub上で公開されているため、gitのコマンド入力 or ブラウザ上のDLボタンから取得してください
※　Githubページの「<>Code」ボタンを押し、「Download Zip」をクリックすればプロジェクトファイル（ソースコード一式）をDLできます。
※　コマンド取得に関しては・・・やろうと思う人は自分で調べられる人と思うので調べてください。

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

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

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

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のエクスプローラ画面で説明すると、上記コマンドを打つと画像の赤矢印移動ができます。

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ページ
こちらのコード内容、修正が必要な個所について解説します。

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 開発者プラットフォームから取得します。

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

※　取得後にDeveloper PortalのProject＆Appsにアクセスすれば、API Keyなどの再生成が可能です。

.envの作成

.env.example　を　.env　に変更
.envの中身　DATABASAE_URL を以下に変更
DATABASE_URL=postgres://username:password@localhost:3306
WSL2側の端末で「npx prisma generate」を入力する。

rta in japan Twitter client　の編集

rta-in-japan-twitter-clientのGithubページ
こちらのコード内容、修正が必要な個所について解説します。

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を記載します。

rta-in-japan-twitter-clientのGithubページ　
「RTA in Japan Twitter Client 走者情報サンプル」を参照し、走者情報をまとめたGoogleスプレッドシートを作成する。
作成したスプレッドシートの「拡張機能」 ->Apps Script をクリックする
rta-in-japan-twitter-client/runner-api.gs
このURL先のコードを「コード.gs」にコピペする
右上の「デプロイ」ボタンを押し、「デプロイを管理」を選択
デプロイを管理　が表示されたら、編集のアイコンをクリックして新バージョンを選択し、デプロイをクリックする。
「ウェブアプリ」のURLをコピーし、"runner"横のダブルクォーテーションに貼り付ける。

"webhook"について

タイトル: Webhooksへの序章
こちらの手順でメッセージを受信するサーバー/チャンネルのWebhook URLを取得します。

Discord認証機能を使用するDiscordサーバで「サーバ設定」を開く
「サーバ設定」内の「アプリ -> 連携サービス」をクリック
[ウェブフック」をクリック
使用するウェブフックを選択。（無いなら「新しいウェブフック」をクリックして作成する）
「ウェブフックURLをコピー」をクリックし、"webhook"横のダブルクォーテーションに貼り付ける。

"discord"について

rta in japan twitter clientを使う際、Discord認証を行う場合はこちらの編集が必要です。
README.mdを読めばほぼ記載内容わかりますが、補足必要な情報を以下に記載します

`enable`

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

`config`

clientId
Discord Developer Portal — My Applicationsから、認証機能に用いるbotを選択し、OAuth2メニューから情報取得する。
（もしbotがなければ、右上の「New Application」をクリックして新規作成しましょう。）
redirectUrl
README.mdの通り、「https://"hostname"/login/discord/」を記載する。ngrokを活用している場合、ngrokで固定サブドメイン取得した時のコマンド内に記載された”hostname”を上記"hostname"にコピペすればOK。
例：　ngrokで取得したhostnameが"ABCHOST"の場合

config.json

"redirectUrl": "https://ABCHOST/login/discord/",

guild
使用するサーバのタイトルで右クリックし、一番下に出てくる「サーバIDをコピー」をクリックする。
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 →自分の好みのタイトルに変更する際に活用

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ツイートまでとなっています。
上記注意しつつ、本ツール活用してください。

（おまけ）VSCODEでWSL2の端末起動する方法

自分は以下画像の用にVS CODE上で端末を3つ起動させ、それぞれで上記コマンドを打ち込んでました。

VScodeで端末を表示される方法

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

↓

VScode上で表示する端末数を増やす

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

VScode上でWSL2の端末を起動させる

VScodeを開いた状態でF1キーを押し、Remote-WSL: New Window using Distroと打ち込んでEnterキーを押すと、WSL2に登録しているディストリビューション一覧が表示されます。
編集したいコードのあるディストリビューションを選択すると、Remote WSLになった状態のVScodeが開きます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

Nodejsのインストール

Redirects URLの登録

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

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

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

Linuxコマンドについて

超基礎的なコマンド（今回やる事なら、これだけでOK）

pwd （Print Working Directory）

cd （Change Directory）

ls （LiSt)

初心者が手を出さない方が良いもの

Vi, Vim

Twitter API Server の編集

configフォルダ内に「local.json」を追加する

"hashtrag"

"twitter"

.envの作成

rta in japan Twitter client の編集

static/config.json

"runner"について

"webhook"について

"discord"について

enable

config

"tweetTemplate"について

static/mainfest.json

static/index.htmlについて

webpack.config.tsについて

RTAイベントTwitterツールの起動手順

ngrokを用いてトンネルを作る（RTAイベントTwitterツールの外部公開準備）

Twitter API Serverを起動する

RTAイベントTwitter ツールを起動する

（おまけ）VSCODEでWSL2の端末起動する方法

VScodeで端末を表示される方法

VScode上で表示する端末数を増やす

VScode上でWSL2の端末を起動させる

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

pwd　（Print Working Directory）

ls　（LiSt)

Twitter API Server　の編集

rta in japan Twitter client　の編集

`enable`

`config`