Bun + TypeScript で始めるモダンなtraQ Bot開発

これは新歓ブログリレー2024、25日目の記事です

25日目じゃないだって？~~勘のいいガキは嫌いだよ~~忙しかったんです本当にごめんなさい

はじめに

こんにちは！　23Bの@cp20です！

この記事ではtraQ Botがいかに簡単に作れるかを紹介します！ぜひこの記事を読んだみなさんも (入部したら) traQ Botを作って遊んでみてください！

traQ Botとは

前提知識としてまずtraQ Botについて説明していきます。まずtraQというが部内で使われている連絡ツールで、ざっくり言えばSlackとかDiscordとかそういうものだと思ってください。SlackとかDiscordとか、あるいはLINEとかを思い浮かべてみるとBotが作れる (使える) のを知っている人もいるかもしれません。traQ Botもだいたいそういう感じで、ユーザーのメッセージ (コマンド) を解釈していい感じのことをしてくれたり、自動でメッセージを投稿してくれるものです。

どうですか？　ワクワクしてきましたか？　ワクワクしてきましたよね？　では早速作り方をご紹介していきましょう。

traQ Botの作り方 in TypeScript

別に使うプログラミング言語はなんでも良いんですが、ここではボクが使い慣れているTypeScriptを使います。え？そんな言語使ったことないって？大丈夫大丈夫、ちょっとプログラミング触ったことがあれば雰囲気で理解できるぐらいには簡単ですから。

Botを作ると言っても題材がないと困りますね。せっかくなので今回はメンション付きでpingを飛ばすと経過時間と一緒にpongしてくれるBotを作ることにします。

Bunのインストール

まずは今回使うTypeScriptのランタイムであるところのBunをインストールします。^[1]

公式サイトのやり方に従ってインストールします。Windowsもサポートしてるみたいですが、WSLの方が何かと便利なのでそっちをオススメします。^[2]

このコマンドはMacとかだと「ターミナル」、WSLだと「WSL」とかって調べると出てくるターミナルに打ち込みます。

curl -fsSL https://bun.sh/install | bash

インストールできたらbun --versionと打ってみて正しくバージョンが表示されたら成功です。

プロジェクトの初期化

適当な開発用のディレクトリを作って次のコマンドを実行します。基本的にコマンドはそのディレクトリですべて実行してください。

bun init

package nameとかentry pointとか聞かれると思うんですが、全部初期値で大丈夫です。

そうすると必要なファイルとかが諸々初期化されていい感じになるはずです。Visual Studio Codeとかでこのフォルダを開いて早速開発を始めましょう。

Botを登録する

traQ Botを使うためにまずBotを登録する必要があります。

BOT Consoleにまずアクセスして「BOTs」のところから「新規登録」を選択します。ID、表示名、説明は適当に決めて、動作モードはWebSocketを選択します。できたら右下の「登録」から登録します。

Botの新規登録画面

正しくBotが作れたら、認証情報のところの「BOT Access Token」をメモしておきます。ちなみにこのTOKENは誰にも絶対に教えないようにしましょう！ (traQアカウントのパスワードぐらい大事です)

さらに購読イベントのところから「MENTION_MESSAGE_CREATED」にチェックを入れて忘れずに「変更」を押して反映させます。

Botを動かしてみる

Botが作れたら早速動かしていきましょう！

まずは必要なパッケージをインストールします。^[3]

bun add traq-bot-ts

インストールできたら次のようなコードをindex.tsに書き込んでいってください。最初に書いてある内容は消しちゃって大丈夫です。

import { Client } from 'traq-bot-ts';

const client = new Client({ token: process.env.TOKEN });

client.on('MESSAGE_CREATED', ({ body }) => {
  const {
    user: { name },
    plainText,
  } = body.message;
  console.log(`@${name} < ${plainText}`);
});

client.listen(() => {
  console.log('Listening...');
});

さらにさっきメモしたトークンをプログラムに渡す必要があるので、次の内容を.envというファイル名で保存してください。{ここにメモしたトークンを貼り付ける}のところを自分のトークンに置き換えてください。

TOKEN={ここにメモしたトークンを貼り付ける}

例えばトークンが123456なら、TOKEN=123456のようにして{}は除いて入力するようにしてください！

できたら実際に動かしてみましょう♪　次のコマンドを実行してみてください！

bun run index.ts

Listening... と表示されていたらちゃんと動いている証拠です！

