feature image

2024年4月2日 | ブログ記事

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={ここにメモしたトークンを貼り付ける}

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

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が返って来てる

もっと改造してみる?

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

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

おわりに

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

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


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

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


  1. Node.jsなるものを聞いたことがある人もいるかもしれませんが、あやつはTypeScriptの実行が結構めんどいので今回はBunを使います。Denoの方が好きな人はDenoを使ってください。ほぼ同じコードでたぶん書けます。 ↩︎

  2. WSLとはWindows Subsystem For Linuxの略で、大雑把に言えばWindows上で動くLinuxです。プログラミングは割とUNIX環境 (⊃ Linux) を前提としていることが多いので、WSLを使うと幸せになれます。 ↩︎

  3. ちなみにこのパッケージはボクが作りました。所要時間1日。 ↩︎

cp20 icon
この記事を書いた人
cp20

23B ただのぷろぐらまーです icon: https://twitter.com/sora_douhu

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2024年3月22日
traPグラフィック班の活動紹介2024
haru10 icon haru10
2023年7月15日
2023 春ハッカソン 06班 stamProlog
H1rono_K icon H1rono_K
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
2024年3月17日
⑨でもわかる8bitアレンジ講習会
vPhos icon vPhos
2024年3月15日
個人開発として2週間でWebサービスを作ってみた話 〜「LABEL」の紹介〜
Natsuki icon Natsuki
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記