試しに適当なチャンネル (#gps/sandbox とかが良いかもしれません) で自分が作ったBotをメンションしてみましょう。コンソール (コマンドを実行したところ) に自分の送ったメッセージが見れていたら成功です！

Pingを返すようにしてみる

index.tsを次の内容に書き換えて実行してみてください。

import { Api, Client } from 'traq-bot-ts';

const api = new Api({
  baseApiParams: { headers: { Authorization: `Bearer ${process.env.TOKEN}` } },
});
const client = new Client({ token: process.env.TOKEN });

client.on('MESSAGE_CREATED', async ({ body }) => {
  const {
    user: { name },
    plainText,
    channelId,
    createdAt,
  } = body.message;
  if (!plainText.includes('ping')) return;

  const ping = Date.now() - createdAt.getTime();

  const message = `@${name} pong! (${ping}ms)`;

  console.log(`Sending message: ${message}`);

  await api.channels.postMessage(channelId, { content: message, embed: true });
});

client.listen(() => {
  console.log('Listening...');
});

Botを動かしたらBotに「ping」と送ってみましょう♪　pongが無事返ってきたら成功です！

pingしたらpongが返って来てる

デプロイする

今は自分のパソコンでBotを動かしていると思いますが、これだとBotを動かすために自分のパソコンを常時起動している必要がありますよね？自宅にサーバーがあるような方ならそれを使っても良いのですが、なかなかそういうご家庭は少ないと思います。

そういうときには外部のサーバーを借りてそこでBotを動かすことが多いです。このようにサーバーにBotのプログラムを配置して、動かせる状態にすることをよく「デプロイ」と呼びます。

部内にはNeoShowcaseと呼ばれるPaaSがあります。PaaSと言われてもピンとこない人が多いかと思うんですが、とりあえず簡単にデプロイができるサービスだと思っておいてください。実際ただのVPS (自分のパソコンみたいなもの) にデプロイしようとすると設定とかが結構大変だったりします。しかしNeoShowcaseを使えば誰でも簡単にアプリをデプロイすることができます♪　実際にどうやるのかを見て行きましょう。

まずはNeoShowcaseにデプロイするためにGitHubやGiteaにソースコードを上げます。これに関してはGitの使い方とかで調べれば色々出てくると思うので、そっちを参照してください。

そしてNeoShowcaseを開いてみると次のような画面が出てくると思います。ここで「Add New App」を選択して新しいアプリを追加します。

GitHubの場合はRegister RepositoryからURLを登録して、Giteaの場合はリストから自分のリポジトリを探して選択します。リポジトリが登録出来たら以下のようにアプリの詳細を入力します。

Application Name: 適当な名前
Branch: main (master)
Deploy Type: Runtime
Build Type: Command
Base Image: oven/bun:distroless
Build Command: bun i
Use Database: No (自分でプログラムを変えてデータベースを使う場合はYes)
Entrypoint: bun run index.ts
Start Immediately: 今すぐ起動するにチェックを入れる

アプリのURLは設定しなくても大丈夫です。全ての設定が終わったらアプリが作成されていい感じに起動されます。が、これだけだと上手く動かないはずです。

そう、トークンを指定していませんね。自分のアプリの「Settings」のところから「Environment Variables」を選択して設定画面を開きます。「Key」は「TOKEN」、「Value」は自分がメモしたトークンを指定します。

設定し終わったらアプリを再起動します。そうすると上手くBotが起動できるはずです！　何かうまく行かないことがあったら設定などを見直してみると良いかもしれません。

もっと改造してみる？

ここまで動いたらもうtraQ Botをマスターしたと言っても過言ではないですよね。ここからは皆さんの創造性を発揮するフェーズです！どんなBotを作ればいいのか悩んだら、22BによるtraQ bot制作ブームについて | 東京工業大学デジタル創作同好会traPとかを参考にしてみると良いと思います。

ぜひ自分オリジナルのBotを作ってみてくださいね♪

おわりに

どうでしたか？　Bot作りに興味が湧いてきましたか？　湧いてきましたよね？

ぜひtraPに入部してBotを作ってみてください！

明日 (というか今日) の担当は @tobuhitodesu っちと @Dye っちとボク (@cp20) です！　たのしみ～

明日 (今日) のブログ記事はまだ1文字も書いてないけど、またお会いしましょう～

Node.jsなるものを聞いたことがある人もいるかもしれませんが、あやつはTypeScriptの実行が結構めんどいので今回はBunを使います。Denoの方が好きな人はDenoを使ってください。ほぼ同じコードでたぶん書けます。 ↩︎
WSLとはWindows Subsystem For Linuxの略で、大雑把に言えばWindows上で動くLinuxです。プログラミングは割とUNIX環境 (⊃ Linux) を前提としていることが多いので、WSLを使うと幸せになれます。 ↩︎
ちなみにこのパッケージはボクが作りました。所要時間1日。 ↩︎